angular路由
这不仅是一个路由也是一个很好的angular代码的示范和规范：
请看这个git：https://github.com/yanjinyun/angular-ui-router
我们的html页面的代码：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title page-title>angularjs</title>
</head>
<body>
<div ui-view></div>
</body>
<!-- <script type="text/javascript" src="js/angular.min.js"></script> -->
<script type="text/javascript" src="js/angular.js"></script>
<!-- <script type="text/javascript" src="js/angular-ui-router.js"></script> -->
<script type="text/javascript" src="js/angular-ui-router.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<script type="text/javascript" src="js/directive.js"></script>
</html>
我们的app.js代码：
(function(){
angular.module('app',[
'ui.router'//此处路由用的是ui－router
]);
})()
我们的config.js代码：
function config($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home/index')
$stateProvider
.state('home',{
url : '/home',
templateUrl : 'views/content.html'
})
.state('home.index',{
url : '/index',
templateUrl : 'views/index.html',
data : {
'title':'index',
'data' : [1,2,3,4,5]
},
controller:'index'
})
.state('home.list',{
url : '/list?id&name',
templateUrl : 'views/list.html',
data : [1,2,3,4,5,6],
controller:'list'
})
.state('home.product',{
url : '/product',
templateUrl : 'views/product.html',
controller:'product'
})
.state('home.about',{
url : '/about',
templateUrl : 'views/about.html',
controller:'about'
})
.state('user',{
url : '/user',
templateUrl : 'views/content2.html'
})
.state('user.info',{
url : '/info',
templateUrl : 'views/info.html'
})
}
angular.module('app')
.config(config)
.run(function($rootScope,$state){
$rootScope.$state = $state;
})
我们的controlle代码：
function index($scope,$rootScope){
console.log('index控制器')
$rootScope.indexArr = ['fsaf','fsaf','kkkk']
console.log($rootScope)
}
function list($scope,$rootScope,$location){
console.log('list控制器')
$scope.arr = [1,2,3,4,5,6]
console.log($location.search().name)
}
function product($scope,$location){
console.log('product控制器')
$scope.getInfo = function(){
console.log($location)
$location.path('user/info')
}
}
function about($scope){
console.log('about控制器')
}
function dom($scope){
}
angular.module('app')
.controller('index',index)
.controller('list',list)
.controller('product',product)
.controller('about',about)
.controller('dom',dom)
我们的directive.js的代码：
function pageTitle($rootScope){
return {
link : function(scope,element){
var func = function(event,toState){
var title = '1406e';
if(toState.data && toState.data.title) title += '___'+toState.data.title;
element.text(title)
}
$rootScope.$on('$stateChangeStart',func)
}
}
}
function createDom($rootScope){
return {
restrict : 'A',
link : function(scope,element){
var str = '';
for(var i = 0 ;i<scope.arr.length;i++){
str += '<p>id:'+scope.arr[i]+'</p>'
}
element.append(str)
}
}
}
angular.module('app')
.directive('pageTitle',pageTitle)
.directive('createDom',createDom)
需要强调的代码：
$urlRouterProvider.otherwise('/home/index')
这个可以理解为刚进去的时候，或者匹配不到的时候。
.run(function($rootScope,$state){
$rootScope.$state = $state;
})
在run方法里边的复制这个操作是必须的。
