Angular-ui-router+ocLazyLoad.js应用实例

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Goole所收购。是一款优秀的前端JS框架.AngularJS有着诸多特性,最为核心的是：MVC，撗块化，自动化双向数据绑定,语义化标签,依赖注入等等。

主要说一下

   Angular-ui-router：

　　　　$stateProvider：处理路由状态的服务，路由的状态反应了该项在应用程序中的位置,描述了在当下UI是应该怎样的，并且该做什么.

           state(name,stateConfig):注册一个状态，并绑定其配置。

   参数：

       name:状态的名称。

       stateConfig:状态配置对象

       templateUrl：模板路径的字符串,或者返回模板字符串的函数.

       controller:新注册一个控制器函数或者一个已注册的控制器的名称字符串

       resolvue：object,将会被注册入controller去执行的函数

       ocLazyLoad.js是AngularJS的按需加载器。

  1.按需加载的对象：各个Controller模块，Directive模块，Server模块,template模块,这些都是一些js和html文件.

  2.按需加载的场景

 路由加载(resolve/uiRouter)   

/*
* cofig for ui.router
*/
"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/default");
$stateProvider.state("default",{
　　url:"/default",
　　templateUrl:"views/default.html",
　　controller:"defaultCtrl",
　　controllerAs:"default",
　　resolve:{
　　　　deps:["$ocLazyLoad",function($ocLazyLoad){
　　　　return $ocLazyLoad.load("js/controllers/default.js");
　　}]
　} 
}).state("uibootstrap",{
　　url:"/uibootstrap",
　　templateUrl:"views/ui-bootstrap.html",
　　resolve:{
　　　　deps:["$ocLazyLoad",function($ocLazyLoad){
　　　　　　return $ocLazyLoad.load("ui.bootstrap");
　　　　}]
　　} 
}).state("ngtable",{
　　url:"/ngtable",
　　templateUrl:"views/ng-table.html",
　　controller:"ngTableCtrl",
　　controllerAs:"ngtable",
　　resolve:{
　　　　deps:["$ocLazyLoad",function($ocLazyLoad){
　　　　　　return $ocLazyLoad.load("ngTable").then(
　　　　function(){
　　　　　　return $ocLazyLoad.load("js/controllers/ng-table.js");
　　　　});
　　}]
　　} 
}).state("ngtree",{
　　url:"/ngtree",
　　templateUrl:"views/angular-tree-control.html",
　　controller:"ngTreeCtrl",
　　controllerAs:"ngtree",
　　resolve:{
　　deps:["$ocLazyLoad",function($ocLazyLoad){
　　return $ocLazyLoad.load("treeControl").then(
　　function(){
　　　　return $ocLazyLoad.load("js/controllers/angular-tree-control.js");
　　});
　　}]
} 
}).state("detail",{
　　url:"/detail",
　　templateUrl:"views/detail.html", 
　　})
};

oclazyload.config配置页

   /** modules config for ocLazyLoad */"use strict"

tempApp
.constant("Modules_Config",[
{
　　name:"ngTable",
　　module:true,
　　files:[
　　　　"Scripts/ng-table/dist/ng-table.min.css",
　　　　"Scripts/ng-table/dist/ng-table.min.js"
　　]
},
{
　　name:"ui.bootstrap",
　　module:true,
　　files:[
　　　　"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
　　]
},
{
　　name:"treeControl",
　　module:true,
　　files:[
　　　　"Scripts/angular-tree-control-master/css/tree-control.css",
　　　　"Scripts/angular-tree-control-master/css/tree-control-attribute.css",
　　　　"Scripts/angular-tree-control-master/angular-tree-control.js"
　　]
},
{
　　name:"detail",
　　module:true
}
])
.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
$ocLazyLoadProvider.config({
　　debug:false,
　　events:false,
　　modules:Modules_Config
});
};