最近在使用AngularJS，發(fā)現(xiàn)AngularJS菜鳥教程上的東西太過于基礎，很多東西都沒有提及，比如今天的一個關于前端的優(yōu)化問題，懶加載。通過路由實現(xiàn)地址分發(fā)的時候，再通過懶加載模式加載你所需的文件，比如是相關的controller，就是js，這樣有利于提高首次加載的負擔。
下面就是一個懶加載的實現(xiàn)過程。
實現(xiàn)的過程主要是引用3個主要的JS文件：
<script src="angular/1.4.8/angular/angular.min.js"></script><script src="angular/ui-router/release/angular-ui-router.min.js"></script><script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>
然后通過 APP 配置，將依賴的腳本進行注入操作：
var app = angular.module('pkcms', ["ui.router", "oc.lazyLoad"]); app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider", function ($provide, $compileProvider, $controllerProvider, $filterProvider) { app.controller = $controllerProvider.register; app.directive = $compileProvider.directive; app.filter = $filterProvider.register; app.factory = $provide.factory; app.service = $provide.service; app.constant = $provide.constant; }]); // 按模塊化加載其他的腳本文件 app.constant('Modules_Config', [ { name: 'treeControl', serie: true, files: [ "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js" ]<br>}]); app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]); function routeFn($ocLazyLoadProvider,Modules_Config){ $ocLazyLoadProvider.config({ debug:false, events:false, modules:Modules_Config });}; 以上是初始化動態(tài)加載的配置過程。
接著是建立路由：
"use strict"app.config(["$stateProvider","$urlRouterProvider",routeFn]);function routeFn($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise("/main"); $stateProvider .state("main",{ url:"/main", templateUrl:"views/main.html", controller:"mainCtrl", controllerAs:"main", resolve:{ deps:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("controllers/main.js"); }] } }) .state("adminUser",{ url:"/adminUser", templateUrl:"views/adminUser.html", controller:"adminUserCtrl", controllerAs:"adminUser", resolve:{ deps:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("controllers/adminUser.js"); }] } })};最后是按路由配置的在對應目錄下建2個HTML頁面文件和2個JS文件用做測試
main.html
<div> {{main.value}}</div>adminUser.html<div> {{adminUser.value}}</div>main.js
/** * mainCtrl * Created by pkcms.cn on 2016/6/24. */(function () { "use strict" app.controller("mainCtrl", mainCtrlFn); function mainCtrlFn() { this.value = "Hello World"; }}())adminUser.js
/** * adminUserCtrlFn * Created by pkcms.cn on 2016/6/24. */(function () { app.controller('adminUserCtrl',adminUserCtrlFn); function adminUserCtrlFn() { this.value = "welcome to admin user"; }}());demo下載:angularjs-oclazyload_jb51.rar
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
