angular 路由,ui-router,ocLazyLoad的使用

初学angular,有不对的地方请指出来,谢谢

1.angular的路由,模块化,更换html内容来更换页面的展示。

2.路由建立好后,若要同时更换页面的两处(或者多处)不同地方的内容,就要用到ui-router。

3.如果不是小型项目,路由页面所有用到的js、css等全都在首页第一次加载的时候加载进来,体验很差,使用ocLazyLoad来实现按需加载(所加载的js都保存在缓存中,只加载一次,不会重复加载)

下面就来一步一步实现:

一:angular路由(网上教程一大堆,只贴代码)

html

  
 


  
      
    
js

var app = angular.module('myapp',['ngRoute'])  
    .config(['$routeProvider',function($routeProvider) {  
        $routeProvider  
        .when('/indexcont',{templateUrl:'html/indexcont.html'})  
        .when('/p1',{templateUrl:'html/p1.html'})  
        .when('/p2',{templateUrl:'html/p2.html'})  
        .when('/p3',{templateUrl:'html/p3.html'})  
        .otherwise({redirectTo:'/indexcont'});  
    }])


二:同时更换多处内容:ui-router
用ui-router替换ng-route,模块依赖也不同,下面是代码

html

  


  
    
    


这里,要更换的地方是: ui-view = " "  

js

var app = angular.module('myapp',['ui.router']);  
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {  
    $urlRouterProvider.otherwise('/indexcont');  
    $stateProvider  
    .state('indexcont',{  
        url:'/indexcont',  
        views:{  
            "cont1":{templateUrl:'html/indexcont.html'}  
        }  
    })  
    .state('p1',{  
        url:'/p1',  
        views:{  
            "cont1":{templateUrl:'html/p1.html'},  
            'cont2':{templateUrl:'html/p3.html'}  
        }  
    })  
    .state('p2',{  
        url:'/p2',  
        views:{  
            "cont1":{templateUrl:'html/p2.html'}  
        }  
    })  
    .state('p3',{  
        url:'/p3',  
        views:{  
            "cont1":{templateUrl:'html/p3.html'}  
        }  
    })  
}])


写法有多处不同,不过这样功能更强大了。


三:按需加载控制器:ocLazyLoad

    与二相比,只是多了一个依赖模块,在views的后面多了resolve

    引入框架多了一个,html代码不变


html


  
  

  
      
    


js

var app = angular.module('myapp',['ui.router','oc.lazyLoad']);  
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {  
    $urlRouterProvider.otherwise('/indexcont');  
    $stateProvider  
    .state('indexcont',{  
        url:'/indexcont',  
        views:{  
            "cont1":{templateUrl:'html/indexcont.html'}  
        }  
    })  
    .state('p1',{  
        url:'/p1',  
        views:{  
            "cont1":{templateUrl:'html/p1.html'},  
            'cont2':{templateUrl:'html/p3.html'}  
        },  
        resolve:{  
            loadMyCtrl:['$ocLazyLoad',function($ocLazyLoad){  
                return $ocLazyLoad.load('style/js/p3.js');  
            }]  
        }  
    })  
    .state('p2',{  
        url:'/p2',  
        views:{  
            "cont1":{templateUrl:'html/p2.html'}  
        },  
        resolve:{  
            loadMyCtrl:['$ocLazyLoad',function($ocLazyLoad){  
                return $ocLazyLoad.load('style/js/p2.js');  
            }]  
        }  
    })  
    .state('p3',{  
        url:'/p3',  
        views:{  
            "cont1":{templateUrl:'html/p3.html'}  
        },  
        resolve:{  
            loadMyCtrl:['$ocLazyLoad',function($ocLazyLoad){  
                return $ocLazyLoad.load('style/js/p3.js');  
            }]  
        }  
    })  
}])



resolve中是控制器地址,仅仅是控制器controller的地址,不是我们写的原生js(或者jquery写的js等)代码脚本,因为resolve里的代码比views中的先加载,不是控制器脚本即使加载进去也不起作用。我们一般的js脚本可以在我们要加载的html代码中引入(这样会重复加载)。

当然,resolve中也可加载css等,可以同时加载多个控制器脚本与css,写成数组,放在括号内即可





你可能感兴趣的:(前端笔记)