angular-day13-$route

发表于 | 分类于 ，

basic usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = angular.module('myapp', ['ngRoute']);
   
 app.config(['$routeProvider', function($routeProvider){
     $routeProvider.when('/first-msg',{
         templateUrl: 'temp1.html',
         controller: 'ctrl'
     })
     .when('/second-msg',{
         templateUrl: 'temp2.html',
         controller: 'ctrl',
         caseInsensitiveMatch: true
     })
     .when('/',{
         redirectTo: function(){
             return '/first-msg'
         }
     })
     .otherwise({
         template: 'your lost!'
     })
 }]);

routeParams

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
var app = angular.module('myapp', ['ngRoute']);
   
 app.config(['$routeProvider', function($routeProvider){
       $routeProvider.when('/sum/:a/:b?',{
           templateUrl: 'temp1.html',
           controller: 'ctrl'
       }) 
       .when('/dosum/:a?/:b?',{ //optional parameter
           templateUrl: 'temp3.html',
           controller: 'ctrl2'
       }) 
       .otherwise({
           template: 'your lost!'
       })
   }]);
app.controller('ctrl', ['$scope','$routeParams', function($scope,$routeParams) {
	$scope.a= $routeParams.a -0 + $routeParams.b *1
}])
.controller('ctrl2', ['$scope','$routeParams','$interpolate','$location', function($scope,$routeParams,$interpolate,$location) {
	$scope.a =0;
	$scope.b =0;
       $scope.dosum =function(){
           var url = $interpolate('/dosum/{{a}}/{{b}}')($scope);
           $location.path(url);
       }
}])

temp3.html

1
2
3
4
do sum
a: <input type="text" ng-model='a'> <br>
b: <input type="text" ng-model='b'> <br>
<button ng-click="dosum()">dosum</button>

$route

  • $route.reload();
  • $route.updateParams({a:$scope.a, b:$scope.b});

routeEvent

1
2
3
4
5
6
7
8
9
app.run(['$rootScope', function($rootScope){
    $routeScope.on('$routeChangeStart',function(e,cur,pre){
        console.log('routeChangeStart');
    });
    $routeScope.on('$routeChangeSuccess',function(e,cur,pre){
        console.log('routeChangeSuccess');
    });
    
}]);

$locationChangeStart, $locationChangeSuccess

Resolve

No resolving Resolving
jump to the route first get data first
get data later then jump to route and pass data

demo

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
.when('/calc/add/:a/:b', {
    templateUrl : 'calcResult.htm',
    controller: 'calcAddController',
    resolve:{
        webServiceResult: function(dataService, $route){
            var a = $route.params.a;
            var b = $route.params.b;
            return dataService.add(a,b);
        }
    }
})
## ui-router
### basic usage
```html
<div class="row" style="height:500px">
    <div class="col-sm-3 well" style="height:100%">
        <ul>
            <li><a href="#/first-msg">first-msg</a></li>
            <li><a href="#/second-msg">second-msg</a></li>
            <li><a ui-sref='root()'>root</a></li>
            <li><a href="#/third-msg">third-msg</a></li>
        </ul>    
    </div>
    <div ui-view class="col-sm-9 well" style="height:100%">
        
    </div>
</div>
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
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,$urlRouterProvider){
        $stateProvider
        .state('firstMessage',{
            url: '/first-msg',
            // templateUrl: 'msg1.html',
            template: 'message 1\'s template b {{b}}',
            controller: 'msg1'
        }) 
        .state('secondMessage',{
            url: '/second-msg',
            templateUrl: 'msg2.html',
            controller: 'msg2'
        }) 
        .state('root',{
            url: '/',
            template : 'root template!',
        }) 
        // .state('defaul',{
        //     url: '*path',
        //     template: 'no route found!!',
        //     controller: 'msg2'
        // }) 
        $urlRouterProvider.otherwise('/')
    }]);
    app.controller('msg1', ['$scope', function($scope) {
		$scope.a=1;        
		$scope.b=2;
    }]);
	app.controller('msg2', ['$scope', function($scope) {
		$scope.c=2;
		$scope.d=3;
    }]);

route parameter

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .well{
            margin: 0;height: 100%;
        } 
        *{
            box-sizing: border-box;
        }
    </style>
	<script src="angular.js"></script>
	<script src="angular-ui-router.min.js"></script>
</head>
<body ng-app='myapp'>
    <div class="row" style="height:100px">
        <div class="col-sm-12 well">
            head
        </div>
    </div>
    <div class="row" style="height:500px">
        <div class="col-sm-3 well" style="height:100%">
            <ul>
                <li><a href="#/first-msg/3/6">first-msg #/first-msg/3/6</a></li>
                <li><a href="#/second-msg/35/">second-msg</a></li>
                <li><a ui-sref='firstMessage({a:null,b:5})'>first-msg</a></li>
                <li><a ui-sref-opt='{inherit:false}' ui-sref='firstMessage({a:20,b:null})'>first-msg</a></li>
                <li><a ui-sref='secondMessage({a:22,b:33})'>second-msg</a></li>
                <li><a ui-sref='root()'>root</a></li>
                <li><a href="#/third-msg?a=5">third-msg</a></li>
                <li><a ui-sref='thirdMessage({a:5,b:56})'>third-msg 2</a></li>
                <li><a ui-sref='thirdMessage({a:5,b:[34,53,63]})'>third-msg 3</a></li>
                
            </ul>    
        </div>
        <div ui-view class="col-sm-9 well" style="height:100%">
            
        </div>
    </div>
</body>
<script type="text/javascript">
	var app = angular.module('myapp', ['ui.router']);
    
    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,$urlRouterProvider){
        $stateProvider
        .state('firstMessage',{
            url: '/first-msg/:a/:b',
            // url: '/first-msg/{a:[0-9]+}/{b}',
            template: 'message 1\'s template<br/> a: {{a}} b: {{b}}',
            controller: 'msg1'
        }) 
        .state('secondMessage',{
            url: '/second-msg/:a/:b',
            template: 'secondMessage 2\'s template<br/> a: {{a}} b: {{b}}',            
            controller: 'msg1',
            params:{ //default params value
                a:{value:"1",squash:'-'},
                b:{value: "2",squash:true}
            }
        }) 
        .state('thirdMessage',{
            url: '/third-msg?a&b',
            template: 'thirdMessage 3\'s template<br/> a: {{a}} b: {{b}}',            
            controller: 'msg1',
            params:{ //default params value
                a:{value:"1",squash:'-'},
                b:{value: "2",squash:true}
            }
        }) 
        .state('root',{
            url: '/',
            template : 'root template!',
        })  
        $urlRouterProvider.otherwise('/')
    }]);
    app.controller('msg1', ['$scope','$stateParams', function($scope,$stateParams) {
		$scope.a=$stateParams.a;        
		$scope.b=$stateParams.b;
    }]);
	app.controller('msg2', ['$scope', function($scope) {
		$scope.c=2;
		$scope.d=3;
		$scope.update = function () {
			$scope.a[1].id =$scope.a[1].id  +2;
			$scope.a.push({'id':3})
		}
		$scope.$watchCollection("a",function (a,old) {
			console.log(JSON.stringify(a) + ' <= ' + JSON.stringify(old));
		});
	}]);
</script>
</html>