Home > Developer > Web Develop
with angular for a while, on weekdays, only to write code, did not notice the problem of performance optimization, and now there is time, so smoothed out, said the learning process recorded in this: the problem description: because the use of angular web page of the single page application, It is necessary to introduce all the JS that the module needs to refer to in the main layout at one time. for smaller projects, this is feasible, but for large projects, once the JS file is more, in the first load of the page to introduce all JS files, will undoubtedly delay the page loading speed, resulting in bad user experience. so distributed loading ( Loading on Demand) is Necessary.<! DOCTYPE html>"en"ng-app="myApp">"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>Body{font-family:"Microsoft Jhenghei UI"; }. navigator{width:500px;margin:0auto}. Navigator Li{color: # the; font-size:14px; }</style><body ng-controller="Mycontroller"><ulclass="Navigator nav nav-pills"> <li role="Presentation" class="Active"><a href="#home"ng-click="isActive ($event)"> Home </a></li> <li role="Presentation" class="Active"><a href="#child"> sub-pages </a></li> <li role="Presentation" class="Active"><a href="#third"ng-click="isActive ($event)"> Level three page </a></li></ul><div Ui-view style="width:500px;margin:50px Auto 0"></div></body>JS Code:/** * Created by admin on 2016/7/15.*/varMyapp=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') }});
Page initial effects such as opening the browser console, you can see that child.js and third.js are not loaded when the page loads:
page Initialization:
When you click on a sub-page and a level three page, the dependent JS file is loaded sequentially.
Click on the Sub-page:
Level Three page:
Pits: on-line on the angular on-demand loading of the article is also quite a lot of people using Requirejs to do this operation, and oclazyload use a lot of methods. before following the method of some documents, when configuring the route, add the following blue code, the page is able to jump, But Homepage.html's JS Code was executed two times, is the controller loaded two times. for this pit, I am still exploring, and I hope you can express your opinions or suggestions.
$stateProvider. State (' Home ', {8 url: "//",
controller: ' HomeController ', 9 templateurl: ' homepage.html ', ten resolve:{11 loadmyctrl:[' $ Oclazyload ', function ($ocLazyLoad) { return $ocLazyLoad. load ({" homeapp", files:[" Homepage.js "]15 }") }]17 }18 });Angularjs oclazyload Step load js file, angularjs oclazyload load JS on Demand
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
