AngularJS + RequireJS -- 未知提供程序,Angular bug
AngularJS + RequireJS -- Unknown Provider, Angular Bug?
我收到以下异常"未知提供程序:authSvc",它源自我的配置.js文件,我将在下面发布。 我知道此错误意味着我的authSvc模块尚未注册并且不可用,但是该服务是在我尝试注入之前创建的。 有人可以帮我吗? 我迷失在这一点上...所以以为我会转向SO。 谢谢。
索引.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
<script data-main="js/main" src="js/vendor/require.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" ng-controller="navCtrl">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><button class="btn btn-default navbar-btn" ng-click="login()">Login</button></li>
<li><button class="btn btn-info navbar-btn" ng-click="register()">Register</button></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div ng-view></div>
</body>
</html>
主.js
require.config({
paths: {
'angular': 'vendor/angular',
'domReady': 'vendor/domready',
'angularRoute': 'vendor/angular-route',
'angularLocalStorage': 'vendor/angular-local-storage',
'bootstrapCss': 'vendor/bootstrap-css'
},
shim: {
'angular': {
exports: 'angular'
},
'angularRoute': {
deps: ['angular']
},
'angularLocalStorage': {
deps: ['angular']
}
},
deps: ['./bootstrap']
});
引导.js
require([
'angular',
'app',
'services/authSvc',
'controllers/navCtrl',
'controllers/landingPageCtrl',
'controllers/homeCtrl',
'controllers/loginCtrl',
'config',
'routes'
], function (angular) {
'use strict';
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
});
应用.js
define([
'angular',
'angularRoute',
'angularLocalStorage'
], function(angular, angularRoute, angularLocalStorage) {
'use strict';
var app = angular.module('myApp', ['ngRoute', 'LocalStorageModule']);
return app;
});
authSvc.js
define(['app'], function(app) {
app.service('authSvc', function($http, localStorageService) {
this.setToken = function(token) {
return localStorageService.set('token', token);
}
this.getToken = function() {
return localStorageService.get('token');
}
this.login = function(username, password) {
return $http.post('/api/login', {username: username, password: password});
}
});
console.log('authSvc registered');
});
配置.js
define(['app'], function(app) {
'use strict';
app.config(function($httpProvider, authSvc) {
$httpProvider.interceptors.push(function($q) {
return {
'request': function(config) {
// same as above
//config.headers.token = authSvc.getToken();
return config;
},
'response': function(response) {
// same as above
return response;
}
};
});
});
console.log('config registered');
});
不能在配置块中注入服务。只有提供者。
app
.factory('yourInterceptor', yourInterceptor)
.config(configureInterceptor);
function configureInterceptor($httpProvider) {
$httpProvider.interceptors.push('yourInterceptor');
}
function yourInterceptor(authSvc) {
return {
'request': function (config) {
// same as above
//config.headers.token = authSvc.getToken();
return config;
},
'response': function (response) {
// same as above
return response;
}
};
}
编辑:
将注入器传递给侦听器,并使用注入器获取服务实例
function yourInterceptor($injector) {
return {
'request': function (config) {
var authService = $injector.get('authSvc');
//config.headers.token = authSvc.getToken();
return config;
},
'response': function (response) {
// same as above
return response;
}
};
}
相关文章:
- angular 1.5应用程序中的导航栏
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 没有在Angular应用程序中定义firebase(在firebase迁移之后)
- Grunt构建导致Angular应用程序在dist上崩溃
- 在Angular应用程序中每个帖子投票一次
- 如何构建angular.js应用程序
- 微软边缘浏览器缓存中的RESTful Angular应用程序
- Angular ng控制器与ng应用程序冲突
- 如何在给定的angular应用程序中获取所有指令名称
- 在日期更改后更新Angular UI引导程序日期选择器选项
- 正在将lodash注入Angular提供程序
- 使用应用程序状态js和视图在angular js url上传递两个参数
- 如何将现有的angular js应用程序集成到Laravel 5中
- 从C#应用程序向Angular页面发送帖子请求
- Highcharts:格式化程序和点击功能don'不能使用Angular
- 触发器<输入类型=“;文件“>用angular程序选择文件
- angular js应用程序不工作
- 我可以在React应用程序中使用什么作为Angular的等价物;s$http.get
- Angular.js指令格式化程序只调用过一次,或者如何告诉ngModel表现得像watchCollection
- 同一'angular应用程序'在页面上