AngularJS基础教程

路由

前言

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

$location

$location 服务类似于 window.location，可用来操作浏览器的地址栏。

修改上一章节中最后一个示例的代码，加入一点新功能：为每个商品设定一个单价；可让用户选择商品数量；当商品总价大于300（含300）时运费为0，否则运费为10；加入一个 button，点击后，当商品总价大于500（含500）时跳转到首页，否则跳转到商品列表页。

将模板文件 detail.html 修改为：

<div>
商品详情
<div>ID：{{id}}</div>
<div>标题：{{tit}}</div>
<div>单价：{{price}}</div>
<div>
数量：<select ng-options="item for item in [1,2,3,4,5]" ng-model="selectedNum"></select>
</div>
<div>总价：{{sum()}}</div>
<div>运费：{{ship}}</div>
<div>
<button ng-click="btnClick()">点击跳转</button>
</div>
</div>

将主文件（index.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: '商品一',
price: 100 // 瓣增了一个表示商品单价的字段
}, {
id: 2,
tit: '商品二',
price: 150
}];
});
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', {
templateUrl: 'detail.html',
controller: 'ctrlDetail'
}).otherwise({
redirectTo: '/index'
});
});
app.controller('ctrlIndex', function ($scope) {
$scope.data = 'Hello';
$scope.author = 'CYF';
});
app.controller('ctrlLst', function ($scope) {
});
app.controller('ctrlDetail', function ($rootScope, $routeParams, $scope, $location) {
var id = $routeParams.id; var detail = $rootScope.goods.find(function (item) {
return item.id == id;
});
$scope.id = id;
$scope.tit = detail.tit;
$scope.price = detail.price;
$scope.selectedNum = 1; // 选中的数量
// 计算总价的方法
$scope.sum = function () {
return $scope.price * $scope.selectedNum;
};
// 监听计算总价的方法的返回值
$scope.$watch($scope.sum, function (newVal) {
$scope.ship = newVal >= 300 ? 0 : 10; // 计算运费
});
$scope.btnClick = function () {
var all = $scope.sum();
if (all >= 500) {
$location.path('/index'); // 跳转到指定页
} else {
$location.path('/lst').replace();// 使用 replace() 可使在跳转网页时不会保存到历史记录
}
};
});
</script>
</body>
</html>

$window

在 AngularJS 中，提供了一个服务 $window 来替代 window。

一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$location</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<button ng-click="btnClick()">Click Me</button>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $window) {
$scope.btnClick = function () {
$window.alert('Hello AngularJS'); // 与 window.alert() 相同
};
});
</script>
</body> </html>

在 AngularJS 中如果希望创建全局的（window下的，非 $rootScope）变量，建议在 $window 下创建：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$window</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="ctrl0">
{{name}}
</div>
<div ng-controller="ctrl1">
{{name}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('ctrl0', function ($scope, $window) {
// 创建了一个全局的 name。
// 应尽量避免创建这样的全局变量。
$window.name = 'Hello AngularJS';
$scope.name = $window.name;
});
app.controller('ctrl1', function ($scope, $window) {
$scope.name = $window.name;
});
</script>
</body>
</html>

最后，来个广告

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

结束语

AngularJS基础教程 - 目录

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