在用angular做一些比较大的项目的时刻,假如像之前一样,在首页引入一大堆js文件话,无疑会形成初次加载斲丧许多的时候,对用户体验异常不好,所以按需加载就应运而生了,在须要用的时刻才加载,如许很高效。有些js框架能够完成,比图RequireJS ,seaJS。是一个根据须要来加载 js文件的 JavaScript框架,可防止不必要的js文件加载,提拔网页阅读速率。
然则本日给人人引见别的一个基于angular的插件,ocLazyLoadjs,一样能够完成按需加载。在angular中应用ocLazyLoadjs完成按需加载,能够在一下几个方面举行应用:
1)在ui-route路由设置中加载
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load([所需加载的文件]);//途径一定要准确
}]
}
2)在掌握器中动态加载,须要引入$ocLazyLoad
$ocLazyLoad.load([所需加载的文件]);
3)依靠加载
angular.module('myapp', [[
所需加载的文件
]])
4)在模板template中加载
<div oc-lazy-load="lazyload"></div>
$ocLazyLoadProvider.config({
modules: [{
name: 'lazyload',
files: [
'所需加载的文件'
]
}]
})
下面连系一个dome,细致说说
目次以下:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./lib/css/base.css">
</head>
<body>
<div ng-app="app">
<div id="top">this is head!</div>
<div id="con" ng-controller="menuCtr">{{num}}
<ul class="menu">
<li ng-repeat="menu in menus"><a ui-sref="{{menu.sref}}">{{menu.txt}}</a></li>
</ul>
<div ui-view=""></div>
</div>
<div id="bot">this is footer!</div>
</div>
<script src="./lib/js/angular.min.js"></script>
<script src="./lib/js/angular-ui-router.js"></script>
<script src="./lib/js/ocLazyLoad.js"></script>
<script src="./main.js"></script>
</body>
</html>
main.js
在main.js中设置了目次的路由,当点击目次一时,会加载目次一的内容,对应的掌握器,效劳文件当点击目次二的时刻,会加载目次二所对应的模板,掌握器,效劳
基于uiRouter的resolve是在加载controller和template之前所实行的一系列操纵,它协助我们初始化我们所要前去的那一个视图。只要rsolved(操纵完成),controller才会被实例化。因而,我们能够在resolve步骤内里加载我们所须要的controller,以及须要用到的效劳。
目次一对应的掌握器,效劳是在路由设置内里加载的
目次二对应的掌握器,效劳是在模板中加载的
var menuCtr=function($scope){
$scope.menus=[
{txt:"目次1",sref:"menu1"},
{txt:"目次2",sref:"menu2"},
];
}
menuCtr.$injector=["$scope"];
var app=angular.module("app",["ui.router","oc.lazyLoad"]);
app.controller("menuCtr",menuCtr);
//ui—route的路由设置
app.config(["$stateProvider","$urlRouterProvider","$ocLazyLoadProvider",function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state("menu1",{
url:"/menu1",
templateUrl:"views/menu1.html",
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load(["./controller/menuCtr1.js","./service/menu1Service.js"]);
}]
}
}).state("menu2",{
url:"/menu2",
templateUrl:"views/menu2.html",
})
$ocLazyLoadProvider.config({
modules: [{
name: 'lazyload',
files: [
'./controller/menuCtr2.js',
'./service/menu2Service.js'
]
}]
})
}]);
首页时加载的文件
当点击目次一时的加载
当点击目次二时加载
我们在目次一对应的掌握中加载目次一下的子目次所对应的路由,经由过程在掌握器中动态加载的体式格局
var menuCtr1=function($scope,$ocLazyLoad){
$scope.menuSon=[
{txt:"二级目次一",sref:"menu1.menuSon1"},
{txt:"二级目次二",sref:"menu1.menuSon2"}
];
$scope.flag="fath";
$ocLazyLoad.load([
'./route/router.js'//注重此处的途径是相对于main.js
]);
$scope.$broadcast('msg', $scope.menuSon);
}
menuCtr1.$injector=["$scope","$ocLazyLoad"];
angular.module("app",[]).controller("menuCtr1",menuCtr1)
源码地点:https://github.com/hubingg/an…
本文若有不对的处所,迎接指出来