Angular 使用 RequireJS 的服务注入
Angular service injection using RequireJS
我正在为单页应用程序使用 AngularAMD + RequirsJS,但在 app.js 文件中注入服务时遇到了一些问题。
这里是代码:
login_service.js
define(['app'], function(app) {
'use strict';
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
});
app.js
define(['angularAMD', 'restangular', 'angular-ui-router'], function(angularAMD) {
'use strict';
var app = angular.module('MyApp', ['restangular', 'ui.router', 'loginService']);
app.run(function($rootScope, $state, $stateParams, $location, loginService) {
console.log(loginService)
/*
Error: [$injector:modulerr] Failed to instantiate module MyApp due to: [$injector:modulerr]
Failed to instantiate module loginService due to:
$injector:nomod] Module 'loginService' is not available! You either misspelled the module name or forgot to load it.
*/
});
app.config(function($stateProvider, $urlRouterProvider, $i18nextProvider, RestangularProvider) {
});
});
我想在 运行 函数中访问 loginService,但不能,因为我不断收到 "Failed to instantiate module MyApp" 错误消息。
我尝试加载登录服务文件如下:
define(['angularAMD', 'restangular', 'angular-ui-router', 'services/login_service'], function(angularAMD) {
});
但是我又遇到另一个错误,指出登录服务中未定义该应用程序。
非常感谢您的帮助。
大卫
它正在发生,因为 'loginService' 不是一个模块,它是一个服务,您不能将 'loginService'(服务)添加到模块中,您只能将模块添加到另一个模块中。
你可以做一件事:-
var app = angular.module('loginService',[]);
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
Ps:- 我不确定:-P
问题是由 requireJS
动态加载文件这一事实引起的,这向您保证在运行代码之前文件已经加载。
您应该执行以下操作:
从您的 html
中删除 ng-app
使用手动引导:
angular.element().ready(function(){
angular.bootstrap(document,['MyApp']);
});
我正在为单页应用程序使用 AngularAMD + RequirsJS,但在 app.js 文件中注入服务时遇到了一些问题。
这里是代码:
login_service.js
define(['app'], function(app) {
'use strict';
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
});
app.js
define(['angularAMD', 'restangular', 'angular-ui-router'], function(angularAMD) {
'use strict';
var app = angular.module('MyApp', ['restangular', 'ui.router', 'loginService']);
app.run(function($rootScope, $state, $stateParams, $location, loginService) {
console.log(loginService)
/*
Error: [$injector:modulerr] Failed to instantiate module MyApp due to: [$injector:modulerr]
Failed to instantiate module loginService due to:
$injector:nomod] Module 'loginService' is not available! You either misspelled the module name or forgot to load it.
*/
});
app.config(function($stateProvider, $urlRouterProvider, $i18nextProvider, RestangularProvider) {
});
});
我想在 运行 函数中访问 loginService,但不能,因为我不断收到 "Failed to instantiate module MyApp" 错误消息。
我尝试加载登录服务文件如下:
define(['angularAMD', 'restangular', 'angular-ui-router', 'services/login_service'], function(angularAMD) {
});
但是我又遇到另一个错误,指出登录服务中未定义该应用程序。
非常感谢您的帮助。
大卫
它正在发生,因为 'loginService' 不是一个模块,它是一个服务,您不能将 'loginService'(服务)添加到模块中,您只能将模块添加到另一个模块中。 你可以做一件事:-
var app = angular.module('loginService',[]);
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
Ps:- 我不确定:-P
问题是由 requireJS
动态加载文件这一事实引起的,这向您保证在运行代码之前文件已经加载。
您应该执行以下操作:
从您的 html
中删除 使用手动引导:
angular.element().ready(function(){ angular.bootstrap(document,['MyApp']); });
ng-app