angular的require模块的使用（$requireProvider的作用）

 　

今天我们学习一下angular的另一个几乎被忽略的模块angular-require

先给出链接地址(git:)   https://github.com/Treri/angular-require/

Usage

1. load angular-require.js before your app's init function. You can load it using require.js or just write in html.
2. include ngRequire in your angular app's dependence.
3. Done.（引入js文件，注入依赖）

angular.module('app', ['ngRequire', 'ui.router'])

.config(...)

好了我这里就讲讲在一个项目中，我们是如何使用的

（1）    一个项目通常会有一个start.js作为启动js,它的作用是引入各种库文件（第三方js，插件），并且了我们通常使用require.js作为加载工具。

Em:

try {
    require.config({
        baseUrl: "js",
        paths: {
            'angular': '../lib/angular',
            'ui-router': '../lib/angular-ui-router',
            'jquery': '../lib/jquery',
            'lodash': '../lib/lodash',
            'ng-bootstrap': '../lib/ui-bootstrap-tpls-1.3.2',
            'angular-locale_zh-cn': "../lib/angular-locale_zh-cn",
            'webupload': '../lib/webuploader',
            'rap': "../lib/ngrap",
            'nganimate': '../lib/angular-animate',
            'kindeditor-all': '../lib/kindeditor/kindeditor-all',
            'zh-cn': '../lib/kindeditor/lang/zh-CN',
            'pingpp': '../lib/pingpp',
            'echarts': '../lib/echarts',
            'thenjs': '../lib/then',
            'map_china': '../lib/echarts/map/china',
            "ng-require": '../lib/angular-require'
        },
        shim: {
            'angular': {
                exports: 'angular',
                deps: ['jquery']
            },
            'zh-cn': {
                deps: 'kindeditor-all'
            },
            'ui-router': {
                deps: ['angular']
            },
            'angular-locale_zh-cn': {
                deps: ['angular'],
                deos:['ng-bootstrap']
            },
            'ng-bootstrap': {
                deps: ['angular']
            },
            'rap': {
                deps: ['angular']
            },
            'nganimate': {
                deps: ['angular']
            },
            'ng-require': {
                deps: ["angular"]
            }
        },
        waitSeconds: 15
    });
    require(['angular', 'env', 'app', 'router', 'ctrl/header','ctrl/rootctrl'], function (angular, env) {

        if (env == "dev") {

            document.domain = "localhost";
        }
        angular.bootstrap(document, ['myapp']);
    });
} catch (e) {
    window.location.href = "/ie8check/ie8.html";
}

关于如何使用require.js，这里不做重点，你可以参考。RequireJS官网，或者

http://www.cnblogs.com/evaling/p/6722760.html

http://www.cnblogs.com/evaling/p/6722980.html

(2）此外在一个项目里，我们通常会有一个app.js文件，这个文件我们会建立一个主模块（angular的module）

Em:

define(['angular','ng-require','rap','ng-bootstrap','ui-router'], function (angular) {
    var myapp = angular.module('myapp', ['ui.router', 'ui.bootstrap', 'ngRap','ngRequire']);    myapp.config(['$httpProvider', 'ngRapProvider', function (httpProvider, ngRapProvider) {
        //ngRapProvider.script = ' http://rap.taobao.org/rap.plugin.js?projectId=2188'; // replce your host and project id
        //ngRapProvider.enable({
        //    mode:0,
        //    domain:['http://10.0.3.217','http://dev.greatipr.com','http://localhost']
        //});
        //httpProvider.interceptors.push('rapMockInterceptor');
    }]);
    return myapp;
});

(3)前面两步，我只是讲述如何在项目中引入ng-require

  此时来讲讲ng-require有啥作用？

打个比喻，加入在一个项目中，我们有多个tab切换（tab都对应着不同内容），因此在切换tab时候，势必会造成数据的变化。

此时有两种不同的解决方案：

方法一：每一个tab都对应着不同的路由，不同的控制器（彼此是分开的文件）ideas_first_ctrl，ideas_allIdeas_ctrl，ideas_myIdeas_ctrl是三个不同的文件相互独立的

define(['app'], function (myapp) {    myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$requireProvider',       
 function ($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) {
            $urlRouterProvider.otherwise('home.ideas');
            $stateProvider.state('home.ideas', {//创意列表（全部创意）
                    url: '/ideasList',
                    views: {
                    "content": {
                        templateUrl: 'tpls/ideas/list.html',
                        controller:"ideas_first_ctrl"
                    }
                }
            })
            .state('home.ideas.allIdeas', {//全部创意
              //  url: '/allIdeas/:user_right',
               url:'/allIdeas',
                views: {
                    "part": {
                        templateUrl: 'tpls/ideas/all_idea_list.html',
                        controller:'ideas_allIdeas_ctrl'
                    }
                }
            })
           .state('home.ideas.myIdeas', {//我的创意
                //url: '/myIdeas/:user_right',
                    url:'/myIdeas',
                    views: {
                    "part": {
                        templateUrl: 'tpls/ideas/myIdeas.html',
                        controller:'ideas_myIdeas_ctrl'
                    }
                }
            })

方法二：每个tab也是对应着不同的路由，不同的控制器，但是我们把控制器可以写在同一个文件（这样写的好处，可以解决一些异步加载的坑）

define(['app'], function (myapp) {
    myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$requireProvider',
        function ($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) {
            $stateProvider.state('learn.document', {
                url: '/document',
                views: {
                    'module': {
                        templateUrl: 'tpls/platforms/learn/module.html',
                        resolve: {//
                            deps: $requireProvider.requireJS([
                                'ctrl/learn/document'
                            ])
                        }
                    }
                }
            })
                .state('learn.document.list', {
                    url: '/list',
                    views: {
                        'content': {
                            templateUrl: 'tpls/platforms/learn/document/list.html',
                            controller: 'learn_document_ctrl'
                        }
                    }
                })
                .state('learn.document.edit', {
                    url: '/edit?docid',
                    views: {
                        'content': {
                            templateUrl: 'tpls/platforms/learn/document/edit.html',
                            controller: 'learn_document_edit_ctrl'
                        }
                    }
                })
        }
    ]);
});

而此时ctrl/learn/document中我们写着两个不同的控制器，对应不同的tab.

define(['app', 'api/learn_api','directives/kindeditor/kindeditor','services/myalert/myalert'], function (myapp) {
      myapp.controller('learn_document_ctrl', ['$scope', 'learn_api', function (s, learn_api){
     }
}])
    myapp.controller('learn_document_edit_ctrl', ['$scope','learn_api','$state','myalert',
function(){

}]

tpls/platforms/learn/module.html

<div ui-view="content"></div>