AngularJS - 错误：未知的提供者答案

【问题标题】：AngularJS - Error: Unknown providerAngularJS - 错误：未知的提供者
【发布时间】：2016-08-17 20:07:11
【问题描述】：

我正在尝试学习 youtube 上的教程

带有 Angular js 的 Asp.net MVC 6 web api： Link to video

但是现在教程进行到一半我遇到了一个问题

我在浏览器控制台中得到的错误是：

angular.js:13920 错误：[$injector:unpr] 未知提供者：QuotesProvider

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <title>My Quotes App</title>

    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-resource/angular-resource.js"></script>
    <script src="lib/angular-route/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body ng-cloak>
    
    <div ng-controller="quotesController">
        <h2>List of Quotes</h2>
        <ul>
            <li ng-repeat="quote in quotes">
                <p>"{{quote.Content}}" - {{quote.Author}}</p>
            </li>
        </ul>
    </div>

</body>
</html>

app.js

(function () {
    'use strict';

    angular.module('app', [
        // Angular modules 
        'ngRoute',

        // Custom modules 
        "quotesService"

        // 3rd Party Modules
        
    ]);

})();

quotesController.js

(function () {
    'use strict';

    angular
        .module('app')
        .controller('quotesController', quotesController);

    quotesController.$inject = ['$scope', 'Quotes']; 

    function quotesController($scope, Quotes) {

        $scope.quotes = Quotes.query();
    }
})();

quotesService.js

(function () {
    'use strict';

    var quotesService = angular.module('quotesService', ['ngResource']);

    quotesService.factory('Quotes', ['$resource', function ($resource) {

        return $resource('/api/quotes/', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });

    }]);
})();

QuotesController.cs (ASP.NET)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using MyApp.models;

// For more information on enabling Web API for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

namespace MyApp.api
{
    [Route("api/[controller]")]
    public class QuotesController : Controller
    {
        // GET: api/values
        [HttpGet]
        public IEnumerable<Quote> Get()
        {
            return new List<Quote> {
                new Quote {Id = 1, Content = "Happy Happy Happy", Author = "Leonardo DiCaprio" },
                new Quote {Id = 2, Content = "Smile to life and life smiles back at you", Author = "Liam Bison" },
                new Quote {Id = 3, Content = "You are your own Happy Blacksmith", Author = "Joyce Cammi" }
            };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody]string value)
        {
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

我希望你们能帮我找出错误。我是 Angular 的新手，我发现的其他答案似乎对我没有帮助。

【问题讨论】：

我没有看到引用的 js 文件。
你真的在加载quotesController.js吗？根据您的示例，它看起来不像...将其添加到 <head> 标签：<script src="quotesController.js"></script>
在教程中，他没有链接到quotesController.js，它对他有用——但我现在尝试了链接到它的地方，仍然给出同样的错误
@Jotothehan，如果你没有像 Todd Miller 所说的那样添加脚本标签，angular 将不知道quotesController。它就像任何其他 javascript 文件一样。

标签： angularjs asp.net-mvc

【解决方案1】：

这个错误本质上是抱怨它找不到你声明的函数或其参数。在这种情况下，它抱怨它不能注入报价。我可以看到的第一个问题是您的应用程序中不需要 ngResource。这将导致无法实例化控制器，并且很可能会触发此未知提供程序错误。您可以在docs

中阅读所有相关信息

在 app.js 中试试这个：

angular.module('app', [
        // Angular modules 
        'ngRoute',

//////////////////
        'ngResource',
///////////////insert this ^^^^

        // Custom modules 
        "quotesService"

        // 3rd Party Modules

    ])

【讨论】：

这似乎有效 - 我现在在控制台中没有收到任何错误 - 它没有加载任何引号，但这可能是另一个错误:)