我是AngularJS的新手,就像我到目前为止看到的那样,特别是模型/视图绑定.我想利用它来构建一个简单的"添加到篮子"功能.
到目前为止这是我的控制器:
function BasketController($scope) {
$scope.products = [];
$scope.AddToBasket = function (Id, name, price, image) {
...
};
}
这是我的HTML:
<a ng-click="AddToBasket('237', 'Laptop', '499.95', '237.png')">Add to basket</a>
现在这可行但我非常怀疑这是在我的模型中创建新产品对象的正确方法.然而,这是我完全缺乏AngularJS体验的地方.
如果不是这样做的话,最佳做法是什么？
我说要学习AngularJS,来自很多不同的MV*框架.我喜欢这个框架,但是我在控制器之间传递数据时遇到了麻烦.
假设我有一个带有一些输入(input.html)和控制器的屏幕,让我们说InputCtrl.
此视图上有一个按钮,可以将您带到另一个屏幕,让我们说使用控制器ApproveCtrl批准(approve.html).
此ApproveCtrl需要来自InputCtrl的数据.这似乎是更大的应用程序中非常常见的情况.
在我以前的MV*框架中,这将像(伪代码)一样处理:
var self = this;
onClick = function() {
var approveCtrl = DI.resolve(ApproveCtrl);
approveCtrl.property1 = self.property1;
approveCtrl.property1 = self.property2;
self.router.show(approveCtrl);
}
现在,在AngularJS中,我正在处理这个:
var self = this;
onClick = function(){
self.$locationService.path('approve');
}
我发现很难控制创建的Controller的状态并将数据传递给它.我已经看过并尝试过以下方法,但在我看来,所有这些都有自己的问题:
我在这里错过了什么吗？我创造了太多小型控制器吗？我是否试图在这里过多地保留其他框架的习惯？
当使用AngularJS服务尝试在两个控制器之间传递数据时,我的第二个控制器在尝试从服务访问数据时总是收到未定义的.我猜这是因为第一个服务执行$ window.location.href并且我认为这是清除服务中的数据？有没有办法让我将URL更改为新位置,并将数据保留在第二个控制器的服务中？当我运行下面的代码时,第二个控制器中的警报始终是未定义的.
app.js(定义服务的地方)
var app = angular.module('SetTrackerApp', ['$strap.directives', 'ngCookies']);
app.config(function ($routeProvider)
{
$routeProvider
.when('/app', {templateUrl: 'partials/addset.html', controller:'SetController'})
.when('/profile', {templateUrl: 'partials/profile.html', controller:'ProfileController'})
.otherwise({templateUrl: '/partials/addset.html', controller:'SetController'});
});
app.factory('userService', function() {
var userData = [
{yearSetCount: 0}
];
return {
user:function() {
return userData;
},
setEmail: function(email) {
userData.email = email;
},
getEmail: function() {
return userData.email;
},
setSetCount: function(setCount) {
userData.yearSetCount = setCount;
},
getSetCount: function() {
return userData.yearSetCount;
}
};
});
logincontroller.js :(控制器1在服务中设置值)
app.controller('LoginController', function ($scope, $http, $window, userService) {
$scope.login …在导航栏上,我有一个使用的购物车快照(总项目,总价格)$scope.cart.
在ng-view,有一些页面可以添加/删除购物车中的项目.
它似乎ng-view创建了一个孤立的范围.如果我添加项目$scope.cart,它将转到属于的范围ng-view.如何ng-view共享父范围？
我正在使用这台发电机.
我有我的用户模块:
require('angular/angular');
require('angular-ui-router');
angular.module('userModule', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('utenti', {
url: '/utenti',
templateUrl: 'src/utenti/views/utenti.tpl.html',
controller: 'RegistrationCrl',
})
.state('access', {
url: '/access',
templateUrl: 'src/utenti/views/access.tpl.html',
controller: 'AccessCtrl',
});
}])
.controller('RegistrationCrl', require('./controllers/registrationLogin'))
.controller('AccessCtrl', require('./controllers/access'));
在我的RegistrationCrl中,我使用服务来创建一个新成员:
module.exports = function($scope, User, Member, $state, $location,$rootScope, $stateParams){
$scope.registration = function(form){
if(!form.$valid ){
console.log('input error');
return;
}
else{
console.log('valid form');
Member.create($scope.newMember,
function(data){
$state.go('access', data);
},
function(data){
console.log(data);
}
);
}
};
};
我想在下一个与accessCtl相关的视图中使用该数据.我不想在我的URL中使用id并使用$ stateParams.
我的访问控制器是:
module.exports = function($scope, User, Member, $state, $rootScope, $stateParams){
console.log($state); …