Jotothehan Jotothehan - 1 year ago 195
AngularJS Question

AngularJS - Error: Unknown provider

I'm trying to follow a tutorial on youtube 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


<!DOCTYPE html>
<html ng-app="app">
<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>
<body ng-cloak>

<div ng-controller="quotesController">
<h2>List of Quotes</h2>
<li ng-repeat="quote in quotes">
<p>"{{quote.Content}}" - {{quote.Author}}</p>



(function () {
'use strict';

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

// Custom modules

// 3rd Party Modules




(function () {
'use strict';

.controller('quotesController', quotesController);

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

function quotesController($scope, Quotes) {

$scope.quotes = Quotes.query();


(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

namespace MyApp.api
public class QuotesController : Controller
// GET: api/values
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
public string Get(int id)
return "value";

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

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

// DELETE api/values/5
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.

Answer Source

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 

///////////////insert this ^^^^

        // Custom modules 

        // 3rd Party Modules