我想不出一个好的标题,因为我不是100%确定要问什么,加上这可能是棘手的,没有发布我的整个应用程序。Angular(1.4)设计和布局
我是新角度,并希望创建一个网站举行食谱。 我正在使用MVC和Web API,并将基础知识放在一起。 我想让配方编辑过程具有良好的用户体验,因此希望用户能够在不离开页面的情况下添加配料并进行编辑和保存。
目前我有一个角度模块和配方编辑控制器,我想有一个子应用程序,允许他们添加和编辑配料。我不希望他们必须离开。
我需要知道的是a)术语。我正在考虑成分编辑器作为一个子应用程序,但它只是一个子控制器? 和b)叫什么样的模式?主细节视图?
以下是我目前的“EditRecipeViewModel” 在我newAddIngredient推动的成分对象到一个数组的那一刻,这可以再进行编辑和保存saveNewIngredient,但是这是肮脏和编辑的成分不工作。我想我想要编辑一个成分封装在一个单独的东西的功能,但是,一个模块是一个控制器或什么?也许我想在我走路之前跑步?
//edit recipe
//add ingredients
//add picture(s)
//confirm
//save
var editRecipeModule = angular.module('editRecipe', ['common'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when(CookBook.rootPath + 'recipe/edit', { templateUrl: CookBook.rootPath + 'Templates/EditRecipe/EditRecipe.html', controller: 'EditRecipeViewModel' });
$routeProvider.when(CookBook.rootPath + 'recipe/edit/confirm', { templateUrl: CookBook.rootPath + 'Templates/EditRecipe/ConfirmRecipe.html', controller: 'ConfirmRecipeViewModel' });
$routeProvider.otherwise({ redirectTo: CookBook.rootPath + 'recipe/edit/' });
$locationProvider.html5Mode({ enabled: true });
});
editRecipeModule.controller("EditRecipeViewModel", function ($scope, $window, viewModelHelper, validator) {
$scope.viewModelHelper = viewModelHelper;
$scope.editRecipeModel = new CookBook.EditRecipeModel();
$scope.newIngredient = new CookBook.IngredientModel();
$scope.ingredients = [];
var editRecipeRules = [];
var setupRules = function() {
editRecipeRules.push(new validator.PropertyRule("Name", {
required: { message: "Recipe name is required." }
}));
editRecipeRules.push(new validator.PropertyRule("Description", {
required: { message: "Please add a description." }
}));
editRecipeRules.push(new validator.PropertyRule("Method", {
required: { message: "All good recipes need a method." }
}));
}
var editIngredientRules = [];
var setupIngredientRules = function() {
editIngredientRules.push(new validator.PropertyRule("Name", {
required: { message: "Name is required" }
}));
editIngredientRules.push(new validator.PropertyRule("Amount", {
required: { message: "Amount is required" }
}));
editIngredientRules.push(new validator.PropertyRule("Unit", {
required: { message: "Unit is required" }
}));
}
$scope.confirm = function() {
validator.ValidateModel($scope.editRecipeModel, editRecipeRules);
viewModelHelper.modelIsValid = $scope.editRecipeModel.isValid;
viewModelHelper.modelErrors = $scope.editRecipeModel.errors;
if (viewModelHelper.modelIsValid) {
//save via web api
}
}
$scope.newAddIngredient = function() {
$scope.newIngredient = new CookBook.IngredientModel();
$scope.newIngredient.EditMode = true;
$scope.ingredients.push($scope.newIngredient);
}
$scope.saveNewIngredient = function() {
$scope.newIngredient.EditMode = false;
}
$scope.addIngredient = function() {
validator.ValidateModel($scope.newIngredient, editIngredientRules);
viewModelHelper.modelIsValid = $scope.newIngredient.isValid;
viewModelHelper.modelErrors = $scope.newIngredient.errors;
if (viewModelHelper.modelIsValid) {
$scope.ingredients.push($scope.newIngredient);
$scope.newIngredient = new CookBook.IngredientModel();
}
}
setupRules();
setupIngredientRules();
});
editRecipeModule.controller("ConfirmRecipeViewModel", function ($scope, $window, viewModelHelper) {
$scope.viewModelHelper = viewModelHelper;
//$scope.editRecipeModel = new CookBook.editRecipeModel();
});