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

＆＃34;无法实例化控制器HomeController＆＃34;

控制台中出现

错误。不知道我错过了什么/这个代码有什么问题。我应该使用$resource代替$http吗？

以下是我如何通过＆＃39; trooNewsServices＆＃39;进入我的主要模块：

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
        });
    });

以下是我尝试注入＆＃39;文章＆＃39;进入我的一个控制器：

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

以下是我在AppController＆＃39;中设置路由的方法：

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

Inside your HomeController, you are executing this.articles = Articles.query();, but your Articles service doesn't define any query function.

Instead, your service is just immediately executing an HTTP GET request upon creation. Not sure why this would lead to your error, but it is a red flag.

Try changing your Articles service to the following:

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

Answer 2

我在不同条件下遇到了相同的错误消息。就我而言，这是因为我在我的依赖项中引用了$ 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

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

2 个答案: