AngularJS

Question

为什么这个简单的代码不起作用：

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>

这是控制台错误：

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)

Answer 1

Angular 将通过匹配工厂注册的名称来查找您的服务，因此您的控制器参数必须具有名称 menuService.

此外，我建议您use array notation，以防您计划最小化代码。

您的控制器行应该如下所示：

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

AngularJS - 控制器和服务在一个文件中

AngularJS - Controller and Service in one File

javascript

dependency-injection