首页 > 代码库 > 8.1:SportsStore:Orders and Administration
8.1:SportsStore:Orders and Administration
本章，作者将通过收集和验证购物明细，来完成SportsStore应用，并在Deployd服务器上存储该订单。作者也构建了一个管理应用，允许认证用户查看订单，和管理产品分类。
1、准备实例项目
2、获取产品明细
在给用户显示购物车中的产品汇总后，作者将购物明细用于订单。这需要使用AngularJS的表单特性，你会在大多数web应用中需要。作者已经创建Views/placeOrder.html文件，捕获用户的购物明细。作者将介绍一些与表单相关度的特性，来避免重复大量相似的代码。作者首先添加一组数据属性（用户的名字和街道地址），然后再其他添加的属性。下面是placeOrder.html文件。
<h2>Check out now</h2><p>Please enter your details, and we‘ll ship your goods right away!</p><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input class="form-control" ng-model="data.shipping.name" /></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input class="form-control" ng-model="data.shipping.street" /></div><div class="text-center"><button class="btn btn-primary">Complete order</button></div></div>
第一件事情，是作者没有使用ng-controller指令，来为视图指定一个控制器。这意味着视图会被顶级controller ，sportsStoreCtrl支持，该控制器管理包含ng-view指令的视图。当视图不需要任何额外控制器行为时，不用为部分视图定义控制器。
这里，AngularJS的一个重要特性是，在input元素上，使用ng-model指令。
<input class="form-control" ng-model="data.shipping.name"/>
该ng-model指令，设置了一个双向数据绑定。作者会在第10章深入解释数据绑定，但这里简短介绍。它使用{{}}，是单向绑定，意味着简单地从scope显示一个值。该单向绑定的值可以被过滤，它可以是一个表达式，而不仅仅是一个数据值，单他是一个只读关系。如果scope改变，显示的值也会变。它只能从scope到binding。
双向数据绑定用于表单元素，允许用户输入值，改变scope。更新流在scope和data binding之间。通过一个JavaScript功能，执行更新scope数据属性。这里只要知道，如果用户在input元素中输入了一个值，该值被指派到通过ng-model指令指定的scope属性上，在本例中是，data.shipping.name属性和data.shipping.street属性。
提示：注意作者没有必要更新控制器，让他在scope上定义一个data.shipping对象，或单独的name或street属性。如果该属性不存在，AngularJS scopes会假设你想动态地定义一个属性。作者将在第13章深入讲。
2.1、添加表单校验
如果你写过任何种类的web应用，使用表单元素，你会知道用户会在input字段中输入任何东西。要确保你得到预期的数据，AngularJS支持form validation，允许检查值。
AngularJS表单校验，基于标准HTML属性，应用到表单元素，例如type和required。表达那校验会自动执行，但必须显示校验feedback给用户。
提示：HTML5在input元素上定义了一组新的type属性的值，能被用于该值是一个e-mail地址或一个数字。作者会在第12章解释。
2.1.1、准备校验
设置表单校验的第一步，是添加一个form元素到视图，并添加校验属性到作者的input元素。下面是placeOrder.html文件。
<h2>Check out now</h2><p>Please enter your details, and we‘ll ship your goods right away!</p><form name="shippingForm" novalidate><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input class="form-control" ng-model="data.shipping.name" required /></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input class="form-control" ng-model="data.shipping.street" required /></div><div class="text-center"><button class="btn btn-primary">Complete order</button></div></div></form>
form元素有三个目的，作者没有使用浏览器为提交表单提供的内建支持的。
第一个目的，是启用校验。AngularJS使用自定义的指令，重定义了一些HTML元素，来启用制定特性，例如form。没有form元素，AngularJS不验证元素的内容，如input,select,textarea等。
第二个谜底，form元素禁用浏览器可能会尝试执行的任何校验，它通过novalidate属性。该属性是标准的HTML5特性，它确保只有AngularJS检查数据。如果你忽略了novalidate属性，那么用户可能会得到冲突，或多次校验feedback，基于浏览器的会被使用。
最后的目的，form元素会定义一个变量，用于报告表单校验。它是通过name属性做的，作者将它设为shippingForm。当用户点击button按钮，用户表单的内容被验证时，该值用于显示feedback。
2.1.2、显示验证Feedback
一旦form元素和校验属性放置好，AngularJS开始校验用户提供的数据，作者要为用户显示feedback。作者将在第12章详细讲解，但这里作者会用两种类型的feedback：定义CSS样式给AngularJS通过验证或没有通过验证的表单元素。可以使用scope变量控制feedback消息显示的元素的可见性。placeOrder.html文件：
<style>.ng-invalid { background-color: lightpink; }.ng-valid { background-color: lightgreen; }span.error { color: red; font-weight: bold; }</style><h2>Check out now</h2><p>Please enter your details, and we‘ll ship your goods right away!</p><form name="shippingForm" novalidate><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input name="name" class="form-control"ng-model="data.shipping.name" required /><span class="error" ng-show="shippingForm.name.$error.required">Please enter a name</span></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input name="street" class="form-control"ng-model="data.shipping.street" required /><span class="error" ng-show="shippingForm.street.$error.required">Please enter a street address</span></div><div class="text-center"><button class="btn btn-primary">Complete order</button></div></div></form>
AngularJS会给表单元素制定ng-valid和ng-invalid classes。Form元素总是会持有这些样式中的一个。
该CSS样式表明校验的效果。所以作者必须给每个元素添加一个name属性，使用AngularJS添加到scope的校验数据，控制error消息的可见性。
<input name="street"class="form-control" ng-model="
data.shipping.street" required /><span class="error" ng-show="
shippingForm.street.$error.required">Please enter a street address</span>
input元素，用于捕获用户的街道，将name属性指派为street。AngularJS在scope上创建一个shippingForm.street对象（它是form元素的name和input元素的name的结合）。该对象定义一个$error属性，该属性是一个对象，为每个校验属性提供一个属性，表示input元素失败的原因。如果shippingForm.street.$error.required属性为真，知道street input元素通过没有校验通过，用于显示error消息给用户的空间，会执行ng-show指令。
记住：作者用的简单，但AngularJS可以用于创建更复杂的校验。
2.1.3、将按钮链接到校验
在多数web应用，用户在提供所有表单数据，并校验通过后，才能进入下一步。当表单没有通过校验，作者想禁用Complete order按钮，并在用户完成表单属性后，自动启用它。
要做到这点，作者要改进AngularJS添加到scope的校验信息。作者可以得到整个表单的状态。当input元素为没有通过校验，shippingForm.$invalid属性为true，作者将基于此，使用ng-disabled指令，管理按钮元素的状态。作者将在第11章描述ng-disable指令。
<div class="text-center"><button ng-disabled="shippingForm.$invalid"class="btn btn-primary">Complete order</button></div>
2.2、添加剩下的表单字段
现在你知道AngularJS是怎么进行表单校验的了，作者要将剩下的input元素添加到表单。
<style>.ng-invalid { background-color: lightpink; }.ng-valid { background-color: lightgreen; }span.error { color: red; font-weight: bold; }</style><h2>Check out now</h2><p>Please enter your details, and we‘ll ship your goods right away!</p><form name="shippingForm" novalidate><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input name="name" class="form-control"ng-model="data.shipping.name" required /><span class="error" ng-show="shippingForm.name.$error.required">Please enter a name</span></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input name="street" class="form-control"ng-model="data.shipping.street" required /><span class="error" ng-show="shippingForm.street.$error.required">Please enter a street address</span></div><div class="form-group"><label>City</label><input name="city" class="form-control"ng-model="data.shipping.city" required /><span class="error" ng-show="shippingForm.city.$error.required">Please enter a city</span></div><div class="form-group"><label>State</label><input name="state" class="form-control"ng-model="data.shipping.state" required /><span class="error" ng-show="shippingForm.state.$error.required">Please enter a state</span></div><div class="form-group"><label>Zip</label><input name="zip" class="form-control"ng-model="data.shipping.zip" required /><span class="error" ng-show="shippingForm.zip.$error.required">Please enter a zip code</span></div><div class="form-group"><label>Country</label><input name="country" class="form-control"ng-model="data.shipping.country" required /><span class="error" ng-show="shippingForm.country.$error.required">Please enter a country</span></div><h3>Options</h3><div class="checkbox"><label><input name="giftwrap" type="checkbox"ng-model="data.shipping.giftwrap" />Gift wrap these items</label></div><div class="text-center"><button ng-disabled="shippingForm.$invalid"class="btn btn-primary">Complete order</button></div></div></form>
提示：你可能会尝试使用ng-repeat指令，来生成input元素。这样生成的，不能很好滴工作，因为有些指令属性值，如ng-model,ng-show，是计算过的。作者建议这样做，单你想用更先进的技术，看第15-17章，作者会描述创建自定义指令的方式。
3、存储订单
本节，我们会扩展Deployd服务器提供的数据库，使用Ajax请求发送订单数据给服务器，在流程的最后，播放一个感谢信息。
3.1、扩展Deployd服务器
使用dashboard，选择collection，将集合的名字设为/orders，点击创建按钮。定义如下属性：
Name Type Required
name string Yes
street string Yes
city string Yes
state string Yes
zip string Yes
country string Yes
giftwrap boolean No
products array Yes
多花点注意，在gifwrap和products属性的类型上。
3.2、定义控制器行为
下一步要定义使用Ajax请求，发送订单给Deployd服务器的控制器行为。我可以以很多不同的方式定义该功能——创建一个服务或创建一个新的控制器。你可以以你喜欢的方式，构建，没有绝对的对与错。作者将保持一切都很简单，添加行为到顶级sportsStore控制器上，该控制器已经包含用Ajax请求加载产品数据的代码。
angular.module("sportsStore").constant("dataUrl", "http://localhost:5500/products").constant("orderUrl", "http://localhost:5500/orders").controller("sportsStoreCtrl", function ($scope, $http, $location,dataUrl, orderUrl, cart) {$scope.data = {};$http.get(dataUrl).success(function (data) {$scope.data.products = data;}).error(function (error) {$scope.data.error = error;});$scope.sendOrder = function (shippingDetails) {var order = angular.copy(shippingDetails);order.products = cart.getProducts();$http.post(orderUrl, order).success(function (data) {$scope.data.orderId = data.id;cart.getProducts().length = 0;}).error(function (error) {$scope.data.orderError = error;}).finally(function () {$location.path("/complete");});}});Depolyd会在数据库中创建一个新的对象，来相应POST请求，并返回刚刚创建的对象，包括id属性。
作者定义了一个新的constant，制定URL，你会用于POST请求，并添加一个cart服务的依赖，以得到产品明细。作者添加到控制器的行为叫做sendOrder，它将用户的购物明细，作为参数。
作者使用angular.copy工具方法，他在第5章描述过，用来创建shipping details对象的拷贝，所以他可以安全地操作它，而不影响应用的其他部分。该shipping details对象的属性，通过ng-model指令创建，代表作者的orders Deployd集合。左右要做的，就是定义一个products属性，来引用购物车中的products数组。
作者使用$http.post方法，创建一个Ajax POST请求指定URL和数据，他使用success和error方法，在第5章介绍过，来相应请求的结果。
作者也使用在$http.post方法返回的promise上，使用then方法。该then方法，持有一个功能，无论Ajax请求的结果如何，都会被调用。无论发生什么，他都想要显示相同的视图给用户，所以他使用then方法，调用$location.path方法。这是编程的方式设置URL的path组建，它将会通过第7章创建的URL配置，触发视图改变。
3.3、调用控制器行为
要调用心控制器行为，必须添加ng-click指令到shipping details视图的button元素。
<div class="text-center"><button ng-disabled="shippingForm.$invalid"ng-click="sendOrder(data.shipping)"class="btn btn-primary">Complete order</button></div
3.4、定义视图
作者定义的Ajax请求完成后的URL路径是/complete，该URL路由配置映射到/views/thankYou.html文件：
<div class="alert alert-danger" ng-show="data.orderError">Error ({{data.orderError.status}}). The order could not be placed.<a href="#/placeorder" class="alert-link">Click here to try again</a></div><div class="well" ng-hide="data.orderError"><h2>Thanks!</h2>Thanks for placing your order. We‘ll ship your goods as soon as possible.If you need to contact us, use reference {{data.orderId}}.</div>
该视图定义了两个不同的内容块，来处理Ajax请求的success和unsuccessful。如果发生error，error的明细会显示，通过一个a链接，让用户返回到shipping details视图，让他可以再试一次。如果请求成功，为用户显示thank-you消息，包含新订单对象的id。
4、做改进
以后会做改进的地方：
第一，当你加载app.html文件到浏览器，你可能注意到一个小的延迟，在视图显示和products的元素和分类被生成。这是因为Ajax请求在后台获取数据，在等待服务器返回数据旗舰，AngularJS继续执行应用，并显示视图，当数据抵达后，在更新。在第22章，作者将描述如何使用URL路由特性，让AngularJS在Ajax请求已经完成后，再显示视图。
第二，作者将产品数据中的分类，提取出来，用于导航和分页特性。在一个真实的项目中，作者会考虑，在产品数据第一次抵达时，生成该信息。在第20章，作者描述如何使用promises，来构建行为链。
最后，作者使用$animate服务，在第23章介绍，当URL路径改变时，在视图切换时使用过度动画。
4.1、避免优化陷阱
你注意到，作者说要考虑重用分类和分页数据。这是因为任何类型的优化，都要十分小心，来确保它是明智的，并避免两个主要的陷阱。
第一个陷阱是，过早地优化。
第二个陷阱是，translation优化。
5、管理产品分类
要完成SportsStore应用，作者要创建一个应用，来允许管理员管理产品分类的内容，和订单队列。这回允许作者，演示AngularJS如何用于执行create,read,update,delete操作。
记住：每个后端服务实现认证有不同的方式，但基本的前提是相同的：将用户的凭证，通过请求发送给制定URL，如果请求成功，浏览器会返回一个cookie，浏览器会在随后的请求中，自动发送该cookie，用以标识用户。本例中使用Deployd。
5.1、准备Deployd
给数据库做一些改变，有些事情只能管理员做。在这里，我们会使用Deployd定义一个管理员用户，并穿件访问策略。
| Collection | Admin | User |
| products | create,read,update,delete | read |
| orders | create,read,update,delete | create |
总之，管理员能在任何集合上执行任何操作。一般用户可以read产品集合，并创建orders集合中的新对象。
在dashboard上创建Users Collection ，设置新容器的名字为/users。
用户集合，定义了id,username,password属性，是作者需要的。创建一个新对象，用户名密码为admin,secret。
5.1.1、集合的安全
作者喜欢Deployd的一个特性，是他定义一个简单的JavaScript API，可以用于实现服务端功能。当在一个集合上执行操作时，一系列的事件会被触发。点击products集合的Events，你会看到一系列的tab，代表不同的集合事件：On Get,On Validate,On Post,On Put,On Delete。所有的集合都有这些事件，你可以使用JavaScript，来加强认证策略。填入一下代码到On Put和On Delete tabs：
if (me === undefined || me.username != "admin") { cancel("No authorization", 401);}
在Deployd API中，变量me，代表当前用户，cancel功能，使用制定消息和HTTP状态吗，结束一个请求。该代码，允许有权限的用户，和管理员用户访问，单其他请求都会用401状态吗结束，这代表客户端是没有权限做请求。
提示：不要担心这些事件是什么，作者会在后面说。
重复这些步骤，在orders集合的事件里，处理On Post和On Validate。强制执行认证控制的事件：
Collection Description
products On Put, On Delete
orders On Get, On Put, On Delete
users None
5.2、创建管理应用
作者要为管理任务，创建一个分隔的AngularJS应用。作者可以在主应用中集成这些特性，但这将意味着所有用户都将下载admin功能的代码，即使他们永远用不上。作者添加一个新文件，叫admin.html，放到angularjs文件夹：
<!DOCTYPE html><html ng-app="sportsStoreAdmin"><head><title>Administration</title><script src="angular.js"></script><script src="ngmodules/angular-route.js"></script><link href="bootstrap.css" rel="stylesheet" /><link href="bootstrap-theme.css" rel="stylesheet" /><script>angular.module("sportsStoreAdmin", ["ngRoute"]).config(function ($routeProvider) {$routeProvider.when("/login", {templateUrl: "/views/adminLogin.html"});$routeProvider.when("/main", {templateUrl: "/views/adminMain.html"});$routeProvider.otherwise({redirectTo: "/login"});});</script></head><body><ng-view /></body></html>
作者使用Module.config方法，创建了三个路由，让ng-view指令显示body元素。
URL Path View
/login /views/adminLogin.html
/main /views/adminMain.html
All others Redirects to /login
otherwise方法定义的路由，作者使用redirectTo选项，将URL路径改变到其他路由。这将让浏览器到/login路径，用于认证用户。作者将在第22章描述。
5.2.1、添加占位符视图
作者要实现认证特性，需要为/views/adminMain.html视图文件创建一些占位符内容，当认证成功时会显示。下面是adminMain.html文件的内容：
<div class="well">This is the main view</div>
作者将在后面替换它。
5.3、实现认证
Deployd认证用户，使用标准HTTP请求。该应用发送一个POST请求到/users/login URL，包含username和password值。如果认证成功，服务器响应状态吗200，如果失败，返回401。要实现认证，作者要定义一个控制器，发起Ajax调用，并处理响应。下面是controllers/adminControllers.js文件的内容：
angular.module("sportsStoreAdmin").constant("authUrl", "http://localhost:5500/users/login").controller("authCtrl", function($scope, $http, $location, authUrl) {$scope.authenticate = function (user, pass) {$http.post(authUrl, {username: user,password: pass}, {withCredentials: true}).success(function (data) {$location.path("/main");}).error(function (error) {$scope.authenticationError = error;});}});
5.3.1、定义视图认证
5.4、定义主视图和控制器
5.5、实现订单特性
5.6、实现产品特性
5.6.1、定义RESTful控制器
5.6.2、定义视图
5.6.3、添加对HTML文件的引用