最近开始学习angular.js，发现angular.js确实很方便，也很强大。在看到 AngularJS Routing and Multiple Views 这一部分的时候，有点乱。现在通过记录一下学习过程中写的例子，让自己好好在理解一下。
第一步：
①创建一个名为“myApp”的模块，并且加载"ngRoute"作为依赖模块
②使用$routeProvider配置路由
③在这个例子中，我使用了两个路径，分别是/home和/about ;使用了一个控制器（不加控制器也行，主要是用于操作数据），为myController
js代码如下：
1 var myApp = angular.module("myApp", ["ngRoute"]); 2 3 myApp.config(function($routeProvider) { 4 $routeProvider 5 .when("/home", { 6 templateUrl: "home.html", 7 controller: "myController" 8 }) 9 .when("/about", { 10 templateUrl: "about.html", 11 controller: "myController" 12 }) 13 .otherwise({ 14 redirectTo: "/home" 15 }); 16 }); 17 18 myApp.controller("myController", function($scope) { 19 $scope.message = "Hello World ！" 20 });
第二步：
编写html的template视图模板
home.html代码如下:
<h1>{{message}}</h1> <h2 >This is home page!</h2 > <a href="#/about">Go to about page</a>
about.html代码如下:
<h2>This is about page!</h2> <a href="#/home">Go to home page</a>
最后一步：
①创建一个index.html文件，在所需要的标签内添加ng-app, 属性设为“myApp”,用来控制angular的适用范围
②添加ngView标签，用于存放模版视图
③导入 angular.min.js 、 angular-route.min.js 、以及自己编写的js文件
index.html代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS-Routing</title> </head> <body> <div ng-app="myApp"> <ng-view></ng-view> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script> <script src="main.js"></script> </body> </html>
注意事项：
①在定义module的时候，记得加上“ngRoute”
②在配置路由的时候，.when() 方法有两个参数。第一个参数是浏览器访问的url路径，不需要加上“#”符号（但是在a标签设置href的时候，要把“#”符号加上）；第二个参数包括有template和controller,templateUrl的路径则是文件所在的实际路径。
参考网站：http://www.journaldev.com/6225/angular-js-routing-and-multiple-views-tutorial-example#/viewStudents