angular js自定义服务/工厂无法注入控制器/配置答案

【问题标题】：angular js Custom Service/factory unable to inject in controller/configangular js自定义服务/工厂无法注入控制器/配置
【发布时间】：2016-06-21 01:59:22
【问题描述】：

我正在尝试将自定义工厂注入控制器，但我收到 “Unknown provider: ngResourceProvider 错误消息。

我浏览了各种博客/视频，我无法解决问题，谁能帮我解决这个问题。

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('!');



        } ]);

【问题讨论】：

标签： javascript angularjs dependency-injection

【解决方案1】：

如果您使用的是 ngResource，请包含“angular-resource.js”。您可以在以下链接中找到cdn，Angular ngResource api doc

【讨论】：

试过没用 cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/…
请尝试

【解决方案2】：

您只能在 .config 中注入提供程序。尝试将您的 UserService 转变为提供者而不是工厂

【讨论】：

但是我想用工厂不能注入工厂吗？

【解决方案3】：

UserSerivce 是一项服务，因此您不能像提供者一样注入它。您不需要将服务注入 app.config。你可以简单地通过注入控制器来使用它。

【讨论】：

我也无法注入控制器
您是否从 app.config 中删除注入？如果是，那么错误是什么？
如果你能做一个plnkr，那就更容易提供帮助了。

【解决方案4】：

有几件事情出错了。

您将工厂服务传递给您的模块配置，例如提供程序，这是错误的。
ngResource DI 必须用于您的模块而不是工厂。
$resource DI 必须用于工厂

这是plunker 的正确代码。

【讨论】：