之前分享了一篇用ocLazyLoad實現按需加載angular js文件的博客.本來當時想會使用一種方法就行了.可最近剛好有時間,在網上查找了一下requirejs實現angular js文件按需加載的資料.方案如下:
項目的主結構如下圖:
1.index.html是最外層的頁面,頁面代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>require angularjs</title></head><body><a href="#module1" rel="external nofollow" >module1</a><br/><a href="#module2" rel="external nofollow" >module2</a><div style="height: 30px;width: 100px">{{str}}</div><div id="container" ui-view></div><script data-main="main.js" src="require.js" id="main"></script></body></html> 2.頁面中的script標簽中,會首先引用require.js這個文件,然后再去引用main.js這個文件,main.js主要是一些關于require的config信息,代碼如下:
var config = { baseUrl: './', //依賴相對路徑 paths: { //如果某個前綴的依賴不是按照baseUrl拼接這么簡單，就需要在這里指出 domReady:'domReady', angular: '../node_modules/angular/angular', app:'app', router:'../node_modules/angular-ui-router/release/angular-ui-router' }, shim: { //引入沒有使用requirejs模塊寫法的類庫。例如underscore這個類庫，本來會有一個全局變量'_'。這里shim等于快速定義一個模塊，把原來的全局變量'_'封裝在局部，并導出為一個exports，變成跟普通requirejs模塊一樣 'router': { deps: ['angular'], //依賴什么模塊 }, 'angular': { exports: 'angular' } }};require.config(config);// deps:['webapp']require(['domReady','app','angular'],function(){ angular.bootstrap(document, ['webapp'])//這里會去執行app.js這個文件}) 3.接下來進入app.js
/** * Created by Administrator on 2016/7/28. */define(['router'], function () { var app = angular.module('webapp', ['ui.router']); app.config( function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('module1');//如果沒有指定路由,會默認訪問module1 $stateProvider. state('module1', { url:"/module1", // controller: 'ctr1', //這里如果寫了controller,那么在加載module1.js時,js文件里面的console.log()會運行兩次 templateUrl: 'module1/module1.html', resolve: { loadCtrl: ["$q", function($q) { var deferred = $q.defer(); //異步加載controller／directive/filter/service require([ 'module1/module1' ], function() { deferred.resolve(); }); return deferred.promise; }] } }) .state("module2",{ url:"/module2", // controller: 'ctr2', templateUrl: 'module1/module2.html', resolve: { loadCtrl: ["$q", function($q) { var deferred = $q.defer(); //異步加載controller／directive/filter/service require([ 'module1/module2' ], function() { deferred.resolve(); }); return deferred.promise; }] } }) }); app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){ app.register = { //得到$controllerProvider的引用 controller : $controllerProvider.register, //同樣的，這里也可以保存directive／filter／service的引用 directive: $compileProvider.directive, filter: $compileProvider.register, service: $provide.service }; }) return app;}); 4.module1.js代碼如下:
define(['app'],function(app){ app.register .controller('ctr1', function($scope){ $scope.str = 'home page'; console.log('page1') })}) 5.module2.js代碼如下:
define(['app'],function(app){ app.register .controller('ctr2',function($scope){ $scope.str = 'local page'; console.log('page2') })}) 6.module1.html代碼如下:
<div ng-controller="ctr1">
這是tp1
<div id="navigator" style="width: 100%;height: 40px;line-height: 40px"> <a rel="external nofollow" >博客園首頁</a> <a rel="external nofollow" >Ricky的首頁</a> <a rel="external nofollow" >新隨筆</a> <a rel="external nofollow" >聯系我</a> <a rel="external nofollow" >訂閱他</a> <a rel="external nofollow" >管理</a> </div></div>
7.module2.html2代碼如下:
<div ng-controller="ctr2"> 這是tp2 {{str}}</div> 到了這一步,我們運行index.html文件,我們得到如下效果:(右圖是控制臺輸出)
點擊module2可以盡心正常切換,而且也可以看到js文件確實動態加載了;
注意:module1.js,module1.html,module2.js,module2.html折四個文件全部在module這個文件夾里面
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
