받기 : 오류 : [$ injector : unpr] 알 수없는 공급자 : Chrome에서 오류가 발생했습니다.

Question

저는 AngularJS에 초보자이며 Chrome에서 실행할 때 https://docs.angularjs.org/tutorial/step_07에 AngularJS 자습서 7에 문제가 있습니다. 크롬에 나는 콘솔에 다음과 같은 오류가 발생합니다 : 웹 페이지/AngularJS와 인터넷 익스플로러와 오페라에서 작동 동시에

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 

스크린 샷

, 그래서 이것은 일부가 될 수 같아요 Chrome 특정 문제의 종류일까요? 아래는 같은 페이지의 IE보기이며 괜찮습니다.

내가 사용하는 코드는 튜토리얼에 사용할 수있는 것과 동일하지만, 난 그냥 아래의 경우에 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" 
    } 
} 

, 나는 t을거야 라우팅을 다루는 hrough 튜토리얼 nro 7. 튜토리얼 1-6은 라우팅을 사용하지 않았고 페이지는 Chrome에서 정상적으로 작동했습니다. 따라서 문제는 라우팅과 관련이있을 수 있습니다.

도움을 주시면 감사하겠습니다. 미리 감사드립니다.

Answer 1

크롬에서 작동하지 않는 문제는 브라우저와 관련이있을뿐만 아니라, 또한 Node.js의 문제였습니다. 이 튜토리얼에서는 Node.js를 튜토리얼의 웹 서버로 사용하도록 지시합니다.이 튜토리얼은 튜토리얼 nro 7까지 부분적 뷰를 위해 라우팅이 사용 된 상태까지 잘 작동합니다. 이제는 Node.js가 웹 서버로 사용되는 경우 Chrome에서 라우팅이 작동하지 않는 것처럼 보입니다. 웹 서버에 Node.js 대신 Apache를 사용하려고 시도했을 때이를 발견했습니다. 자습서 웹 프로젝트를 Apache에 호스팅 한 후 라우팅은 크롬에서 올바르게 작동하기 시작했습니다. 문제는 Chrome과 Node.js와 관련이있는 것으로 보입니다.

내 Node.js를 버전은 v0.10.33이다 (그래서 가능한 최신 버전이 아니었다). 다음은

웹 페이지가 아파치에서 호스팅되는 크롬의 스크린 샷이다.