AngularJS 新路由器无法实例化控制器

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 服务中传递的任何控制器，我都会得到一个

“无法实例化控制器 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
        });
    });

这是我尝试将“文章”注入我的一个控制器的方法：

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

我在不同的条件下遇到相同的错误消息。就我而言，这是因为我在依赖项中引用了 $scope （我试图打破的旧习惯）。就我而言，我没有使用 $scope 并且可以轻松删除引用。这清除了我的错误。检查您的代码中的 $scope 引用，看看是否可以修复它。

https://github.com/angular/router/issues/313

和

How can we watch expressions inside a controller in angular 1.4 using angular-new-router

Answer 2

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

相反，您的服务只是在创建时立即执行 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; });
    };
}]);