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

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

上一篇:java.lang.String


下一篇:C++中文件按行读取和逐词读取 backup