获取:错误:[$ injector:unpr]未知提供商:Chrome上出错

时间:2015-01-31 16:43:09

标签: angularjs google-chrome angular-routing

我是AngularJS的新手,在Chrome上运行AngularJS教程7 https://docs.angularjs.org/tutorial/step_07时遇到问题。在Chrome上,我在控制台上收到以下错误:

angular.js:10126 Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
http://errors.angularjs.org/1.2.28/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective
    at VALIDITY_STATE_PROPERTY (angular.js:78)
    at angular.js:3801
    at Object.getService [as get] (angular.js:3929)
    at angular.js:3806
    at getService (angular.js:3929)
    at Object.invoke (angular.js:3956)
    at angular.js:3807
    at getService (angular.js:3929)
    at Object.invoke (angular.js:3956)
    at angular.js:5716

截图

enter image description here

同时网页/ AngularJS可以在Internet Explorer和Opera上运行,所以我想这可能是某种特定于Chrome的问题?下面是同一页面的IE视图,它可以正常工作。

enter image description here

我使用的代码与本教程可用的代码相同,但我已经列出了app.js和controllers.js文件,以防万一。

app.js

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);


phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

controllers.js

'use strict';

/* Controllers */


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

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
  function($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
  }]);

bower.json

{
  "name": "angular-phonecat",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.3.x",
    "angular-mocks": "1.3.x",
    "jquery": "~2.1.1",
    "bootstrap": "~3.1.1",
    "angular-route": "1.3.x"
  }
}

目前,我正在阅读包含路由的教程nro 7。教程1-6没有使用路由,并且页面在Chrome上运行正常。所以问题可能与路由有关。

任何帮助将不胜感激。非常感谢提前。

1 个答案:

答案 0 :(得分:1)

看起来它不能用于 Chrome 的问题不仅仅与浏览器有关;这也是 Node.js 的一个问题。本教程指示使用Node.js作为本教程的Web服务器,该工作正常,直到教程nro 7,它具有用于部分视图的路由。现在看起来由于某种原因,当Node.js用作Web服务器时,路由在Chrome上不起作用。当我尝试将Apache而不是Node.js用于Web服务器时,我发现了这一点。在 Apache 上托管教程Web项目后,路由开始在 Chrome 上正常运行。所以看起来这个问题与Chrome和Node.js有关。

我的 Node.js 版本 v0.10.33 (因此它不是最新版本)。

以下是 Apache 上托管网页时 Chrome 的屏幕截图。

enter image description here