最近在使用angularjs，发现angularjs菜鸟教程上的东西太过于基础，很多东西都没有提及，比如今天的一个关于前端的优化问题，懒加载。通过路由实现地址分发的时候，再通过懒加载模式加载你所需的文件，比如是相关的controller，就是js，这样有利于提高首次加载的负担。
下面就是一个懒加载的实现过程。
实现的过程主要是引用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
});
};
以上是初始化动态加载的配置过程。
接着是建立路由：
"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下载:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论