有角度的用户界面和AngularJS通过ocLazyLoad实现动态（懒)加载模块和依赖

什么是用户界面路由器

用户界面路由器是安古瑞库最有用的组件之一（安古瑞库由AngularJS社区构建)。它是一个第三方路由框架，允许通过状态机制组织接口，而不是简单的统一资源定位器路由。

什么是ocLoayLoad

ocLoayLoad是AngularJS的模块按需加载器。按需加载的对象

简单说就是哪个页面需要什么资源，在加载哪个页面的时候在加载，而不是把所有的资源放在模板里。

三个主要文件

脚本src=' http : angular/1。4 .8/有角/有角。量滴js '/script script src=' http : angular/ui-router/release/angular-ui-router。量滴js '/script script src=' http : angular/oclaziload/src/oclaziload。量滴js '/脚本推荐

1:首先下载插件可以百度搜索，这里我推荐在线测试的https://www.bootcdn.cn/angular-ui-router/

2:https://github.com/366065186/angularjs-oclaziload github网址

3:安古拉杰什https://code.angularjs.org/

超文本标记语言文件（部分代码)简单说明

1:首先页面引入上面三个文件

2:在a标签中写入ui-sref='链接路径' 标签

2:在页面定义一块区域用于显示链接内容ui-view/ui-view

射流研究…代码：

首先在组件中注入

ui.router '，' oc.lazyLoad '然后在通过配置进行路由配置。

(function(){ var app=angular。模块(' app '，['ui.router '，' oc.lazyLoad']) //配置路由app.config(函数($ state provider){ $ state provider//个人中心主页。状态(' admin/index '，{ url: '/admin/index '，templateUrl: '/admin/index '，//加载页面需要的js解决方案：加载(['/static/js/transfer/admin LTE/index。js '])})//分类管理列表. state('class/index '，{ url: '/class/index '，templateUrl: '/class/index '，解析： load(['/static/js/transfer/admin LTE/class/index。js '])})//轮播图列表状态(' roll '，{ url: '/roll '，templateUrl: '/roll '，解析：负载(['/static/js/transfer/admin LTE/broadcat。js '])})//验证码列表。状态(' code '，{ url: '/code '，templateUrl: '/code '，解析：加载(['/static/js/transfer/admin LTE/code。js '])})//电影列表。状态(' movie '，{ url: '/movie '，templateUrl: '/movie '，resolve:加载(['/static/js/transfer/admin LTE/movie/movie。js '])})//电影编辑状态(' movie/edit '，{ url: '/movie/edit '，templateUrl: '/movie/edit '，解析：加载(['/static/js/transfer/admin LTE/movie edit。js '])}))})；//在加载该模块的时候调用$州。go(' admin/index ')；以激活管理/索引状态app。run(function($ state){ $ state。go(' admin/index ')；});/* * 通过$ ocLazyLoad加载页面对应的所需的射流研究…数据* 通过$q异步加载射流研究…文件数据其中使用的是【承诺】保护模式】*/function load(srcs，callback){ return { deps :[' $ oclaziload '，' $q '，function($ oclaziload，$ q){ var delived=$ q . deliver()；var promise=falsesrc=angular。isarray(src)？srcs : srcs。拆分(/\ s/)；if(！承诺){承诺=交付。承诺；} angular . foreach(src)，function(src){ promise=promise。然后(function(){ angular。foreach([])，函数(模块){ if(模块。name===src){ src=模块。模块？模块。命名：模块。文件；} });返回$ OCLAZYLOAD。负载(src)；});});交付。resolve()；退货回拨？答应我。然后(function(){ return callback()；}) :承诺；} ] };}})();AngularJS路由设置对象参数规则：

属性类型描述模板字符串在ng-view模板中插入简单的html内容Url字符串在ng-view中插入html模板文件控制器字符串，由当前模板上的函数/数组执行的控制器函数controllerAs字符串指定控制器的别名重定向到字符串，由函数解析对象重定向的地址指定当前控制器所依赖的其他模块的呈现：

摘要

上面提到的是边肖推出的Angular ui-roter和AngularJS，通过ocLazyLoad实现动态(惰性)模块加载和依赖，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！