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

AngularJS new router could not instantiate controller

本文关键字：实例化 控制器 新路 路由器 AngularJS      更新时间：2023-09-26

我正在尝试创建一个服务以在整个 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服务中传递的任何控制器，我都会得到一个

"无法实例化控制器主控制器"

控制台中的错误。不确定我缺少什么/此代码有什么问题。我应该使用$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();
    }]);

以下是我在"应用控制器"中设置路由的方式：

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

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

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

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

和

我们如何在 angular 1.4 中使用 angular-new-router 观察控制器内的表达式

相关文章：