关于Angular.js Routing 的学习笔记(实现单页应用)

最近开始学习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