Angular 购物车编辑器
5.00/5 (3投票s)
Angular 编辑器，用于我在 CodeProject 上发布的 Angular 购物车。
引言
这是我为 CodeProject 上发布的 Angular 购物车 创建的 Angular 购物车编辑器。
您始终可以在我的网站上找到我的 Angular 购物车和编辑器的最新版本，网址为：
www.Software-rus.com.
我想在 Angular 中为我的购物车创建一个**简单**的编辑器，允许用户对 JSON 文件、本地或远程数据库执行 CRUD 操作。我的第一个想法是使用 `datagrid` 来显示产品，用户可以通过选择 `datagrid` 中的一行来编辑产品，但很快就发现 `datagrid` 会占用屏幕太多空间，因此我决定采用不同的 GUI 布局，将用于选择要编辑的产品组件放在屏幕左侧的侧边栏中，使用简单的列表，将较大的屏幕区域留给布局每个产品的属性，如下图所示。我比 `datagrid` 更喜欢这种布局和方法来编辑。这种布局和方法可以应用于编辑任何 JSON 文件或数据库。每个记录的字段显示在名为 _editor-details.htm_ 的主视图中。当您在侧边栏中选择一个项目时，主视图会更新以显示选定项目的该记录。
数据源
用户可以轻松修改此编辑器如何从不同数据源加载和保存数据。我使用的方法是允许用户在配置文件中设置默认数据源，然后从下图所示的下拉菜单中选择要加载数据的数据源。
我使用了一个使用 **promise** 和 **deferred** 异步加载数据的 `DataService`。Angular 中的 promise 充当占位符，JavaScript 对象以异步方式返回某些结果作为数据，并且不保证固定的响应时间。此 deferred 对象使用 `$q.defer()` 构建，用于通知异步工作的成功或不成功完成。在 deferred 对象中完成任务后，我们可以访问 promise 对象中的结果。以这种方式加载数据的 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 文件中将 `Date` 字段加载为“`Date`”对象，如下所示。
var _expecteddate = new Date(prod.expecteddate);
prod.expecteddate = _expecteddate;
Bootstrap 3 菜单和导航栏
此编辑器中使用的 Bootstrap 3 菜单已在我上面引用的购物车文章中进行了详细讨论，因此我在此不再重复所有代码的讨论。您可以升级到更高版本的 Bootstrap 来使用导航栏，并且在高于 Bootstrap 3 的版本中，导航栏代码中用于下拉菜单的必要更改（**不使用 ui-bootstrap**）如下所示。
<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> 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="''" />
Shopping Cart Article & Source Code</a></li>
</ul>
</li>
HTML 字段
购物车中的几个字段，即 `shortdesc`、`description`、`carousel_caption` 和 `productname`，可以有 HTML 格式，因此我决定为这些字段添加一个非常简单的编辑器，名为 `nng-wig`。您可以在 http://ngmodules.org/modules/ngWig 获取此模块。
这些字段不应包含任何段落标签或可能破坏购物车外观的复杂 HTML，这一点很重要。因此，我将编辑限制为粗体、斜体和 `<br />` 用于换行。我查看了许多用于编辑 HTML 内容的模块，但其他编辑器插入了太多不必要的 HTML 格式，从而破坏了购物车中的显示。
嵌入式视频管
我一直认为，一图胜千言，而视频胜百万言。因此，在我的 Angular 购物车中，我添加了为商店中的商品插入图片或视频的功能。值得注意的是，如今有许多视频管服务，从 Vimeo 到中国巨大的 _**YouKu Tube 服务器**_，后者现在是世界上最大的电视网络。
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 视频管时，它会显示 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 Dir**”按钮右侧的字段中输入所需子目录的名称，然后按下该按钮设置路径以包含他们输入的子目录。例如，我是旧漫画书的收藏家，我创建了一个名为“comics”的子目录来存放我的漫画图像。此功能的 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 购物车的文章中进行了说明，因此我在此不再重复。但我认为此编辑器应单独发布一篇文章，以便于理解。我还更新了我发表在 CodeProject 上的关于 Angular 购物车的文章 Angular Shopping Cart That is Responsive Mobile 中的许多功能。
您可以通过直接插入我的 Angular Carousel 的代码，轻松添加我的 **AngularJS Super Slick Carousel**。要添加轮播图，请访问：
https://codeproject.org.cn/Articles/895739/Super-Slick-Carousel-Using-AngularJS-Directive
在接下来的几周内，我将更新此编辑器和我的 Angular 购物车，并将发布一个 Angular 2 版本，包含我的购物车和此编辑器，并增加许多新功能。