- 准备示例项目
- 使用真实的产品数据
现在，要切换到使用真实的数据，从Deployd服务器获取。
AngularJS通过一个叫做$http的服务，为Ajax请求提供支持。作者将在第三部分详细讲解它是怎么工作的，在第23章讲解$http服务。现在有个简单的认识，修改顶级控制器sportsStoreCtrl：
|
angular.module("sportsStore") .constant("dataUrl", .controller("sportsStoreCtrl", $scope.data = $http.get(dataUrl) .success(function $scope.data.products = data; }) .error(function $scope.data.error = error; }); }); |
大多数JavaScript方法的调用，包含AngularJS组件里的方法，synchronous，意味着在当前任务完成前，不会执行下个声明。在web应用中，这就不能工作，因为我们想让用户在请求在后台执行，用户可以继续和应用交互。
作者使用Ajax请求获取需要的数据。Ajax基于Asynchronous JavaScript and XML，重要的是单词asynchronous。一个Ajax请求是一个标准的HTTP请求以异步的方式发生，换句话说，在后台。AngularJS使用promises请求异步操作，这和你使用像jQeury这样的库很像（作者在第5章介绍，并在第20章解释）。
$http服务定义了不同的方法，来做不同种类的Ajax请求。Get方法，是作者这里使用的，使用HTTP GET方法，请求参数中的URL。作者已经将URL定义为一个叫做dataUrl的常量，并使用第6章中测试过的Deployd服务器的URL。
$http.get方法，从Ajax请求开始，应用继续运行，直到请求已经完毕。当服务器已经相应请求，AngularJS需要一种方法，来提醒用户，这就是promise的由来。该$http.get方法返回一个对象，定义success和error方法。作者传递函数给这些方法，AngularJS promises调用这些函数中的一个，告诉作者，请求是什么结果。
如果HTTP请求的一切都运行很好，AngularJS会调用作者传递给success方法的函数，会自动转换JSON数据为Javascript对象，将他们作为参数传递给函数。如果Ajax HTTP请求过程中有任何问题，AngularJS会调用作者传递给error方法的函数。
提示：JSON基于JavaScript Object Notation，是一种数据交换格式，广泛地应用于web应用。
在success函数中，AngularJS会自动执行JSON数据的转换。作者只需将从服务器获取的数据，指派给控制器scope的data.products变量。Error函数将对象指派给scope的data.error变量，来表述问题。
2.1理解scope
当应用第一次启动，HTML内容被生成和显示给用户，尽管没有产品信息可用。
在一个点以后，内容渲染完毕，数据从服务器回来，指派给scope中的data.products变量。这时，AngularJS更新所有的绑定和计算依赖于产品数据的行为的结果，确保新数据传播到应用的每一处。本质上，AngularJS scope是 live 数据存储，响应和传播改变。你会看到在本书中看到不少这样的例子。
2.2、处理Ajax错误
处理成功的Ajax请求很简单，因为只需将数据指派个scope，让AngularJS更新视图中所有的绑定和指令。作者不得不有些艰苦地处理错误，添加一些新元素到视图，用于出现问题是显示出来。在下面可以看到
|
<!DOCTYPE html> <html ng-app="sportsStore"> <head> <title>SportsStore</title> <script <link <link <script> angular.module("sportsStore", </script> <script <script <script </head> <body ng-controller="sportsStoreCtrl"> <div <a </div> <div Error ({{data.error.status}}). The product data was not loaded. <a </div> <div ng-hide="data.error"> <div <a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">Home</a> <a ng-repeat="item in data.products | orderBy:‘category‘ | unique:‘category‘" ng-click="selectCategory(item)" ng-class="getCategoryClass(item)"> {{item}} </a> </div> <div <div ng-repeat= "item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize"> <h3> <strong>{{item.name}}</strong> <span {{item.price | currency}} </span> </h3> <span </div> <div <a ng-repeat= "page in data.products | filter:categoryFilterFn | pageCount:pageSize" ng-click="selectPage($index + 1)" ng-class="getPageClass($index + 1)"> {{$index + 1}} </a> </div> </div> </div> </body> </html> |
作者给视图添加了一个新的div元素，用于显示错误给用户。使用ng-show指令，当表达式计算结果为true时，显示。
提示：作者将在第10章描述ng-show和ng-directives。
传递给error函数的对象，定义了status和message属性。状态属性设为HTTP error code，message属性返回一个字符串，描述问题。作者将status属性包含在message中显示给用户。
- 创建部分视图
App.html文件的HTML变得复杂了，以后添加新特性会很糟糕。
幸运的是，作者可以分离文件，使用ng-include指令，在运行时来导入这些文件。创建view/productList.html文件：
|
<div class="panel panel-default row" ng-controller="productListCtrl" ng-hide="data.error"> <div <a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">Home</a> <a ng-repeat="item in data.products | orderBy:‘category‘ | unique:‘category‘" ng-click="selectCategory(item)" ng-class="getCategoryClass(item)"> {{item}} </a> </div> <div <div ng-repeat= "item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize"> <h3> <strong>{{item.name}}</strong> <span {{item.price | currency}} </span> </h3> <span </div> <div <a ng-repeat= "page in data.products | filter:categoryFilterFn | pageCount:pageSize" ng-click="selectPage($index + 1)" ng-class="getPageClass($index + 1)"> {{$index + 1}} </a> </div> </div> </div> |
作者将产品和分类列表的定义元素，拷贝到HTML文件。部分视图，是HTML的片段，意味着不需要html,head,body元素。
|
<!DOCTYPE html> <html ng-app="sportsStore"> <head> <title>SportsStore</title> <script <link <link <script> angular.module("sportsStore", </script> <script <script <script </head> <body ng-controller="sportsStoreCtrl"> <div <a </div> <div Error ({{data.error.status}}). The product data was not loaded. <a </div> <ng-include src="‘views/productList.html‘"></ng-include> </body> </html> |
提示：使用部分视图有三个益处。第一个是打破应用，使其更加好管理。第二，创建的HTML片段，可以用于应用中反复重用。第三，使得为用户显示不同功能区域更容易。作者会在Defining URL Routes 这一节再说。
指令的创建器，可以指明它被如何应用：作为元素，作为属性，作为class，甚至作为HTML 评论。作者将在第16章解释。当AngularJS遇到ng-include指令，它做一个Ajax请求，加载src属性指定的文件，在该元素位置，插入内容。展现给用户的内容看起来没有什么不同，但已经简单地装扮了app.html文件，将product列表相关的HTML都分离到一个文件中。
提示：当使用ng-include指令，在单引号中，指定文件的名字。如果没有这么做，那么指令会查找一个scope属性，来获取文件的名字。
- 创建购物车
用户可以看到可用的产品，但没有购物车，作者不能销售任何东西。
要实现购物车特性，许多部分需要变化，包括要创建一个自定义的AngularJS组件。
4.1、定义购物车模块和服务
到此为止，都是通过文件的类型组织文件：过滤器包含在过滤器文件夹，视图包含在视图文件夹等等。但总是有一些功能，是自包含的，但需要混合AngularJS组件。你可以继续用component类型组织文件，但作者找到了更有用的方法，基于他们集体扮演的功能，来组织文件，放在components文件夹下。购物车功能适用于这种组织类型。作者需要不分时图和几个组装件，来得到想要的效果。从创建components/cart文件夹开始，添加一个新的JavaScript文件叫做cart.js：
|
angular.module("cart", []) .factory("cart", var cartData = return addProduct: var addedToExistingItem = for if cartData[i].count++; addedToExistingItem = break; } } if cartData.push({ count: }); } }, removeProduct: for if cartData.splice(i, break; } } }, getProducts: return cartData; } } }); |
作者在叫做cart的新模块上穿件一个自定义服务。AngularJS为服务提供一些功能，（只有一个对象会被创建，并被所有基于该服务的组件共享）。
并不是只有使用一个服务，才能为我们演示AngularJS的重要特性，但以这种方式实现购物车会很好，因为有一个共享的实例，确保任何组件能访问购物车，用户的产品选择有相同的视图。
作者将会在第18章解释，基于你要尝试的实现，这里有不同的方式创建服务。这里使用Module.factory方法，传入服务的名字（本例中是cart），和一个factory函数。当AngularJS需要服务时，该factory函数会被调用，创建服务对象，用以相应。因为一个服务对象用于整个应用，factory函数只被调用一次。
作者的cart服务factory函数，返回一个对象，它有三个方法，操作一个没有通过服务直接曝露的数据数组，这是作者用于演示的，你不必暴露服务的所有工作。该cart对象定义三个方法，介绍如下。作者在购物车中将产品表现为对象，定义了id,name,price属性，来描述产品，和一个count属性，记录用户添加入篮子的数量。
|
Method |
Description |
|
addProduct(id,name,price) |
添加指定产品到购物车，如果产品已经存在，增加该产品的需求数量 |
|
removeProduct(id) |
使用指定id，移除产品 |
|
getProducts() |
返回购物车中的对象数组 |
?
4.2、创建购物车部件
下一步，要创建一个部件，总结购物车的内容，提供给用户，意味着开始结账流程。下面，作者要创建一个自定义directive。Directives，是子包含，可重用的功能的单元，它位于AngularJS开发的核心位置。如果你用AngularJS，你会使用许多内建指令。单位了方便，你会找到你自己创建的自定义命令，来让功能适合你的应用。
使用指令，你能做很多。它甚至支持jQuery的删减版，叫jqLite，来操作DOM元素。简单来讲，命令允许你写任何东西，从简单的helpers，到复杂的特性，并决定结果编织成当前的应用，或在其他应用中完整地重用他们。下面是作者给cart.js文件中，创建widget directive：
|
angular.module("cart", []) .factory("cart", var cartData = return // ...service statements omitted for brevity... } }) .directive("cartSummary", return restrict: templateUrl: controller: var cartData = cart.getProducts(); $scope.total = var total = for total += } return total; } $scope.itemCount = var total = for total += cartData[i].count; } return total; } } }; }); |
通过在AngularJS模块上调用directive方法，创建指令，并传递指令的名字（本例中是cartSummary），和一个factory函数。该函数返回一个directive definition object。该指令定义对象定义了属性，会告诉AngularJS，你的质量做什么，怎样做。当作者定义cartSumary指令时，定义了三个属性，下面简短地介绍他们。
|
Name |
Description |
|
Restrict |
指定指令如何应用。作者使用E的值，意味着该指令只能作为一个元素应用。更公共的值是EA，意味着指令能作为一个元素或一个属性应用。 |
|
TemplateUrl |
? |
| ? | ? |
?
4.2.1、应用购物车部件
4.3、添加产品选择按钮
- 添加URL导航
5.1、定义URL路由
5.1.1、显示路由视图
5.2、使用URL路由来导航
- 开始结账流程
6.1、应用结账总结
7.1SportsStore:Navigation and Checkout,布布扣,bubuko.com