angular路由

这不仅是一个路由也是一个很好的angular代码的示范和规范：

请看这个git：https://github.com/yanjinyun/angular-ui-router

我们的html页面的代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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代码：

?
1
2
3
4
5
(function(){
  angular.module('app',[
    'ui.router'//此处路由用的是ui－router
  ]);
})()

我们的config.js代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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的代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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方法里边的复制这个操作是必须的。

 

posted @   飘然离去  阅读(227)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示