初学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'});
}])
html
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
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中也可加载css等,可以同时加载多个控制器脚本与css,写成数组,放在括号内即可