Angularjs环境搭建

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