javascript - AngularJS 新路由器无法实例化 Controller

Question

我正在尝试创建一项服务以在我的 Angular 应用程序中使用，该服务使用 $http 从 .json 文件中提取数据。这是工厂的样子:

var trooNewsServices = angular.module('trooNewsServices', []);

trooNewsServices.factory('Articles', ['$http',
  function($http){
    $http.get('resources/articles.json').success(function(data) {
          return data;
    });
  }]);

我将 trooNewsServices 依赖项传递到我的模块声明中。我尝试在我的新 Articles 服务中传递的任何 Controller ，我都会得到一个

"Could not instantiate controller HomeController"

控制台出错。不确定我遗漏了什么/这段代码有什么问题。我应该使用 $resource 而不是 $http 吗？

这是我将“trooNewsServices”传递到我的主模块的方式:

var TrooNews = angular
    .module('TrooNews', ['ngMaterial', 'ngNewRouter', 'trooNewsServices'])
    .config(function($mdThemingProvider) {
        $mdThemingProvider
            .theme('default')
            .primaryPalette('indigo')
            .accentPalette('pink');
    })
    .config(function($locationProvider) {
        $locationProvider.html5Mode({
            enabled: false,
            requireBase: false
        });
    });

这是我尝试将“文章”注入(inject)我的 Controller 之一的方法:

TrooNews.controller('HomeController', ['Articles', 
    function(Articles) {
        this.name = 'Troo News';
        this.articles = Articles.query();
    }]);

下面是我在“AppController”中设置路由的方式:

TrooNews.controller('AppController', function($router, $mdSidenav, $mdToast, $parse, $http) {
    $router.config([{
        path: '/',
        component: 'home'
    }, {
        path: '/home',
        component: 'home'
    }, {
        path: '/about',
        component: 'about'
    }, {
        path: '/settings',
        component: 'settings'
    }, {
        path: '/article/:id',
        component: 'article'
    }]);

    this.toggleSidenav = function(menuId) {
        $mdSidenav(menuId).toggle();
    };

    this.navigateTo = function(link) {
        var parts = link.match(/^(.+?)(?:\((.*)\))?$/);
        var url;
        if (parts[2]) {
            url = '.' + $router.generate(parts[1], $parse(parts[2])());
        } else {
            url = '.' + $router.generate(parts[1]);
        }

        $mdToast.show($mdToast.simple().content('Navigate To: ' + url).position('bottom right'));
        $router.navigate(url);
        this.toggleSidenav('left');
    };
});

Answer 1

在您的 HomeController 中，您正在执行 this.articles = Articles.query();，但是您的 Articles 服务没有定义任何查询函数。

相反，您的服务只是在创建后立即执行 HTTP GET 请求。不确定为什么这会导致您的错误，但这是一个危险信号。

尝试将您的 Articles 服务更改为以下内容:

trooNewsServices.factory('Articles', ['$http',
  function Articles($http){
    this.query = function() {
      return $http.get('resources/articles.json')
        .then(function(response) { return response.data; });
    };
}]);