Angularjs架构搭建
     1、搭建Angularjs项目
          1）在package.json中配置如下，然后 npm install下载包
 
 
{
  "name": "angularjst",
  "version": "1.0.0",
  "description": "轮子",
  "author": "Dengwh",
  "private": true,
  "dependencies": {
    "angular": "^1.6.0",
    "angular-ui-router": "0.3.2",
    "bootstrap": "3.3.7",
    "es5-shim": "4.5.9",
    "html5shiv": "3.7.3",
    "jquery": "3.1.1",
    "requirejs": "2.3.2",
    "text": "2.0.15",
    "urijs": "1.18.4",
    "webuploader": "0.1.8",
    "angular-ui-tree": "2.22.2",
    "angular-async-loader": "1.3.2"
  }
}
 
 
     2)添加bootstrap.js文件，内容如下
   
require.config({
    map: {
        '*': {
            'ie8css': './node_modules/requirecss-branch-seagull2/ie8css.min',
            'css': './node_modules/requirecss-branch-seagull2/css.min'
        }
    },
    waitSeconds: 0,
    //配置angular的路径
    paths: {
        'angular': './node_modules/angular/angular',
        'angular-ui-router': './node_modules/angular-ui-router/release/angular-ui-router.min',
        'angular-ui-tree': './node_modules/angular-ui-tree/dist/angular-ui-tree.min',
        'angular-async-loader': './node_modules/angular-async-loader/angular-async-loader',
 
        'jquery': './node_modules/jquery/dist/jquery.min',
        'webuploader': './node_modules/webuploader/dist/webuploader',
        'urijs': './node_modules/urijs/src',
    },
    //配置引入依赖的包名
    shim: {
        'angular': { exports: 'angular' },
        'angular-ui-router': { deps: ['angular'] },
        'angular-ui-tree': { deps: ['angular', 'css!./node_modules/angular-ui-tree/dist/angular-ui-tree.min'] },
    }
});
 
require(['angular', 'webuploader','./javascript/app-routes'],
    function (angular, webuploader) {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['app']);
            angular.element(document).find('html').addClass('ng-app');
        });
        window.WebUploader = webuploader;
    });
 
     3)添加app.js文件，内容如下
 
     define(function (require, exports, module) {
    var angular = require('angular');
    var asyncLoader = require('angular-async-loader');
 
    require('angular-ui-router');
 
    var app = angular.module('app', ['ui.router']);
 
    asyncLoader.configure(app);
    module.exports = app;
});
 
     4)添加app-routes.js文件，内容如下，注意一个页面对应一个路由

 
define(function (require) {
    var app = require('javascript/app');
 
    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认跳转首页
        $urlRouterProvider.otherwise('/');
 
        //首页
        $stateProvider.state('Login', {
            url: '/',
            templateUrl: './Views/Login.html',
            controller: 'Login_controller',
            controllerUrl: './controller/Login-controller.js'
        });
 
        //个人信息页
        $stateProvider.state('Login.Information', {
            url: 'Information/:ID',
            templateUrl: './Views/Info/Information.html',
            controller: 'Information_controller',
            controllerUrl: './controller/Info/Information-controller.js'
        });
 
    }]);
});
 
     5)在总的模板页中加入data-ui-view,内容如下\

 
<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Angularjsdemo</title>
    <!-- Bootstrap -->
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
 
<body>
    <div data-ui-view style="margin-left:auto;margin-right:auto;width:80%;min-width:768px;">
 
    </div>
 
    <script src="./node_modules/requirejs/require.js"></script>
    <script src="./javascript/bootstrap.js"></script>
</body>
 
</html>
 
     6)在项目模板页中加如下class，必须加，不加内部的文件找不到
 
     <div>
        <div class="content-main-right pull-left data-ui-view" style="padding:0;float:left;width:80%;min-width:768px;">
 
        </div>
     </div>
 
     7)其他内容就是在这个class下添加，如果添加多个模板页，请在class中添加class
 
 

