使用AngularJS构建的购物车应用程序

分享于 

38分钟阅读

Web开发

  繁體

介绍

如果你想在网上购物,你可能需要购物车。

购物车基本上是一个列表,其中包含用户在商店中选择的产品。 当用户购物时,他通常检查清单,以检查项目。数量和价格是否正确。 如果他发现任何错误,他应该能够编辑列表。 一旦他准备好了,他就可以检查了。 结帐过程包括交换销售结果的信息。

听起来很简单是吧而且实际上。 唯一的挑战是执行结帐,因为这涉及到个人信息和金钱。 幸好,有一些服务可以处理这种类型的事务,你可以利用它们。 其中最受欢迎的是 PayPal 和谷歌钱包。

本文介绍了使用JavaScript实现购物车的方法。 购物车使用PayPal和谷歌钱包支付服务。 添加其他提供程序相当简单。 例如如果你有自己的支付基础设施,你可以扩展购物车来使用和的谷歌钱包。 提供更多付款选项应增加销售。

本文包含一个名为"Angular 存储"的示例应用程序,它演示了如何使用应用程序以收费的方式使用购物车。

购物车要求

我开始开发购物车时,需要考虑以下方面:

  • 必须是 100%纯 JavaScript ( 所以很容易集成到任何站点)
  • 必须遵循MVVM架构( 所以很容易定制它的外观和感觉)
  • 必须安全( 我们不希望负责存储人员卡号 等等的信用)
  • 必须快速可靠( 我们不希望用户在结账前放弃) !
  • 必须灵活( 应该允许使用不同的服务来处理付款)
  • 必须是可扩展的( 添加新的付款方式应该很容易)
  • 必须易于使用( 因为没有理由让它变得复杂)

我认为"shoppingcart"类描述了 below的所有这些需求。 它使用 ,并与的AngularJS 应用程序集成良好。 "shoppingcart"类包含所有逻辑,并提供创建灵活和有吸引力视图所需的对象模型。

Angular 存储示例应用程序

要了解车辆的工作原理,让我们快速看一下典型的应用程序。 Angular 商店应用程序有三个主要视图:

商店: 这是主要的视图。 它列出了可用产品的列表。 用户可以使用过滤器搜索项目,通过点击他们的名字获得详细信息。 单击摘要导航到购物车。 这就是存储视图的外观:

产品详细信息:这个视图显示产品的详细信息,允许用户将产品添加或者删除到购物车。 视图还提供了购物车的快速摘要,以便用户能够判断该产品是否已经在购物车中。 这就是产品详细信息视图的外观:

购物车: 这个视图显示购物车。 用户可以使用或者的谷歌钱包来编辑购物车和结账。 由于一些用户可能拥有一个服务或者另一个服务,所以提供更多的支付选项会增加销售额。 这就是购物车视图的样子:

AngularJS基础结构

示例应用程序以一个表示应用程序的的定义开始。 MODULE AngularStore MODULE 在收费的app.js 文件中定义,如下所示:


// App Module: the name AngularStore matches the ng-app attribute


// in the main <html> tag. The route provides parses the URL and


// injects the appropriate partial page


var storeApp = angular.module('AngularStore', []).


 config(['$routeProvider', function($routeProvider) {


 $routeProvider.


 when('/store', { 


 templateUrl: 'partials/store.htm',


 controller: storeController }).


 when('/products/:productSku', {


 templateUrl: 'partials/product.htm',


 controller: storeController }).


 when('/cart', { 


 templateUrl: 'partials/shoppingCart.htm',


 controller: storeController }).


 otherwise({


 redirectTo: '/store' });


}]);



第一个代码块定义了表示应用程序的storeApp对象。 它包含一个 routeProvider,指定应该根据URL显示哪个视图。

例如当URL以"/cart"结尾时,应用程序应该显示"。部分/shoppingcart。htm"文件中定义的视图。 视图应绑定到"StoreController"类型的控制器。

当URL以"/product/:productSku", 结尾时,应用程序应显示"部分/产品。htm"文件中定义的视图。 视图应该绑定到同一类型"StoreController"的控制器。 这种情况下,"/: productSku"表示一个变量参数,用于标识显示的产品。 它将在运行时用实际的产品代码替换。

在这种情况下,所有视图都有相同类型的控制器,一个包含"商店"和"购物车"的类。

因为在这种情况下所有视图都引用同一个存储和车车,所以在应用级别上创建这些数据对象。 这将提高性能,因为在显示新视图时,无需重新加载存储和车票项。

通过定义应用级别"服务"来在控制器之间共享数据的最简单方法是定义一个应用级,稍后使用这里服务初始化需要它们的控制器。 这个链接展示了一个简单的例子,说明了这个概念: http://egghead.io/video/angularjs-sharing-data-between-controllers/

下面是"dataservice"的定义,它提供 Angular 存储应用程序中的所有视图共享的数据:


// create a data service that provides a store and a shopping


// cart that will be shared by all views


// (instead of creating fresh ones for each view).


storeApp.factory("DataService", function() {


 var myStore = new store();


 var myCart = new shoppingCart("AngularStore");


 myCart.addCheckoutParameters("PayPal", "your PayPal merchant account id");


 myCart.addCheckoutParameters("Google", "your Google merchant account id", {


 ship_method_name_1: "UPS Next Day Air",


 ship_method_price_1: "20.00",


 ship_method_currency_1: "USD",


 ship_method_name_2: "UPS Ground",


 ship_method_price_2: "15.00",


 ship_method_currency_2: "USD"


 });


 return {


 store: myStore,


 cart: myCart


 };


});



服务创建"商店"对象,其中包含可用产品列表和代表购物车的"shoppingcart"对象。

创建"shoppingcart"对象时,它自动从本地存储中加载内容,使用户可以将项目添加到车中。

创建购物车后,服务将配置cart参数的签出。 在本示例中,购物车提供两个签出选项:

创建数据服务后,"StoreController"对象可以使用它来驱动应用程序中的所有视图。 这是以为代价的controller.js


function storeController($scope, $routeParams, DataService) {



 // get store and cart from service


 $scope.store = DataService.store;


 $scope.cart = DataService.cart;



 // use routing to pick the selected product


 if ($routeParams.productSku!= null) {


 $scope.product = $scope.store.getProduct($routeParams.productSku);


 }


}



函数从前面讨论的"dataservice"检索存储和 cart,并将它们添加到 AngularJS 对象。$scope 对象作为视图的数据上下文。

收费的app.js 和的controller.js 文件包含了应用程序代码的所有 其余的类( store.js, product.js,shoppingCart.js ) 是平台无关的。

'商店'和'产品'类

"商店"类在 store.js 文件中定义。

它公开了一个产品列表,提供了一个的getProduct 方法,它通过SKU检索单个产品。 这里方法由"StoreController"用于设置当前产品,当URL路由指定了一个收费的。


// store (contains the products)


function store() {


 this.products = [


 new product("APL", "Apple", "Eat one every...", 12, 90, 0, 2, 0, 1, 2),


 new product("AVC", "Avocado", "Guacamole...", 16, 90, 0, 1, 1, 1, 2),


 new product("BAN", "Banana", "These are...", 4, 120, 0, 2, 1, 2, 2),


 // more products...


 new product("WML", "Watermelon", "Nothing...", 4, 90, 4, 4, 0, 1, 1)


 ];


 this.dvaCaption = ["Negligible", "Low", "Average", "Good", "Great" ];


 this.dvaRange = ["below 5%", "between 5 and 10%",... "上面 40%"];


}


store.prototype.getProduct = function (sku) {


 for (var i = 0; i <this.products.length; i++) {


 if (this.products[i].sku == sku)


 return this.products[i];


 }


 return null;


}



"产品"类在 product.js 文件中定义,如下所示:


// product class


function product(sku, name, description, price,


 cal, carot, vitc, folate, potassium, fiber) {


 this.sku = sku; // product code (SKU = stock keeping unit)


 this.name = name;


 this.description = description;


 this.price = price;


 this.cal = cal;


 this.nutrients = {


 "Carotenoid": carot,


 "Vitamin C": vitc,


 "Folates": folate,


 "Potassium": potassium,


 "Fiber": fiber


 };


}



product类有三个将被购物车使用的属性: sku ( 唯一标识),名称,价格为 所有其他成员在应用程序的其他地方使用,而不是在购物车中使用。

将购物车与原始产品类分离使得将购物车与现有的应用程序( 通常已经从数据库自动生成了产品类) 集成起来更容易。

'shoppingcart'类

"shoppingcart"类是项目中最有趣的类。 它在 shoppingCart.js 文件中定义,并实现一个对象模型,如下所示:

shoppingCart ( cartName )

这是构造函数。

当保存或者从本地存储装载它时,cartName参数会识别购物车。 在实际使用车票检查操作之前,必须通过添加一个或者多个付款提供程序来初始化它。 这是用的addCheckoutParameters 方法完成的。

addCheckoutParameters (,merchantID,[options] )

这里方法定义了一组检查参数。

serviceName参数定义要使用的付款提供程序的名称。 在当前实现中,必须将它的设置为"贝宝"或者"谷歌"。

merchantID 参数指定与服务关联的商家帐户。 你可以使用以下链接创建PayPal和Google商家帐户:
PayPal:: https://www.paypal.com/webapps/mpp/merchant。
:https://developers.google.com/commerce/wallet/digital/training/getting-started/merchant-setup

选项参数定义了额外的提供者特定字段。 在我们的例子中,我们使用这个参数来指定与 Google checkout相关的自定义传送方法。 PayPal和Google都支持大量可选参数,你可以使用它们来定制结帐过程。

addItem ( sku,NAME,价格,数量)

这里方法在购物车中添加或者删除项。

如果购物车已经包含带有给定的项目,那么该项目的数量将被修改。 如果数量达到零,则自动从购物车中删除该项目。

购物车中的项目中包含指定的,则创建新项目,并将它的添加到购物车中,以为单位,以为单位,以为单位。

更新购物车后,它会自动保存到本地存储。

clearItems ( )

这里方法通过删除所有项清除购物车。 它还将空车保存到本地存储。

getTotalCount ( [sku] )

这里方法获取项或者给定类型的数量,或者获取购物车中的所有项。

如果提供了 sku,则该方法将返回具有sku的项目数量。 方法将忽略 sku,然后返回购物车中所有项的数量。

getTotalPrice ( [sku] )

这里方法获取购物车中一个或者全部项目的总价格( 单价 * 数量)。

如果提供了 sku,则该方法将返回具有 sku 项的价格。 方法将省略 sku,然后返回购物车中所有项目的总价格。

签出( [serviceName],[clearCart] )

这里方法通过构建一个表单对象并将它的提交到指定的付款提供程序来启动签出事务。

提供的服务名称必须为 addCheckoutParameters 方法注册的服务名称的1. 如果省略,购物车将使用注册的第一个支付服务。 clearCart参数指定是否应在提交付款后清除购物车。

在此类中, checkout方法是最有趣的,如下所示:


shoppingCart.prototype.checkout = function (serviceName, clearCart) {


 // select service


 if (serviceName == null) {


 var p = this.checkoutParameters[Object.keys(this.checkoutParameters)[0]];


 serviceName = p.serviceName;


 }


 if (serviceName == null) {


 throw "Define at least one checkout service.";


 }


 var parms = this.checkoutParameters[serviceName];


 if (parms == null) {


 throw "Cannot get checkout parameters for '" + serviceName + "'.";


 }



 // invoke service


 switch (parms.serviceName) {


 case "PayPal":


 this.checkoutPayPal(parms, clearCart);


 break;


 case "Google":


 this.checkoutGoogle(parms, clearCart);


 break;


 default:


 throw "Unknown checkout service:" + parms.serviceName;


 }


}



方法首先确保它有有效的支付服务,然后将实际工作延迟到的checkoutPayPal或者的checkoutGoogle methods方法。 这些方法非常相似,但它们是特定的。 checkoutPayPal 方法的实现方式如下:


// check out using PayPal; for details see:


// http://www.paypal.com/cgi-bin/webscr?cmd=p/pdn/howto_checkout-outside


shoppingCart.prototype.checkoutPayPal = function (parms, clearCart) {



 // global data


 var data = {


 cmd: "_cart",


 business: parms.merchantID,


 upload: "1",


 rm: "2",


 charset: "utf-8"


 };



 // item data


 for (var i = 0; i <this.items.length; i++) {


 var item = this.items[i];


 var ctr = i + 1;


 data["item_number_" + ctr] = item.sku;


 data["item_name_" + ctr] = item.name;


 data["quantity_" + ctr] = item.quantity;


 data["amount_" + ctr] = item.price.toFixed(2);


 }



 // build form


 var form = $('<form></form>');


 form.attr("action", "https://www.paypal.com/cgi-bin/webscr");


 form.attr("method", "POST");


 form.attr("style", "display:none;");


 this.addFormFields(form, data);


 this.addFormFields(form, parms.options);


 $("body").append(form);



 // submit form


 this.clearCart = clearCart == null || clearCart;


 form.submit();


 form.remove();


}



这个收费的checkoutPayPal方法构建表单,用包含cart数据的隐藏输入字段填充它,并将表单提交到 PayPal服务器。 这里描述了整个过程: https://www.paypal.com/cgi-bin/webscr?cmd=p/pdn/howto_checkout-outside

的checkoutGoogle 方法非常相似。 它还构建并提交表单,惟一区别是字段的NAME 和内容。 这里可以提供详细信息:https://developers.google.com/checkout/developer/Google_Checkout_Custom_Cart_How_To_HTML

checkout方法允许你添加 custom cart method方法参数参数specified中指定的自定义字段。 这些自定义字段可以用于指定类似于返回url的事件,定制的图像在服务器上。定制的运输规则和价格。

checkout方法提交表单时,用户将进入适当的站点( PayPal或者谷歌钱包),在那里可以查看有关项目的信息,更新自己的个人和信用卡信息,以及处理事务的事务。 所有这些都发生在应用程序的范围之外。 付款提供商将使用与表单提供的商家to相关的信息,以便收集付款并将货物发送给客户。

如果你想向购物车中添加更多付款选项,你必须:

  • 修改 addCheckoutParameters 方法以接受新的服务名称。
  • 为使用新服务处理结帐,创建一个新的收费 <ServiceName> 方法。 这可能与现有的checkoutPayPal和方法相似。
  • 根据用户指定的服务 NAME,修改 checkout 方法以调用新方法。

例如如果希望利用站点上已有的支付基础设施,可以创建类似的方法,但是网站上有一个 URL。 服务器会接收到所有编码为隐藏字段的表单,此时,你可以访问当前会话,用户,等等,你将拥有你的付款基础结构所需要的所有信息。

AngularJS视图

现在我们已经介绍了AngularJS基础结构和控制器类,让我们把注意力转移到视图。

default.htm 文件包含主视图。 它的实现方式如下:


<!doctype html>


<html ng-app="AngularStore">


 <head>


 <!-- includes for jQuery, Angular, and Bootstrap -->


 <!--.. . -->


 <!-- includes for the Angular Store app -->


 <script src="js/product.js" type="text/javascript"></script>


 <script src="js/store.js" type="text/javascript"></script>


 <script src="js/shoppingCart.js" type="text/javascript"></script>


 <script src="js/app.js" type="text/javascript"></script>


 <script src="js/controller.js" type="text/javascript"></script>


 <link href="css/style.css" rel="stylesheet" type="text/css"/>


 </head>


 <body>


 <div class="container-fluid">


 <div class="row-fluid">


 <div class="span10 offset1">


 <h1 class="well" >


 <a href="default.htm">


 <img src="img/logo.png" height="60" width="60" alt="logo"/>


 </a>


 Angular Store


 </h1>


 <div ng-view></div>


 </div>


 </div>


 </div>


 </body>


</html>



