CODEWITHSUNDEEP
javascriptangularjsdependency-injection
larz
larz

Reputation: 871

AngularJS - Controller and Service in one File

why is this simple code not working:

angular.module('menuApp', [])


.factory('menuService', function($http){

    var Menus = {};

    Menus.get = function() {
            return $http.get('/api/foods');
        };

    return Menus;

})

 .controller('menuCtrl', function($http, Menus){

var vm = this;
vm.headline = "Menu Card";


Menus.get()
    .success(function(data) {
        vm.menus = data;
    });

});

HTML:

<div ng-controller="menuCtrl as menu">
        <h1>{{menu.headline}}</h1>
        <p>Search by catergory:</p>
        <input type="text" ng-model="search.category">
        <div class="ui divider"></div>

        <div class="ui grid">
          <div class="four wide column" ng-repeat="menu in menu.menus | filter: search">
            <div class="ui segment">
                <h3>{{menu.category}}</h3>
                <h2>{{menu.name}}</h2>
                <p>{{menu.desc}}</p>
          </div>
        </div>
      </div>
    </div>

this is the console error:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.14/$injector/unpr?p0=MenusProvider%20%3C-%20Menus%20%3C-%20menuCtrl at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417 at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:38:7 at Object.d [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:36:13) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:38:81 at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:36:13) at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:36:283) at $get.w.instance (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:75:451) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:58:476 at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:408)

Upvotes: 1

Views: 207

Answers (1)

Michael Petito
Michael Petito

Reputation: 13161

Angular will look up your service by matching the name of the factory registration, so your parameter to your controller must have the name menuService.

Also, I'd recommend you use array notation in case you ever plan on minimizing your code.

Your controller line should look like:

.controller('menuCtrl', ['$http', 'menuService', function($http, menuService){
...
}]);

Upvotes: 0

Related Questions