AngularJS 项目搭建--基于RequireJs

较大规模的angular单页应用由于引用了大量的资源文件可能会导致在页面加载速度较慢，然而这些资源并非都需要在首页使用，这里我们可以使用了 RequireJs 和 angular-async-loader 来实现资源和angular模块的异步加载，提高应用的加载速度和性能

依赖

使用bower管理项目依赖

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。（bower需要依赖 nodejs）

安装项目依赖

1.angular

bower install angular

2.angular-ui-router

bower install angular-ui-router

3.requirejs 详细文档

bower install requirejs

4.angular-async-loader

bower install https://github.com/subchen/angular-async-loader.git

---

目录结构

└── project
    ├── js                        -- js目录
         ├── app.js               -- 初始化app
         ├── login.js             -- 登陆页控制器
         ├── router.js            -- 路由
         ├── service.js           -- 服务模块
         └── productlist.json     -- 测试数据
    ├── template                  -- 模版html
    ├── index.html                -- 入口页
    ├── bootstrap.js              -- 项目启动器
    └── bower_components          -- bower维护的插件

调用

配置需要使用requirejs调用的模块路径和依赖（bootstrap.js）

require.config({
    baseUrl:'./',
    paths:{
        'angular':'bower_components/angular/angular',
        'angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min',
        'service':'js/service.js'
    },
    shim:{
        'angular':{exports:'angular'},
        'angular-ui-router': {deps: ['angular']},
        'service':{deps: ['angular']}
    },
    waitSeconds: 0 //超时时间 设为0即持续等待
})

初始化项目，启动angular（bootstrap.js）

//载入angular和路由
require(['angular','js/router'],function(angular){
    angular.element(document).ready(function(){
        angular.bootstrap(document,['app']); //angular加载完成后手动启动angular
    });
})

初始化angular主模块并配置异步加载模块（js/app.js）

define(function(require,exports,module){
    var angular = require('angular'); //引入angular
    var asyncLoader = require('angular-async-loader'); //引入异步加载模块组件

    require('angular-ui-router')
    
    var app = angular.module('app', ['ui.router']); //定义app模块

    asyncLoader.configure(app); //给app模块配置异步加载
    
    module.exports = app; //作为模块导出
})

路由中要定义controller所在文件位置（js/router.js）

$stateProvider.state('login', {
    url:'/login',
    templateUrl: "template/login.html",
    controllerUrl: "js/login", //controller所在文件位置
    controller: "login" //controller名称
})

新建自定义模块（js/service.js）

define(function(require) {
    var angular = require('angular'); //引入angular

    angular.module('app.service', []) //创建模块
        .factory('asyncModule', function() {
            return '我的模块'
        })
})

controler中异步加载模块（js/login.js）

define(function(require) {

    var app = require('js/app') //引入js/app.js下的app模块

    require('service'); //加载服务模块的js文件    
    app.useModule('app.service'); //异步加载app.service模块

    // 控制器中注入方法     
    app.controller('login',['$scope','asyncModule',
    function($scope,asyncModule){
        alert(asyncModule);
    }]);
    
})