Angularjs入门学习（七）路由

路由(route)，几乎所有的MVC(VM)框架都应该具有的特性，因为它是前端构建单页面应用(SPA)必不可少的组成部分。

路由只是从一个页面重定向到另一个页面。在任何web应用中路由都很重要。AngularJs是一个单页面应用程序，一旦应用程序加载，它永远不会重新加载。在这种情况下我们如何实现路由？我们可以使用指令模板从一个模板导航到另一个模板，但是最好不要这样做，而是将视图限制在布局和模板视图中，并以URL显示模板视图。

看一个实例:

<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});
</script>
</body>

当Red被点击时，<div ng-view></div>中会载入red.htm文件中的内容

整个过程中页面不需要重新加载。

ng-view

ng-view 是ngRoute中包含的一个特殊指令。它相当与一个占位符，表示即将载入页面的位置。

有三种不同的方式可以达到效果：

<div ng-view></div>
<ng-view></ng-view>
<div class="ng-view"></div>

应用程序只能有一个ng-view指令.

$routeProvider

$routeProvider是配置在应用程序的config部分配置路由的提供程序服务，使用$routeProvider您可以定义当用户点击一个链接，显示的页面。

定义$routeProvider的例子

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/london", {
        templateUrl : "london.htm"
    })
    .when("/paris", {
        templateUrl : "paris.htm"
    });
});

controller

随着$routeProvider的使用，你可以定义每个视图的控制器

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/london", {
        templateUrl : "london.htm",
        controller : "londonCtrl"   //添加控制器
    })
    .when("/paris", {
        templateUrl : "paris.htm",
        controller : "parisCtrl"    //添加控制器
    });
});
app.controller("londonCtrl", function ($scope) {
    $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
    $scope.msg = "I love Paris";
});

然后你可以在london.htm或者paris.htm中使用{{ msg }}

london.htm

<p>{{ msg }}</p>    // I love London

template

在前面的例子中，我们在$routeProvider.when中使用了templateUrl，这个参数用来插入HTML文件

$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

otherwise

在$routeProvider中还有个otherwise方法

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
   $routeProvider
    .when("/banana", {
        template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
    })
    .when("/tomato", {
        template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
    })
    .otherwise({
        template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
    });
});

上面的例子中，倘若既不是banana又不是tomato的链接被点击时，就会插入