Question

我正在尝试关注youtube上的教程

具有角度js的Asp.net MVC 6 web api ： Link to video

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

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

angular.js：13920错误：[$ injector：unpr]未知提供者：QuotesProvider＆lt; - 引号＆lt; - quotesController

的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很新，我发现其他答案似乎没有帮助我。

Answer 1

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

中阅读所有相关信息

在app.js中试试这个：

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

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

        // Custom modules 
        "quotesService"

        // 3rd Party Modules

    ])

AngularJS - 错误：未知提供者

1 个答案: