什么是之间的差异Service,Provider并Factory在AngularJS?
dependency-injection angularjs angularjs-service angularjs-factory angularjs-provider
据我了解,当在工厂内部时,我返回一个被注入控制器的对象.在服务内部时,我正在处理使用的对象this而不返回任何内容.
我假设服务总是单例,并且每个控制器都会注入一个新的工厂对象.然而,事实证明,工厂对象也是单身人士?
用于演示的示例代码:
var factories = angular.module('app.factories', []);
var app = angular.module('app', ['ngResource', 'app.factories']);
factories.factory('User', function () {
return {
first: 'John',
last: 'Doe'
};
});
app.controller('ACtrl', function($scope, User) {
$scope.user = User;
});
app.controller('BCtrl', function($scope, User) {
$scope.user = User;
});
Run Code Online (Sandbox Code Playgroud)
当改变user.first的ACtrl事实证明,user.first在BCtrl也发生了变化,比如User是一个单身?
我的假设是在一个带有工厂的控制器中注入了一个新实例?
我有两个Angular控制器:
function Ctrl1($scope) {
$scope.prop1 = "First";
}
function Ctrl2($scope) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
Run Code Online (Sandbox Code Playgroud)
我不能Ctrl1在里面使用,Ctrl2因为它是未定义的.但是,如果我尝试传递它...
function Ctrl2($scope, Ctrl1) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
Run Code Online (Sandbox Code Playgroud)
我收到一个错误.有谁知道如何做到这一点?
干
Ctrl2.prototype = new Ctrl1();
Run Code Online (Sandbox Code Playgroud)
也失败了.
注意:这些控制器不是彼此嵌套的.
我遇到了从视图内部绑定输入的问题.我认为它会绑定到控制器范围,但它似乎绑定到子范围,所以它不会在上面更新.
如果他们在ng-repeat中(我不知道为什么),其他项目会像我期望的那样绑定.
这是一个例子:http:
//jsfiddle.net/hMpsB/1/
如果输入不在ng-repeat中,那么将输入绑定到正确范围的最佳方法是什么?
我试图让两个不同的控制器相互通信.
控制器1
function WelcomeCtl($scope, emailService) {
$scope.save=function(){
emailService.saveEmail(‘Hi’);
}
}
WelcomeCtl.$inject = [$scope, emailService];
Run Code Online (Sandbox Code Playgroud)
此控制器用于从文本字段中获取文本(使用ng-model ='email')并将文本放入服务(emailService),以便可以在下一个ng-view中使用(由下一个视图控制)控制器) //出于测试目的我只是将'Hi'直接放入saveEmail函数中
控制器2
function SignupCtl($scope, emailService) {
window.alert(emailService.getEmail())
}
SignupCtl.$inject = [$scope, emailService];
Run Code Online (Sandbox Code Playgroud)
为了测试目的,我使用window.alert来显示getEmail()的值
emailService
angular.module('myApp.services', [])
.service('emailService', function (){
var text =”start value”;
return{
saveEmail:function (data){
text = data;
},
getEmail:function (){
return text;
}
};
});
Run Code Online (Sandbox Code Playgroud)
由于使用此服务指定的Controller1和Controller 2,window.alert打印出"起始值"而不是"嗨"
当我在代码中添加更多window.alert函数以查看发生的情况时,我看到当调用save()时,Controller 1执行并将值保存到服务中,express.js加载下一页.然后Controller2激活.当Controller 2激活它时,重新初始化服务,将文本设置回"起始值".然后当调用getEmail时,它返回值"start value"
这让我感到困惑,因为我的印象是,每次将控件包含在服务器中时,服务都没有初始化.
咨询资源.
更好的设计,用于将数据传递到其他ng-view并将其持久化到控制器上
我也在使用angular-express-seed https://github.com/btford/angular-express-seed
我有一个应用程序,我使用ngCart指令,以存储添加到篮子中的项目.问题是该指令只具有发送用户添加的项目信息的功能,但我还需要发送一些我将从表单中获取的信息.
因此,为了在单个对象中发送它,我首先需要将指令中存储的数据提取到我的主范围,然后将其与我从表单中获取的数据合并.
为此,我需要修改ngCart.js指令.我试图提供服务,正如这里所建议的那样,但我无法让它发挥作用.我在指令中添加的代码是这样的
.service('ngCartData', ['ngCart', function(ngCart){
return {
data:ngCart;
};
}])
Run Code Online (Sandbox Code Playgroud)
,但我得到一个错误说 Module 'ngCart' is not available!
我对角度服务和工厂都很陌生,所以我不确切地知道在哪里工作.我用我的代码制作了一个plunkr(我尝试ngCart.js使用上面的代码修改文件,但是plunkr显示了没有任何修改的指令).我只需要能够在范围ngCart中发送存储在指令中的数据,以便我可以在父控制器中监听它(参见plunkr中的checkout部分).
任何帮助将非常感激.谢谢!