从AngularJS中的另一个文件中的控制器访问服务
Accessing a service from a controller in another file in AngularJS
我有一个使用Onsen UI和AngularJS构建的跨平台企业应用程序。
这个应用程序发展得很快,所以我决定将我的主要app.js文件拆分成单独的文件。到目前为止,每个页面都有自己的控制器,所有控制器都在一个app.js文件中。
我的app.js中还定义了一个服务,我在其中存储用户名等值,以便在控制器之间共享。我需要在应用程序周期中存储这些,因为在所有页面上输入的所有值都会在用户交互结束时发送到服务器。
我已经成功地将控制器拆分为各自的文件,但我很难将服务移动到自己的文件中,例如sharedProperties.js.
我的"新"app.js(缩写)如下:
// Create the module that deals with the controllers
var app = angular.module("myApp", ['onsen', 'loginController', 'registerController']);
然后,我在每个控制器自己的文件中创建每个控制器,例如login.js,如下所示:
// Get the main app.js module
var login = angular.module("loginController", []);
login.controller("LoginController", function($scope, $http)
{
// Need to get and set values from/to sharedProperties here
});
然后在index.html中声明不同的.js文件,所有这些似乎都正常工作
我曾尝试在自己的文件中创建服务sharedProperties,例如sharedPerties.js,方法与下面相同,但这不起作用。
// Get the main app.js module
var shared = angular.module("sharedProperties", []);
shared.service("SharedProperties", function()
{
var username = "";
return {
// Get and set the userName
getUserName: function()
{
return userName;
},
setUserName: function(value)
{
userName = value;
}
}
});
我曾尝试将sharedProperties添加到我的模块中,但都不起作用。我试着把它添加到我的主应用程序中,如下所示:
// Create the module that deals with the controllers
var app = angular.module("myApp", ['onsen', 'sharedProperties', 'loginController', 'registerController']);
以及各个控制器的功能():
var login = angular.module("loginController", []);
login.controller("LoginController", function($scope, $http, sharedProperties)
{
// Need to get and set values from/to sharedProperties here
});
但这两者都不起作用。如何使新文件中的sharedProperties可用于所有控制器?
另外,我该如何称呼我的getter和setters。当所有控制器和服务都在我原来的app.js文件中时,我会创建控制器,将sharedProperties添加到函数()中,然后调用我的getter和setter,例如
app.controller("LoginController", function($scope, $http, sharedProperties)
{
sharedProperties.setUserName(someValue);
sharedProperties.getUserName();
});
或者有更好的方法吗?正如我所提到的,我不得不将app.js文件拆分成单独的文件,因为该应用程序越来越大,越来越难以管理。由于我无法控制的原因,随着时间的推移,这个应用程序会变得更大。
您必须将模块"sharedProperties"注入到要在其中使用的模块中。
通过这样做,它使模块了解"sharedProperties"中的所有内容。因此,您需要注入实际的服务,而不是将"sharedProperties"注入控制器和其他服务。像这样:
var app = angular.module("myApp", ['onsen', 'sharedProperties', 'loginController', 'registerController']);
var login = angular.module("loginController", []);
login.controller("LoginController", function($scope, $http, SharedProperties)
{
// Need to get and set values from/to sharedProperties here
});
然后,调用绑定到该服务的任何函数都像一样简单
SharedProperties.someFunction();
SharedProperties.someOtherFunction();
另一个注意事项:我建议长手注射
login.controller("loginController", ['$scope','$http', 'SharedProperties', function($scope, $http, SharedProperties){
//code in here
}]);
这是为了如果你打算缩小或丑化你的代码。
- AngularJS-需要在index.html页面中访问来自服务的数据
- Angular使服务可以从任何地方访问
- 从AngularJS中的另一个文件中的控制器访问服务
- 可以't访问Angular.js服务中的功能
- 无法使用javascript客户端访问远程web服务
- 使用typescript访问导入的服务时发生Angular2错误
- 服务变量分配了数据,但在访问时始终未定义
- 控制器切换后匿名功能中的访问服务数据发生变化
- 为什么我无法访问使用 $provide.provider 和 $injector.get 创建的服务
- 在 Jasmine 测试中无法访问 Angular 服务函数
- 从Web服务访问JSON响应
- 如何访问ng-init或ng-checked中服务回调函数中声明的$scope变量
- Microsoft认知服务JavaScript请求'访问控制允许来源'
- 如何正确访问es6中的AngularJS服务
- 如何访问回调函数之外的异步angularjs服务数据
- 从函数内部、类内部、模块内部访问 Angular 服务
- 从 Angular 控制器访问不同模块中的角度服务
- 如何通过绑定的控制器变量访问服务的属性
- 使用Angular服务和JavaScript类(在类中访问服务,或者在Angular框架中修改类)
- 如果angular视图直接访问服务,这是一个好习惯吗?