今天我们学习一下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?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>