用有角的有一段时间了，平日里只顾着写代码，没有注意到性能优化的问题，而今有时间，于是捋了捋，讲学习过程记录于此：

问题描述：由于采用有角的做了网页的单页面应用，需要一次性在主布局中将所有模块需要引用到的射流研究…都引入。对于比较小的项目，这是可行的，但是对于大的项目，一旦射流研究…文件较多，在页面首次加载时就引入所有射流研究…文件，无疑会延缓页面加载的速度，造成不良额用户体验。那么分布加载（按需加载)就显得很有必要了。

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title ui-router-lazy load/title link rel='样式表href='./bootstrap/dist/CSS/bootstrap量滴CSS '脚本src=' http :/棱角分明/棱角分明。量滴js/'脚本脚本src='http:/angular-ui-路由器/release/angular-ui-路由器。量滴js '/script脚本src=' http :/oclaziload/dist/oclaziload。量滴js '/script script src=' http :索引。js '/脚本/头部样式正文{ font-family : ' Microsoft jhenhei UI '；} .导航器{ width : 500 pxmargin : 0 auto } .航海家Li { color : # 000 font-size : 14px；}/style body ng-controller=' my controller ' ul class=' navigator nav-pits ' Li角色=' presentation ' class=' active ' a href=' # home ' ng-click=' IsActive($ event)主页/a/li li角色='演示文稿类='活动a href='#child '子页面/a/li li角色=' presentation ' class=' active ' a href=' # third ' ng-click=' IsActive($ event)'三级页面/a/Li/uldiv ui-view style=' width : 500 px；边距： 50px自动0 '/div/body/html js代码：

var myApp=angular.module('myApp '，['ui.router '，' oc。LazyLoad '])；myApp.config(函数($stateProvider，$ URLrouterProvider){ $ URLrouterProvider。when('，'/home ')；$stateProvider.state('home '，{ url:'/home '，Templateurl : ' homepage.html '，解析： { LoadMyctrl :[' $ OCLAZYLAD '，函数($ OCLAZYLAD){ return $ OCLAZYLAD。加载({ name : ' Homeapp '，file :[' home。js ']})})})；$stateProvider.state('index '，{ url:'/home '，Templateurl : ' index。html ' })；$stateProvider.state('child '，{ url:'/child '，templateUrl:'child.html '，解析： { LoadMyctrl : FuncTion($ OCLAZYLAD){ return $ OCLAZYLAD。加载({ name : '子应用程序'，file :['子。js ']})})$ StateProvider。state(' third '，{ URL 3: '/third '，template URL : ' myapp . controller(' my controller ')，function ($state，$scope，$location) { $scope。收费公路=function(){//$ state。去(“家”)；$位置。路径('/home ')})；页面初始效果如下图，打开浏览器控制台，可以看到child.js以及third.js在页面载入时并没有加载：

页面初始化：

当点击子页面和三级页面时，会依次加载所依赖的射流研究…文件。实现分步加载。

点击子页面：

三级页面：

填坑：网上关于有角的按需加载的文章也蛮多的，也有人使用的是需求j来进行这个操作，而且ocLazyLoad的使用方法也有很多。之前按照一些文档的方法，在配置路由时，加了下面的蓝色代码，页面是能跳转，但是homepage.html的射流研究…代码却执行了两次，难道是控制器加载了两次么。对于这个坑，我还在探索中，也希望大家能够发表意见或者建议。

$stateProvider.state('home '，{ url:'/home '，controller:'homeController '，模板URL : ' home。html '，解析： { loadmyctrl :[' $ oclaziload '，函数($ oclaziload){ return $ oclaziload。加载({ name : ' homeApp '，file 3:[' home。js ']})})})；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。