angular的require模块的使用，$requireProvider的作用
今天我们学习一下angular的另一个几乎被忽略的模块angular-require
先给出链接地址(git:) https://github.com/Treri/angular-require/
Usage
- load angular-require.js before your app's init function. You can load it using require.js or just write in html.
- include ngRequire in your angular app's dependence.
- 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?project; // 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>