CODEWITHSUNDEEP
angularjsasp.net-mvc
Jotothehan
Jotothehan

Reputation: 25

AngularJS - Error: Unknown provider

I'm trying to follow a tutorial on youtube

Asp.net MVC 6 web api with angular js: Link to video

But now half way through the tutorial I've run into a problem

The error I get in the browser console is:

angular.js:13920 Error: [$injector:unpr] Unknown provider: QuotesProvider <- Quotes <- 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)
        {
        }
    }
}

I was hoping you guys could help me find the error. I'm quite new at Angular and other answers I've found didn't seem to help me.

Upvotes: 1

Views: 582

Answers (1)

Kraken
Kraken

Reputation: 5870

This error is essentially complaining that it can't locate the function you declared or its parameters. In this case, it is complaining that it cannot inject Quotes. The first issue I can see is that you have not required ngResource in your app. This would cause a failure to instantiate the controller, and most likely trigger this unknown provider error. You can read all about it in the docs

Try this in app.js:

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

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

        // Custom modules 
        "quotesService"

        // 3rd Party Modules

    ])

Upvotes: 1

Related Questions