Angular 购物车编辑器

分享于 

11分钟阅读

Web开发

  繁體

点击这里查看这个AngularJS购物车的工作演示

介绍

这是一个 Angular 购物车编辑器,用于我在CodeProject上发布的Angular 购物车:
http://www.codeproject.com/Articles/881354/Angular-Shopping-Cart-That-is-Responsive-Mobile

你可以随时在我的网站上找到我的Angular 购物车和编辑器的最新版本:
www.Software-rus.com

为了方便用户在JSON文件或者本地或者远程数据库上执行CRUD操作,我想在 Angular 中创建一个简单的编辑器,用于购物车。 my使用数据网格,以使用一个简单列表显示屏幕左侧的产品,以显示产品要编辑的产品,侧边栏使用一个简单的列表布局每个产品的属性,使它的显示在屏幕左侧。 我喜欢这种布局和方法,比datagrid更好。 这里布局和方法可以用于编辑任何json文件或者数据库。 每个记录的字段都显示在名为 editor-details.htm的主视图中。 当你选择侧栏中的项目时,man视图 upadtes to显示所选项的记录。

数据源

用户可以轻松地修改这里编辑器如何加载和保存来自不同数据源的数据。 我使用的方法是允许用户在配置文件中设置默认数据源,然后从下面的ropdown菜单中选择数据源。

使用DataService异步加载数据,使用promise和延迟。 在 Angular 中承诺作为占位符,javascript对象在异步方式返回某些结果作为数据,而且不保证任何固定响应时间。 这个延迟对象是使用 $q.defer() 来通知成功或者unsuccesful完成的,在完成了to对象中的任务后,我们可以访问。 以这种方式加载数据的Angular 代码非常简单,如下所示。


// I created a data service that provides the store and a shopping cart that 


// will be shared by all views (instead of creating fresh ones for each view). 



storeApp.factory('DataService', function ($http, $q, CONFIG) { 



// Can be loadded from a JSON file, a local. mdf database, or a remote database 


//'CF_DATA_FILE': 'ac_products/products.js', 


//'CF_DATA_LOCAL': '/crud.ashx?ac=getproducts&cn=local', 


//'CF_DATA_REMOTE': '/crud.ashx?ac=getproducts&cn=remote',



var dataIndex = localStorage["data_src_index"]; 


if (dataIndex == null || dataIndex == "undefined") { 


 dataIndex = 0; localStorage["data_src_index"] = 0; 


} 


var dataSource = CONFIG.CF_DATA_FILE; 


if (dataIndex == 0) { 


 // We randomize the string to prevent caching


 dataSource = "/" + CONFIG.CF_DATA_FILE + "?rnd=" + new Date().getTime(); 


} 


else if (dataIndex == 1) { 


 dataSource = CONFIG.CF_DATA_LOCAL; 


} 


else if (dataIndex == 2) { 


 dataSource = CONFIG.CF_DATA_REMOTE; 


} 


function Store() { 


 var productsDeferred = $q.defer(); 


 this.products = productsDeferred.promise; //this.products is a promise 


 $http.get(dataSource).success(function (data, status, headers, config) { 


 var products = []; 


 for (var i = 0, len = data.length; i <len; i++) { 


 var prod = data[i]; 


 if (prod.storeid == "7cc6cb94-0938-4675-b84e-6b97ada53978") { 


 var _expecteddate = new Date(prod.expecteddate); 


 prod.expecteddate = _expecteddate; products.push(prod); 


 } 


 } 


 productsDeferred.resolve(products); 


}).error(function (data, status, headers, config) { 


 alert("Please check you have updated ConnectionString with YOUR OWN information!"); 


 // Please update"remoteCartConnectionString" with your own data!!! 


});


...etc.



注意,我决定从json文件中加载日期字段作为"日期"对象,如下所示。





var _expecteddate = new Date(prod.expecteddate);


prod.expecteddate = _expecteddate;




Bootstrap 3菜单和导航栏

我将在上面参考的购物车文章中详细讨论这个编辑器中使用的Bootstrap 3菜单,因此我不会重复这里的所有代码。 在 Navbar higher你可以升级到更高版本的Bootstrap,并在导航栏代码中进行必要的更改,而不使用ui引导程序,如下所示。


<li class="dropdown" ng-class="{open1: open1}">


 <a ng-click="navCollapsed =!navCollapsed" href="" class="dropdown-toggle" 



    data-toggle="dropdown" role="button" aria-expanded="false">


 <span class="fa fa-cart-plus"></span>&nbsp;Shopping Carts<span class="caret"></span></a>


 <ul role="menu" class="dropdown-menu">


 <li><a ng-click="open1=!open1" ng-href="some url" target="_blank">


 <img src="admin_img/codeproject.png" description="''" />


 &nbsp;Shopping Cart Article & Source Code</a></li>


 </ul>


</li>



HTML字段

购物中的shortdesc。描述。carousel_caption和productname的几个字段可以有html格式,所以我决定将一个非常简单的编辑器添加到这些字段中,叫做nng假发。 你可以在以下位置获取这里模块: http://ngmodules.org/modules/ngWig
这些字段不包含任何段落标记或者复杂的html,这将使购物车的外观变为粗体。italic 和 <br/>。 我查看了一些模块,用于编辑html内容,但它的他编辑器在格式中插入了不必要的html。

嵌入式视频管

我一直相信一幅图片值得一千字,但是在我的Angular 购物车里,我包含了一个图片或者视频。 现在应该注意到目前国内大量的视频管道服务都是在中国巨大的优酷管服务器。


sstoreApp.directive('embedVideo', function ($sce) { 


 return {


 restrict: 'EA', 


 scope: { tube: '=', code: '=' },


 replace: true,


 template: '<div class="video"><iframe src="{{url}}" frameborder="0" 


 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>


 link: function (scope) {


 scope.url ="about:blank";


 scope.$watch('code', function (videoidVal) {


 if (videoidVal) {


 if (scope.tube === 'youtube') {


 scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + videoidVal);


 } else if (scope.tube === 'youku') {


 scope.url = $sce.trustAsResourceUrl("http://player.youku.com/embed/" + videoidVal);


 } else if.. ... etc.//other tubes


 }


 scope.$apply();


 } }); } }; });



在某些情况下,管道服务提供了一种提取视频屏幕图像的方法,如在YouTube视频中。 我添加了一个显示在屏幕左侧的链接,并将显示到YouTube视频屏幕图像的链接,如下所示。


<a ng-show="product.showvideo && product.tube == 'youtube'" target="_self"



   href="https://img.youtube.com/vi/{{product.videoid}}/hqdefault.jpg"



   download="">YouTube Image</a> 



文件上传

用户可以在编辑器中将图像上载到服务器。 在ac_products目录中放置了所有上传的图像,但是用户可以在这个文件夹中创建子目录来帮助组织图像。 将"img目录"按钮右边所需的子目录名称输入按钮,然后按那个按钮设置包含它们所输入的子目录的路径。 例如我是黄金时代漫画书籍的收藏家,我为我的漫画图片创建了一个名为"漫画"的子目录。 下面显示了 Angular的代码。


$scope.uploadFile = function (event) 


{


 var fd = new FormData();


 for (var i in $scope.files) { 


 fd.append("uploadedFile", $scope.files[i]); 


 } 


 var imgDir = localStorage["img_dir"]; 


 var uploadUrl = "ImageHandler.ashx?dir=" + imgDir; 


 $.ajax({ url: uploadUrl, dataType: 'text', cache: false, 


 contentType: false, 


 processData: false, 


 data: fd, 


 type: 'post', 


 success: uploadComplete 


 }).error(function () { alert("failed!") }); 


}



结束语

这个编辑器中大多数代码的解释在我的Angular 购物车文章中解释过,所以这里没有重复。 但是我觉得这个编辑应该发布在自己的文章中,以使事情更容易理解。 我还更新了我文章中关于 Angular 购物的许多特性 我在下面的CodeProject上编写并发布的艺术:
http://www.codeproject.com/Articles/881354/Angular-Shopping-Cart-That-is-Responsive-Mobile


你可以轻松地添加我 AngularJS通过除去我 Angular carousel的代码来实现非常光滑的carousel。 要添加 carousel,请执行以下操作:
http://www.codeproject.com/Articles/895739/Super-Slick-Carousel-Using-AngularJS-Directive

在接下来的几周里,我将更新这个编辑器和我的Angular 购物车和我的购物车的Angular 2版本。


angular  EDI  CAR  SHOP  购物  
相关文章