注意以下要点:

  • "ng应用"属性将页面与 app.js 文件中定义的 AngularStore MODULE。 这里属性负责URL路由。视图注入,并为每个视图提供适当的控制器。
  • 收费的"ng视图"div标记了将插入与路由视图对应的部分页面的地方。 回想一下,我们的应用程序有三个部分页面: store.htm, product.htm,shoppingCart.htm。
  • switch的页面部分在你浏览视图时仍然保留在适当的位置,作为一个主页面。 在本示例中,这里区域显示应用程序 logo 和标题。
  • 示例应用程序使用收费的Bootstrap,包括强大的。易于使用的css样式的Twitter 框架。 Bootstrap 使得创建适合桌面和移动设备( 有关详细信息,请参阅 http://twitter.github.io/bootstrap/。)的自适应布局变得很容易。

store.htm 部分视图的实现方式如下:


<p class="text-info">


 Welcome to the Angular Store<br />


 Please select the products you want.. ..<br /></p>


<p>


 Search: <input ng-model="search"></p>



<table class="table table-bordered">



 <tr class="well">


 <td class="tdRight" colspan="4" >


 <a href="default.htm#/cart" title="go to shopping cart"



         ng-disabled="cart.getTotalCount() <1">


 <i class="icon-shopping-cart" />


 <b>{{cart.getTotalCount()}}</b> items,


 <b>{{cart.getTotalPrice() | currency}}</b>


 </a>


 </td>


 </tr>



 <tr ng-repeat="product in store.products | orderBy:'name' | filter:search" >


 <td class="tdCenter">


 <img ng-src="img/products/{{product.sku}}.jpg" alt="{{product.name}}" />


 </td>


 <td>


 <a href="#/products/{{product.sku}}"><b>{{product.name}}</b></a>


 <br />{{product.description}}


 </td>


 <td class="tdRight">


 {{product.price | currency}}


 </td>


 <td class="tdCenter">


 <a href="" 



       ng-click="cart.addItem(product.sku, product.name, product.price, 1)">


 add to cart


 </a>


 </td>


 </tr>



 <tr class="well">


 <td class="tdRight" colspan="4">


 <a href="default.htm#/cart" title="go to shopping cart"



         ng-disabled="cart.getTotalCount() <1">


 <i class="icon-shopping-cart" />


 <b>{{cart.getTotalCount()}}</b> items,


 <b>{{cart.getTotalPrice() | currency}}</b>


 </a>


 </td>


 </tr>


</table>



视图由三个区域组成的table 组成: 第一行包含一个跨越整个 table的单元格,并显示购物车的摘要。 注意它如何使用getTotalCount和的getTotalPrice 方法来检索购物车信息。 单击这里元素将浏览器重定向到"默认。htm#/购物车",这显示了购物车。

这个视图使用了内置图标的内置 ,在这种情况下,"icon-shopping-cart"类以简单而有吸引力的图标来增强视图。Bootstrap 包括一组包含许多常用场景的140图标( 请参阅这里的完整列表: http://twitter.github.io/bootstrap/base-css.html#icons )。

表的主体使用 repeat重复属性来显示所有产品的经过排序的已经筛选列表。 每个产品行都包含一个图像,描述也是产品细节视图。产品价格和链接的链接。 通过将属性添加到购物车中,可以调用 cart cart method方法来调用购物车的

"顺序"和"筛选器"子句是由的AngularJS 提供的过滤器。 你可以在这里了解有关AngularJS过滤器的更多信息: http://egghead.io/video/rough-draft-angularjs-built-in-filters/

最后一行是第一行的副本。 它显示了购物车 below的另一个总结,使得在拥有很多产品的商店中导航变得更加容易。

product.htm 部分视图非常相似,所以我们不会在这里列出它。

最有趣的部分视图是购物车本身,以为单位的shoppingCart.htm:


<p class="text-info">


 Thanks for shopping at the Angular Store.<br />


 This is your shopping cart. Here you can edit the items, 


 go back to the store, clear the cart, or check out.</p>



<div class="container-fluid">


 <div class="row-fluid">



视图的第一部分显示标题,并设置一个收费的"流体行"div,该div将显示以下两个项: 左边的购物车项和右边的购物车按钮。


<!-- items -->


<div class="span8">


 <table class="table table-bordered">



 <!-- header -->


 <tr class="well">


 <td><b>Item</b></td>


 <td class="tdCenter"><b>Quantity</b></td>


 <td class="tdRight"><b>Price</b></td>


 <td />


 </tr>



 <!-- empty cart message -->


 <tr ng-hide="cart.getTotalCount()> 0" >


 <td class="tdCenter" colspan="4">Your cart is empty. </td>


 </tr>



 <!-- cart items -->


 <tr ng-repeat="item in cart.items | orderBy:'name'">


 <td>{{item.name}}</td>


 <td class="tdCenter">


 <div class="input-append">


 <!-- use type=tel instead of number to prevent spinners -->


 <input



            class="span3 text-center" type="tel" 



            ng-model="item.quantity" ng-change="cart.saveItems()" />


 <button 



            class="btn btn-success" type="button" 



            ng-disabled="item.quantity> = 1000"



            ng-click="cart.addItem(item.sku, item.name, item.price, +1)">+


 </button>


 <button 



            class="btn btn-inverse" type="button" 



            ng-disabled="item.quantity <= 1"



            ng-click="cart.addItem(item.sku, item.name, item.price, -1)">-


 </button>


 </div>


 </td>


 <td class="tdRight">{{item.price * item.quantity | currency}}</td>


 <td class="tdCenter" title="remove from cart">


 <a href="" ng-click="cart.addItem(item.sku, item.name, item.price, -10000000)" >


 <i class="icon-remove" />


 </a>


 </td>


 </tr>



 <!-- footer -->


 <tr class="well">


 <td><b>Total</b></td>


 <td class="tdCenter"><b>{{cart.getTotalCount()}}</b></td>


 <td class="tdRight"><b>{{cart.getTotalPrice() | currency}}</b></td>


 <td />


 </tr>


 </table>


</div>



这些项显示在"span8"div中。 Bootstrap 布局基于 12宽度单位,所以这个div大约是可用宽度的2 分之一。

包含购物车项的table 以 header 行开头,后面跟一个空的购物车指示器。 "隐藏"属性用于确保只有当购物车为空时才可见指示器。

表的主体是用一个的"ng重复"属性生成的,该属性循环遍历 cart.items array 中的项。 对于每个项目,table 显示项目 NAME,按照项目数量和价格。

使用绑定到 item.quantity 属性和两个按钮的组合元素显示项目数量,并使用两个按钮来增加或者递减数量。

请注意当数量更改时,如何使用"ng更改"属性来保存购物车内容。 请注意,当项目数量达到一个时,如何禁用减量按钮。 这里时,减少数量将会从购物车中删除该项目,并且我们不希望用户意外地执行这里操作。

在数量字段之后,table 显示项( 单价乘以数量)的总价格和一个按钮,用户可以从该数据库中删除该项。

table 页脚显示购物车内容的摘要,当用户编辑数量或者从购物车中删除项目时自动更新。 这些更新由AngularJS自动处理。

除了车票项目之外,视图还有一个用于返回存储区的按钮,以清除购物车。


<!-- buttons -->


<div class="span4">


 <p class="text-info">


 <button 



      class="btn btn-block" 



      onclick="window.location.href='default.htm'">


 <i class="icon-chevron-left" /> back to store


 </button>


 <button 



      class="btn btn-block btn-danger" 



      ng-click="cart.clearItems()" 



      ng-disabled="cart.getTotalCount() <1" >


 <i class="icon-trash icon-white" /> clear cart


 </button>


 </p>



这个部分从一个"span4"div开始,它填充了( 记住这些物品都放在"span8"div )。

返回"回到商店"按钮,该按钮返回到" default.htm"页面,该页面映射到。

"清除购物车"按钮调用的cart clearItems方法,仅当购物车还没有清空时才启用。


<p class="text-info">


 <button



    class="btn btn-block btn-primary"



    ng-click="cart.checkout('PayPal')"



    ng-disabled="cart.getTotalCount() <1">


 <i class="icon-ok icon-white" /> check out using PayPal


 </button>


 <button 



    class="btn btn-block btn-primary" 



    ng-click="cart.checkout('Google')" 



    ng-disabled="cart.getTotalCount() <1">


 <i class="icon-ok icon-white" /> check out using Google


 </button>


</p>



结帐按钮调用了的cart结帐方法,传递适当的服务 NAME。 记住我们在 app.js 文件中配置了购物车,以接受PayPal和谷歌作为有效的支付服务提供商。


<p class="text-info">


 <button 



    class="btn btn-block btn-link"



    ng-click="cart.checkout('PayPal')"



    ng-disabled="cart.getTotalCount() <1" >


 <img



      src=https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif



      alt="checkout PayPal"/>


 </button>


 <button 



    class="btn btn-block btn-link" 



    ng-click="cart.checkout('Google')" 



    ng-disabled="cart.getTotalCount() <1" >


 <img



      src=https://checkout.google.com/buttons/checkout.gif?... 



      alt="checkoutGoogle"/>


 </button>


</p>



这些按钮提供了相同的购物车结帐服务,但是使用了PayPal和Google提供的图片。 我个人认为,提供程序按钮在页面上可能看起来有些 LESS 一致,但为用户提供了一种熟悉的感觉。

布局机制的优点在于它是'自适应'。 如果在移动设备上查看页面,则布局将自动适应屏幕宽度。 屏幕截图 below 说明了。 左边的图像显示了一个广泛的视图,项目右边的按钮是( 典型桌面视图)。 右侧的图像显示了一个窄视图,其中按钮 below 显示项目的( 典型的移动视图)。

结束语

这里提供的"shoppingcart"类满足本文开头所描述的需求。 它是 100%个 JavaScript,对服务器没有需求,因这里应该容易添加到现有项目中。 购物车支持PayPal和的谷歌钱包,这是流行的支付服务。 许多应用程序可以能希望扩展它们以支持自己的定制付款服务,这应该很容易。

MVVM Pattern 允许在多个视图中公开相同的cart对象,它包含非常简单的标记,几乎没有逻辑。 示例应用程序有一个显示整个购物车的视图,并允许用户编辑它。 这些视图易于创建和定制,并且对应用程序逻辑没有影响。

我是 AngularJS的粉丝。 它提供了一个令人惊讶的特性列表,包括路由和部分视图。过滤器。自定义指令。

我特别喜欢的AngularJS 数据绑定特性与普通JavaScript对象一起工作的事实。 一些MVVM库( 就像 KnockoutJS ) 需要特殊的"可以观察"属性,它们使用与普通属性不同的语法声明和访问。

AngularJS 我不喜欢的一个方面是缺少文档。 你可以找到很多关于细节的信息,但是我没有找到一个好的参考来展示框架的总体概念视图。 我最喜欢的文档来源是一系列由Lindquist创建的视频,你可以在这里找到: http://www.youtube.com/user/johnlindquist

因为它使得创建有吸引力的。响应性的HTML布局变得容易,我也喜欢的Bootstrap。 in Bootstrap 还提供了一些样式和图标,你可以在这里使用工具提示,弹出菜单,菜单,等等 等工具来增强你的ui: http://twitter.github.io/bootstrap/

Github版本

,一位读者要求我发布这个项目,,他和其他人可以 fork fork,包括支付处理器 PayPal Google。 读者对为开发者开发的付费处理器 support 增加了支持的兴趣。

我喜欢这个想法,但是我不够快,所以他打开了我。 项目现在可以的价格提供,包括额外的支持的Stripe.js,这一切都是由。 Spike 所以感谢 Spike,对于这些新和改进版本的购物车,这里是链接: !

https://github.com/kenyee/angularjs-cart

引用

  • Google的AngularJS是由Google的。 AngularJS的主页,带有示例和文档链接。
  • 让我们看看 AngularJS - -"超级英雄JavaScript框架"的特性。 对AngularJS框架的一个很好的总结。
  • 使用AngularJS构建Huuuuuge应用程序。 关于如何构造大型( 或者不这么大) AngularJS应用程序的最佳文档。
  • Egghead.io。John系列关于如何在AngularJS上观看视频系列的文章。
  • nopCommerce一个开源的购物车框架框架。 描述完整( 客户端/服务器) 购物车框架的CodeProject文章。
  • 使用贝宝支付系统在 ASP.NET。 CodeProject关于PayPal支付系统的文章,包括许多有趣和有用的细节。

angular  CAR  SHOP  购物  
相关文章