最近开始学习angular.js，发现angular.js确实很方便，也很强大。在看到 AngularJS Routing and Multiple Views 这一部分的时候，有点乱。现在通过记录一下学习过程中写的例子，让自己好好在理解一下。
第一步：
①创建一个名为“myApp”的模块，并且加载"ngRoute"作为依赖模块
②使用$routeProvider配置路由
③在这个例子中，我使用了两个路径，分别是/home和/about ;使用了一个控制器（不加控制器也行，主要是用于操作数据），为myController
js代码如下：
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "myController"
})
.when("/about", {
templateUrl: "about.html",
controller: "myController"
})
.otherwise({
redirectTo: "/home"
});
});
myApp.controller("myController", function($scope) {
$scope.message = "Hello World ！"
});
第二步：
编写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