[英]angular js Custom Service/factory unable to inject in controller/config
我正在尝试将自定义工厂注入控制器,但我收到“未知提供程序:ngResourceProvider < - ngResource < - UserService”错误消息。
当我尝试将自定义过滤器注入配置时,我得到以下错误消息“无法实例化模块mainApp由于:错误:[$ injector:unpr] http://errors.angularjs.org/1.5.0-rc.2/ $ injector / unpr?p0 = ... at Error(native)at http:// localhost:8080 / angulartest / scripts / js / angular.min.js:6:421 at http:// localhost:8080 / angulartest / scripts /js/angular.min.js:43:7 at d( http:// localhost:8080 / angulartest / scripts / js / angular.min.js:40:270 )e( http:// localhost:8080 / angulartest / scripts / js / angular.min.js:41:1 )在Object.invoke( http:// localhost:8080 / angulartest / scripts / js / angular.min.js:41:86 )at d( http: //localhost:8080/angulartest/scripts/js/angular.min.js:39:234 )在http:// localhost:8080 / angulartest / scripts / js / angular.min.js:39:358 at n( http :// localhost:8080 / angulartest / scripts / js / angular.min.js:7:366 )at g( http:// localhost:8080 / angulartest / scripts / js / angular.min.js:39:135
我已经浏览了各种各样的博客/视频我无法解决问题,任何人都可以帮助我。
HTML
<html >
<head>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="./css/custom.css"/>
<script src="./scripts/js/angular.min.js"></script>
<script src="./scripts/js/angular-local-storage.min.js"></script>
<script src="./scripts/js/angular-route.min.js"></script>
<script src="./scripts/js/jquery.scrollbar.js"></script>
<script src="./scripts/js/script.js"></script>
</head>
<body >
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i>
Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" ng-app="myApp" ng-controller="mainController">
<div ng-view></div>
</div>
</body>
</html>
用于将服务注入控制器的java脚本代码
var myApp = angular
.module('myApp', [ 'ngRoute'])
myApp.factory('UserService',['ngResource', function($resource) {
return $resource('/login', {}, {
login : {
method : 'POST',
params : {
'action' : 'authenticate'
},
headers : {
'Content-Type' : 'application/x-www-form-urlencoded'
}
},
});
}]);
myApp.config([ '$routeProvider', '$locationProvider', '$httpProvider','$provide',
function($routeProvider, $locationProvider, $httpProvider,$provide) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/login.html',
controller : 'mainController'
})
// route for the about page
.when('/dashbaord', {
templateUrl : 'pages/dashboard.html',
controller : 'dashbaordController'
})
$locationProvider.hashPrefix('!');
} ]);
myApp.controller('mainController',['UserService',function($scope,UserService) {
function login() {
alert("hi");
}
$scope.login = login;
}]);
myApp.controller('dashbaordController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
注入配置的javascript代码,下面是相同的代码我复制了唯一更改的代码
myApp.config([ '$routeProvider', '$locationProvider', '$httpProvider','$provide','UserService',
function($routeProvider, $locationProvider, $httpProvider,$provide,UserService) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/login.html',
controller : 'mainController'
})
// route for the about page
.when('/dashbaord', {
templateUrl : 'pages/dashboard.html',
controller : 'dashbaordController'
})
$locationProvider.hashPrefix('!');
} ]);
如果您使用的是ngResource,请包含“angular-resource.js”。 您可以在以下链接中找到cdn, Angular ngResource api doc
您只能在.config中注入提供程序。 尝试将UserService转换为提供者而不是工厂
UserSerivce是一项服务,因此您无法像提供者那样注入它。 您不需要将服务注入app.config。 你可以通过注入控制器来简单地使用它。
有几件事情出了问题。
这是具有正确代码的plunker 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.