AngularJS学习：路由

1.首先是最简单的应用，点击超链接，将相应的模板加载到指定的区域内：

我们要引入angular的js文件angular-route.js。

<div>
    this is the menu<br/>
    <a href="#/red" style="color: red">red</a><br/>
    <a href="#/blue" style="color: blue">blue</a><br/>
    <a href="#/green" style="color: green">green</a><br/>
</div>
<div>
    this is the content
    <div ng-view class="content"></div>
</div>

我们的模板会加载到有ng-view的标签内，现在我们要设置一下url与模板的映射：

angular.module('myApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
                .when('/red', {
                    templateUrl: 'red.html'
                })
                .when('/blue', {
                    templateUrl: 'blue.html'
                })
                .when('/green', {
                    templateUrl: 'green.html'
                })
                .otherwise({
                    redirectTo: '/red'
                });
    });

otherwise设置了，当url不在这些范围内时，自动转到/red。

下面是定义的模板body中的内容：

red.html

<div style="color: red">this is a text</div>
<div>this is the content of red.html</div>

blue.html

<div style="color: blue">this is a form</div>
<input type="text" value="blue" />
<input type="button" value="button" />

green.html

<div style="color: green">this is a table</div>
<table>
    <tr>
        <td>111</td>
        <td>222</td>
    </tr>
    <tr>
        <td>333</td>
        <td>444</td>
    </tr>
</table>

2.然后，我们为每一个模板增添一个controller，这样就可以在模板里添加angular表达式：

angular.module('myApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
                .when('/red', {
                    templateUrl: 'red.html',
                    controller: 'redCtrl'
                })
                .when('/blue', {
                    templateUrl: 'blue.html',
                    controller: 'blueCtrl'
                })
                .when('/green', {
                    templateUrl: 'green.html',
                    controller: 'greenCtrl'
                })
                .otherwise({
                    redirectTo: '/red'
                });
    })
    .controller('redCtrl', function($scope) {
        $scope.value = "red";
    })
    .controller('blueCtrl', function($scope) {
        $scope.value = "blue";
    })
    .controller('greenCtrl', function($scope) {
        $scope.value = "green";
    });

然后在模板中添加表达式：

red.html

<div style="color: red">this is a text</div>
<div>this is the content of {{value}}.html</div>

blue.html

<div style="color: blue">this is a form</div>
<input type="text" ng-model="value" />
<input type="button" value="button" />

green.html

<div style="color: green">this is a table</div>
<table>
    <tr>
        <td>{{value}}</td>
        <td>222</td>
    </tr>
    <tr>
        <td>333</td>
        <td>444</td>
    </tr>
</table>

3.我们还可以在url设置参数，并将参数传入controller：

我们在body上设置ng-controller="mainCtrl"，并且添加一个链接：

<a href="#/{{color}}" style="color: {{color}}">{{color}}</a><br/>

下面是我们的js代码以及新的模板：

angular.module('myApp', ['ngRoute'])
        .controller('mainCtrl', function($scope) {
            $scope.color = "yellow";
        })
        .config(function($routeProvider) {
            $routeProvider
                    .when('/red', {
                        templateUrl: 'red.html',
                        controller: 'redCtrl'
                    })
                    .when('/blue', {
                        templateUrl: 'blue.html',
                        controller: 'blueCtrl'
                    })
                    .when('/green', {
                        templateUrl: 'green.html',
                        controller: 'greenCtrl'
                    })
                    .when('/:color', {
                        templateUrl: 'yellow.html',
                        controller: 'yellowCtrl'
                    })
                    .otherwise({
                        redirectTo: '/red'
                    });
        })
        .controller('redCtrl', function($scope) {
            $scope.value = "red";
        })
        .controller('blueCtrl', function($scope) {
            $scope.value = "blue";
        })
        .controller('greenCtrl', function($scope) {
            $scope.value = "green";
        })
        .controller('yellowCtrl', function($scope, $routeParams) {
            $scope.value = $routeParams.color;
        });

yellow.html

<div style="color: yellow">this is a test param</div>
<div>value = {{value}}</div>

这样，我们就可以在yellow.html中获取到value=yellow