生产模拟仿真考试考完终于可以继续写博客了,这里我要把之前的坑填完,这里将会讲述关于angular的路由功能,服务和指令。

此次更新只是预留一个位置,内容将会在2天内放上blog 现在已经放上了

一.微调结构

在这一章我要做一个路由实例,so之前的页面需要作出一点微调,因为angular是使用ng-view来表示显示页面并区分固态页面和动态页面的,所以我们要把需要动态替换的页面提炼出来

	<div class="body" ng-controller="ShopListController">
	……
		<h1>你的购物车    <a href="#closingCost"><button>现在结算!</button></a></h1>
	……
	</div>

就是这一段此段单独列出来命名为first.html,新建一个目录tpl,然后把它放进去就ok了,同时将下面_现在结算_那里的跳转更改为#closingCost 剩下的页面重命名为index.html,当然喽在body中间你得加上angular的标签 <ng-view>

<!doctype html>
<html ng-app="CartApp">
	……
	<script src="./angular-route.min.js"></script>
	……
	<body>
		<ng-view>
			
		</ng-view>
	</body>
  ……
</html>

这样angular就能依靠本身的路由功能了,这里还需要引入一个文件angular-route.min.js仔细寻找一下你从官网下载的angular包,里面应该都会带有这个东西

接下来只要我们小小的改动一下controllers就可以使得我们之前写的内容兼容下面的内容了~

二.增加路由

(1).添加依赖

在增加路由钱你得先确定一下是否引入了angular-route.min.js,如果引入成功那么首先要在angular中添加依赖。

	var CartModule = angular.module('CartApp', []);
	// -->var CartModule = angular.module('CartApp', ['ngRoute']);

将第一行修改为箭头所指的那样(就是在依赖里面注册ngRoute模块)

(2).添加路由

接下来就是添加路由了,路由的语法非常简单,根本不需要我详细解释,就小小的tip一下吧

路由功能使用$routeProvider的when方法在侦测到浏览器url变化后执行操作,默认使用的是#,不过不是很确定是否可以使用/作为符号标示,将来有待验证 when方法有两个参数,第一个是路由的名称,第二个是相关设置json格式{controller:,templateUrl:}第一个controller是执行操作的控制器,第二个templateUrl指的是需要替换的URL,这里也可以换成直接用HTML内容具体的详细情况需要查询官方的API手册 另外一个是otherwise方法,他只有一个参数就是{redirectTo:}指的是默认跳转的位置。

CartModule.config(function($routeProvider){
	$routeProvider.
		when("/",{
			controller:'ShopListController',
			templateUrl:'./tpl/first.html'
		}).
		when("/shopList",{
			controller:'ShopListController',
			templateUrl:'./tpl/first.html'
		}).
		when("/closingCost",{
			controller:'ClosingCostController',
			templateUrl:'./tpl/closingCost.html'
		}).otherwise({redirectTo:'/'});
		
});

这里是路由功能的全部功能了,你可以将其放在controllers.js的任意空白位置,但是不要放在 var CartModule = angular.module('CartApp', ['ngRoute']); 之前

然后创建 /tpl/closingCost.html

内容简单一点就是

<p>this is closingCost page</p>

现在你可以跳转了,是不是没有问题?前进和后退也可以使用

tips:值得注意的是,如果你没指定跳转的位置(#xxx),那么后退将不可使用

三.增加服务

(1).改造变量

我们不难发现一个问题,那就是之前我们把所有的变量放在了全局变量里面,哦no这可不好,原因很简单,这是一个典型的全局变量污染,so最好的做法是放到一个单独的方法里面,angular已经为我们做出了榜样,那就是下面一个问题angular服务(鉴于服务的写法很多,so这里使用了我比较喜欢的方法,如果需要的话尽量使用官方API文档查询

CartModule.factory('cartFactory', function() {
	var ShopList=
	{……};
	var cart=
	{……};
	return {
		cart:cart,
		ShopList:ShopList,
	}
}

服务的语法很简单,这是一个简单的工厂模式,和单例模式有点像,不过不完全一样这里就叙述了,使用的时候需要有以下别的注意事项

(2).使用服务

在controller中使用的时候必须注意的是,你的在参数中带上之前声明的service,当然了最良好的方法就是同时加上依赖,这样防止在出现问题时无法找出问题

CartModule.controller('ShopListController',
	function($scope,$filter,cartFactory){
		$scope.items = cartFactory.ShopList;
		$scope.cart = cartFactory.cart;
		……

使用的话简单的赋值就够了,这里绝大多数情况下都是双向绑定的,但如果你使用自定的函数可能无法完成双向绑定,这时你需要使用apply(function(){})来告诉angular这里需要更新,但是请不要滥用这个函数,因为这会引起巨大的性能问题。

<p>this is closingCost page</p>
<div style="background-color:#FF3300">
	<div ng-repeat="item in cart.items" >
		<h2>{{item.name}}</h2>
		<h3>单价:{{item.price}},数量{{item.mount}}</h3>
	</div>
</div>

接下来你可以在结算页面尝试一下是否成功,当然喽,你不能刷新页面,因为我们没有使用cookie储存数据而所谓的跳转只是angular耍了一个漂亮的帽子戏法,只是局部更新了页面,但是你一旦刷新了页面这一切都将不复存在

三.计算结果

这一部份就不拿出来了,因为显然没有什么难度了,只需要简单的,从服务中取出变量,然后简单的做一次运算就可以了,其他的内容也只是简单实用前面的内容作出应对,值得提醒的是,我们要尽可能避免使用angular的时候以页面为核心构建网页,而是应该以数据为核心构建,任何的dom都不应该是angular完成的(当然喽angular是内置的jqlite,但是这不部分并不影响我的结论。)。 至此angular购物车实例已经全部完结了,之前说的指令在这一章没有很好的表现so我直接抽离了这不封内容,打算在下一个实例中放出,下一个实例将会把angular和electon结合打造一个桌面播放器iceplayer

敬请期待下一章~ 联动-electron和angular构建html5桌面播放器!

本文标题:[angular.js]第四章 一个简单的购物车范例(3)

永久链接:https://iceprosurface.com/2016/04/16/2016/2016-04-16-angular-4th/

作者授权:本文由 icepro 原创编译并授权刊载发布。

版权声明:本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

查看源码: