AngularJS基础教程

路由

前言

路由，即按规则进行分发处理。
具体到 Web 前端，是指根据不同的 URL（实际上是location的hash） 指派不同的处理程序。
在 AngularJS 中，提供了一个名为 ngRoute 的模块来操作路由。

如何获得ngRoute

点击这里到 AnuglarJS 的官网查看官方提供的获得 ngRoute 的方法。

以下是使用 npm 获得 ngRoute 的方法：

npm install angular-route

也可以指定版本号：

npm install angular-route@X.Y.Z

X.Y.Z 是版本号，用你想要的版本号替换它即可。

第一个例子

首先当然是要将获得的 ngRoute 的 js 文件引入到页面中，它必须在 AngularJS 的 js 文件之后引入。

最终我们的 HTML 文件应该是这样的：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ngRoute</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<a href="#/index">首页</a>
<a href="#/lst">商品列表</a>
</div>
</body>
</html>

在网页中放了两个 a 标签。注意 a 标签的 href 属性，是以“#”开头的，表示它不会真正跳转到另一个页面，只是在当前网页内导航。但我们的网页中并没有接收该导航的锚点，因此点击它之后网页不会有任何响应。

在网页中查看，点击任何一个任何一个我们放在网页上的超链接：

虽然网页本身没有任何变化，但可以看到浏览器地址栏中的地址发生了变化，“#”后面的（包括“#”在内）就是当前网址的 hash，可通过 location.hash 获得它。

ngRoute 会监视 hash 的改变。

现在，我们希望当 hash 改变之后做点事情。将代码修改成这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ngRoute</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<a href="#/index">首页</a>
<a href="#/lst">商品列表</a>
<!-- 标识为 ng-view 的元素将被用来存放模板内容 -->
<div ng-view></div>
</div>
<script type="text/javascript">
// 注意第二个参数，在数组里有一个 'ngRoute'，表示我们需要在 app 模块里使用 ngRoute 模块
var app = angular.module('myApp', ['ngRoute']);
// config() 方法用来对模块进行配置
// $routeProvider 是 ngRoute 内定义的对象，需要用它来对路由进行配置
app.config(function ($routeProvider) {
// 配置路由
// when() 方法的意思是：当路由导航到第一个参数的地址时，就启用第二个参数的配置。
// 在这个示例里第二个参数只配置了模板的内容（template），即使用模板替换掉 ng-view 的内容
$routeProvider.when('/index', {
template: '<div>这是index模板</div>'
}).when('/lst', {
template: '<div>这是lst模板</div>'
}).otherwise({ // 当以上路由配置都不匹配时，就会使用 otherwise 里的配置
redirectTo: '/index' // 跳转到 #/index
});
});
</script>
</body>
</html>

在浏览器中查看：

点击网页上的链接，我们会发现 ng-view 所在标签的内容在随之改变。

使用数据绑定

可以在模板里使用数据绑定。要用到数据绑定，一般就需要 Controller。将代码改成这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ngRoute</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<a href="#/index">首页</a>
<a href="#/lst">商品列表</a>
<div ng-view></div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/index', {
template: '<div>这是index模板{{data}}</div><div ng-bind="author"></div>',
controller:'ctrlIndex' // 当路由匹配时启用的控制器
}).when('/lst', {
template: '<div>这是lst模板{{data}}</div>',
controller:'ctrlLst'
}).otherwise({
redirectTo: '/index'
});
});
app.controller('ctrlIndex', function ($scope) {
$scope.data = 'Hello';
$scope.author = 'CYF';
});
app.controller('ctrlLst', function ($scope) {
$scope.data = 'AngularJS';
});
</script>
</body>
</html>

在浏览器中查看，可以发现数据能成功绑定：

传递参数

现在，我需要给商品列表添加几个商品，点击某个商品后，展示该商品的详情：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ngRoute</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<a href="#/index">首页</a>
<a href="#/lst">商品列表</a>
<div ng-view></div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.run(function ($rootScope) {
// 定义了一个全局的商品数据
$rootScope.goods = [{
id: 1,
tit: '商品一'
}, {
id: 2,
tit: '商品二'
}];
});
app.config(function ($routeProvider) {
$routeProvider.when('/index', {
template: '<div>这是index模板{{data}}</div><div ng-bind="author"></div>',
controller:'ctrlIndex'
}).when('/lst', {
template: '<ul><li ng-repeat="item in goods"><a href="#/detail/{{item.id}}">{{item.tit}}</a></li></ul>',
controller:'ctrlLst'
}).when('/detail/:id', { // 注意这里的 “:id”，标识了一个名为 “id” 的参数
template: '<div>商品详情<div>ID：{{id}}</div><div>标题：{{tit}}</div></div>',
controller: 'ctrlDetail'
}).otherwise({
redirectTo: '/index'
});
});
app.controller('ctrlIndex', function ($scope) {
$scope.data = 'Hello';
$scope.author = 'CYF';
});
app.controller('ctrlLst', function ($scope) {
});
// 需使用 $routeParams 来获取参数
app.controller('ctrlDetail', function ($rootScope, $routeParams, $scope) {
var id = $routeParams.id; // 根据参数的名字获取参数
var detail = $rootScope.goods.find(function (item) {
return item.id == id;
});
$scope.id = id;
$scope.tit = detail.tit;
});
</script>
</body>
</html>

使用模板文件

很多时候（比如模板内容比较多的时候），我们并不希望将模板内容直接写在一个变量中，而是将它写在模板文件里。

创建一个模板文件，命名为“detail.html”:

<div>商品详情<div>
ID：{{id}}</div>
<div>标题：{{tit}}</div></div>

然后，将路由配置中的 '/detail/:id' 修改为：

.when('/detail/:id', {
templateUrl: 'detail.html',
controller: 'ctrlDetail'
})

最后，来个广告

若你觉得此文不错，请分享，若认为尚需改进，请点讚。

结束语

AngularJS基础教程 - 目录

关于我：google.com/+YFCAO
由nooong.com提供空间支援。