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

AngularJS - Controller and Service in one File

本文关键字：控制器 服务 文件 一个 AngularJS      更新时间：2023-09-26

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

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>

这是控制台错误：

错误： [$injector：unpr] http://errors.angularjs.org/1.3.14/$injector/unpr?p0=MenusProvider%20%3C-%20Menus%20%3C-%20menuCtrl 错误（本机） 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417 在 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） 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:38:81 在 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） 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:58:476 在 S （https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:408）

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

此外，我建议您使用数组表示法，以防您计划最小化代码。

您的控制器线应如下所示：

.controller('menuCtrl', ['$http', 'menuService', function($http, menuService){
...
}]);
相关文章：