angular 路由,ui-router,ocLazyLoad的使用
2017-02-17 11:27
519 查看
初学angular,有不对的地方请指出来,谢谢
1.angular的路由,模块化,更换html内容来更换页面的展示。
2.路由建立好后,若要同时更换页面的两处(或者多处)不同地方的内容,就要用到ui-router。
3.如果不是小型项目,路由页面所有用到的js、css等全都在首页第一次加载的时候加载进来,体验很差,使用ocLazyLoad来实现按需加载(所加载的js都保存在缓存中,只加载一次,不会重复加载)
下面就来一步一步实现:
一:angular路由(网上教程一大堆,只贴代码)
html
二:同时更换多处内容:ui-router
用ui-router替换ng-route,模块依赖也不同,下面是代码
html
这里,要更换的地方是:ui-view=" "
js
写法有多处不同,不过这样功能更强大了。
三:按需加载控制器:ocLazyLoad
与二相比,只是多了一个依赖模块,在views的后面多了resolve
引入框架多了一个,html代码不变
html
js
resolve中是控制器地址,仅仅是控制器controller的地址,不是我们写的原生js(或者jquery写的js等)代码脚本,因为resolve里的代码比views中的先加载,不是控制器脚本即使加载进去也不起作用。我们一般的js脚本可以在我们要加载的html代码中引入(这样会重复加载)。
当然,resolve中也可加载css等,可以同时加载多个控制器脚本与css,写成数组,放在括号内即可
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>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
<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=" "
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
<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>
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,写成数组,放在括号内即可
相关文章推荐
- 【翻译】oc.lazyLoad with Angular ui router(按需加载文件)
- angular 使用 ui-router 设计网页
- angular 使用 ui-router 设计网页
- UI-Router:为什么开发者都不喜欢Angular.js内置的路由
- angular使用requirejs/ui-router/angularAMD实现动态加载模块
- [转]AngularJS ui-router (嵌套路由)
- Angular-ui-router路由,View管理
- AngularJS ui-router (嵌套路由)
- #学习笔记#(56)angular ui-router使用姿势
- AngularJS ui-router (嵌套路由)
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
- AngularJs+ui.route+lazyload按需加载
- AngularJs ui-router 路由的介绍
- Angular-Ui-Router+ocLazyLoad动态加载脚本
- Angular-ui-router + oclazyload + requirejs实现资源随route懒加载
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
- angular 使用 ui-router(1)
- angular-ui-router页面路由
- AngularJS ui-router (嵌套路由)
- 深入理解ANGULARUI路由_UI-ROUTER