Angularjs环境搭建的更多相关文章

  1. Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

    1.下载angularjs 进入其官网下载:https://angularjs.org/‎,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angular ...

  2. windows下angularJs环境搭建和遇到的问题解决

    搭建本地开发环境 angular官网社区上说:你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular. 本人也认为在本地搭建学习环境--靠谱.所以决定尝试一下. 安照中文社区给的步 ...

  3. angularJS开发环境搭建和启动

    本文目录:1.angularJS框架简介 2.angularJS环境搭建 3.启动一个项目 1.angularJS框架简介 AngularJS是一个开发动态Web应用的框架.它让你可以使用HTML作为 ...

  4. AngularJS2 环境搭建:

    AngularJS2 基础学习: 参考 mybase 3-26 文件 angular 环境的构建:( 由于 Angular 编写的代码不是 浏览器可以直接运行的,需要经过编译,所以需要构建一个环境) ...

  5. Cordova环境搭建 & HelloWorld

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

  6. 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

    这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...

  7. Cordova+ionic 开发hybird App --- 开发环境搭建

    Cordova 开发hybird App 开发环境搭建 一．一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...

  8. spring+springMVC+mybatis的框架项目基础环境搭建

    上一个项目在后台用到spring+springMVC+mybatis的框架,先新项目初步需求也已经下来,不出意外的话,应该也是用这个框架组合. 虽然在之前activiti相关的学习中所用到的框架也是这 ...

  9. [ionic开源项目教程] - 第1讲 前言,技术储备,环境搭建,常用命令

    前言 这是一个系列文章,将持续更新到项目完结,从环境搭建开始讲解,包括实战开发中遇到的各种问题的解决方案,都将毫无保留的分享给大家. 技术储备 开始本项目之前,请确保自己对以下技术点都有所了解. ht ...

随机推荐

  1. MVC Core 网站开发（Ninesky） 2.1、栏目的前台显示（补充）

    在2.1.栏目的前台显示中因右键没有添加视图把微软给鄙视了一下,后来有仔细研究了一下发现应该鄙视自己,其实这个功能是有的,是自己没搞清楚乱吐糟. 其实只要在NuGet中安装两个包(Microsoft. ...

  2. 流程表单中js如何清空SheetUser控件数据？

    昨天有人问我js怎么清空.我试了试,发现简单的赋给他空值,并没有用.只能给他赋一个真实存在的值才有用.于是跟踪了一下他的删除按钮. 效果如下 使用场景:可以根据字段的不同类别变更人员. js代码如下, ...

  3. Android开发案例 – 在AbsListView中使用倒计时

    在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...

  4. atitit.细节决定成败的适合情形与缺点

    atitit.细节决定成败的适合情形与缺点 1. 在理论界有两种观点:一种是"细节决定成败",另一种是"战略决定成败".1 1.1. 格局决定成败,方向决定成败 ...

  5. SQL-union

    集合运算符是对两个集合操作的,两个集合必须具有相同的列数,列具有相同的数据类型(至少能隐式转换的),最终输出的集合的列名由第一个集合的列名来确定.(可以用来连接多个结果)联合(union)与连接(jo ...

  6. mono for android 读取网络远程图片

    布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=& ...

  7. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  8. Android开发学习之路-DiffUtil使用教程

    谷歌最近更新了Support Library 24.2.0,而DiffUtil就是在这个版本添加的一个工具类. DiffUtil是一个查找集合变化的工具类,是搭配RecyclerView一起使用的,如 ...

  9. Spring的前期配置

    1创建一个java项目,鼠标单击项目右键新建一个名为lib的文件夹 2在lib文件夹中考入Spring需要的配置文件(俗称jar包) 3 按Shift选中这些jar右键添加至构建路径 4选中src目录 ...

  10. Atitit onvif 协议截图 getSnapshotUri 使用java

    Atitit onvif 协议截图 getSnapshotUri 使用java 1.1. ONVIF Device Test Tool1 1.2. 源码2 1.3. 直接浏览器访问http://192 ...