標籤：nbsp release har type 子頁面 ati path homepage width
用angular有一段時間了,平日裡只顧著寫代碼,沒有注意到效能最佳化的問題,而今有時間,於是捋了捋,講學習過程記錄於此: 問題描述:由於採用angular做了網頁的單頁面應用,需要一次性在主布局中將所有模組需要引用到的js都引入.對於比較小的項目,這是可行的,但是對於大的項目,一旦js檔案較多,在頁面首次載入時就引入所有js檔案,無疑會延緩頁面載入的速度,造成不良額使用者體驗.那麼分布載入(按需載入)就顯得很有必要了.<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>ui-router-lazyload</title> <link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css"> <script src="../angular/angular.min.js"></script> <script src="../angular-ui-router/release/angular-ui-router.min.js"></script> <script src="../oclazyload/dist/ocLazyLoad.min.js"></script> <script src="index.js"></script></head><style> body{ font-family: "Microsoft JhengHei UI"; } .navigator{ width: 500px;margin: 0 auto } .navigator li{ color: #000;font-size: 14px; }</style><body ng-controller="myController"><ul class="navigator nav nav-pills"> <li role="presentation" class="active"><a href="#home" ng-click="isActive($event)">首頁</a></li> <li role="presentation" class="active"><a href="#child">子頁面</a></li> <li role="presentation" class="active"><a href="#third" ng-click="isActive($event)">三級頁面</a></li></ul><div ui-view style="width: 500px;margin: 50px auto 0"></div></body></html> js代碼:/** * Created by admin on 2016/7/15. */var myApp=angular.module("myApp",["ui.router","oc.lazyLoad"]);myApp.config(function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.when("","/home"); $stateProvider.state(‘home‘,{ url:"/home", templateUrl: ‘homepage.html‘, resolve:{ loadMyCtrl:[‘$ocLazyLoad‘,function ($ocLazyLoad) { return $ocLazyLoad.load({ name:"homeApp", files:["homepage.js"] }) }] } }); $stateProvider.state(‘index‘,{ url:"/home", templateUrl:‘index.html‘ }); $stateProvider.state(‘child‘,{ url:"/child", templateUrl:‘child.html‘, resolve:{ loadMyCtrl:function ($ocLazyLoad) { return $ocLazyLoad.load({ name:‘childApp‘, files:["child.js"] }) } } }) $stateProvider.state(‘third‘,{ url:"/third", templateUrl:‘third.html‘, resolve:{ loadMyCtrl:function ($ocLazyLoad) { return $ocLazyLoad.load({ name:‘grandApp‘, files:["third.js"] }) } } }) });myApp.controller("myController",function ($state,$scope,$location) { $scope.turnPage=function () { // $state.go(‘home‘); $location.path(‘/home‘) }});
頁面初始效果如,開啟瀏覽器控制台,可以看到child.js以及third.js在頁面載入時並沒有載入:
頁面初始化:
當點擊子頁面和三級頁面時,會依次載入所依賴的js檔案.實現分步載入.
點擊子頁面:
三級頁面:
填坑:網上關於angular按需載入的文章也蠻多的,也有人使用的是requireJS來進行這個操作,而且ocLazyLoad的使用方法也有很多.之前按照一些文檔的方法,在配置路由時,加了下面的藍色代碼,頁面是能跳轉,但是homepage.html的js代碼卻執行了兩次,難道是控制器載入了兩次麼.對於這個坑,我還在探索中,也希望大家能夠發表意見或者建議.
$stateProvider.state(‘home‘,{ 8 url:"/home",
controller:‘homeController‘, 9 templateUrl: ‘homepage.html‘,10 resolve:{11 loadMyCtrl:[‘$ocLazyLoad‘,function ($ocLazyLoad) {12 return $ocLazyLoad.load({13 name:"homeApp",14 files:["homepage.js"]15 })16 }]17 }18 });
angularjs ocLazyLoad分步載入js檔案,angularjs ocLazyLoad按需載入js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
