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

最新推荐文章于 2024-05-10 09:50:12 发布

littlebearGreat

最新推荐文章于 2024-05-10 09:50:12 发布

阅读量5.1k

点赞数 2

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebeargreat/article/details/55505944

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

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

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

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

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

下面就来一步一步实现：

一：angular路由（网上教程一大堆，只贴代码）

html

<script src="style/js/angular.min.js"></script>  
<script src="style/js/angular-route.js"></script>

<body ng-app="myapp">  
    <div class="nav">  
        <ul>  
            <li><a href="#/indexcont">首页</a></li>  
            <li><a href="#/p1">文章</a></li>  
            <li><a href="#/p2">弹窗</a></li>  
            <li><a href="#/p3">输入框</a></li>  
        </ul>  
    </div>  
    <div class="cont" ng-view></div>  
</body>

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

<script src="style/js/angular.min.js"></script>  
<script src="style/js/angular-ui-router.min.js"></script>

<body ng-app="myapp">  
  <div class="nav">  
  <ul>  
    <li><a href="#/indexcont">首页</a></li>  
    <li><a href="#/p1">文章</a></li>  
    <li><a href="#/p2">弹窗</a></li>  
    <li><a href="#/p3">输入框</a></li>  
  </ul>  
  </div>  
    <div class="cont" ui-view="cont1"></div>  
    <div class="cont" ui-view='cont2'></div>  
</body>

这里，要更换的地方是： ui-view = " "

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

<script src="style/js/angular.min.js"></script>  
<script src="style/js/angular-ui-router.min.js"></script>  
<script src="style/js/ocLazyLoad.min.js"></script>

<body ng-app="myapp">  
    <div class="nav">  
        <ul>  
            <li><a href="#/indexcont">首页</a></li>  
            <li><a href="#/p1">文章</a></li>  
            <li><a href="#/p2">弹窗</a></li>  
            <li><a href="#/p3">输入框</a></li>  
        </ul>  
    </div>  
    <div class="cont" ui-view="cont1"></div>  
    <div class="cont" ui-view='cont2'></div>  
</body>

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，写成数组，放在括号内即可