錯誤：angular.js中的[$ injector：unpr]

我剛開始學習angularjs。我正在嘗試在他們的官方網站上給出的教程。

http://docs.angularjs.org/tutorial/step_08

我試圖做到的，是通過添加路由建立多個視圖。

當我訪問

Home.html中它是完全顯示所有的手機清單，但一旦我點擊鏈接獲得的任何移動的下一個頁面的細節給了我這個錯誤

[$注射器：unpr ]

做公告不存在未知提供商錯誤

和電話detail.html所有的表達，因爲它沒有被評估正在打印。

這裏是我的app.js代碼

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

然後我controller.js代碼

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

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

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

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','$http',function($scope, $routeParams,$http) { 
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) { 
     $scope.phone = data; 
    }); 
}]);

home.html的代碼

<html lang="en" ng-app="phonecatApp"> 
     <head> 
     <title>Hello world example from angular js</title> 
     <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> 
     <link type="text/css" rel="stylesheet" href="css/custom.css"/> 
     <script type="text/javascript" src="scripts/angular.min.js"></script> 
     <script type="text/javascript" src="scripts/angular-route.min.js"></script> 
     <script type="text/javascript" src="scripts/app.js"></script> 
     <script type="text/javascript" src="scripts/controller.js"></script> 
    </head> 
    <body> 
     <div class="row"> 
      <div class="container"> 
       <div ng-view></div> 
      </div> 
     </div> 
    </body> 
</html>

電話list.html代碼 -

<div class="col-lg-12"> 
    <hr> 
    <p class="pull-right col-lg-4"> 
     <input type="text" ng-model="query" class="form-control col-lg-6" placeholder="Search" style="width:auto;"> 
     <select ng-model="orderProp" class="form-control col-lg-6" style="width:auto;"> 
      <option value="name">Alphabetical</option> 
      <option value="age">Newest</option> 
      <option value="-age">Oldest</option> 
     </select> 
    </p> 
    <p class="col-lg-6">Total number of phones: {{phones.length}}</p> 
    <div class="clearfix"></div> 
    <hr> 
    <h3 ng-bind-template="Thumbnail view | Search for : {{query}}">List view</h3> 
    <div class="row"> 
     <div class="col-lg-4" ng-repeat="phone in phones | filter:query | orderBy:orderProp"> 
      <div class="thumbnail"> 
       <a href="#/phones/{{phone.id}}"> 
        <img src="{{phone.imageUrl}}" data-src="{{phone.imageUrl}}" alt="{{phone.name}}"> 
       </a> 
       <div class="caption"> 
        <h3>{{phone.name}}</h3> 
        <p>{{phone.snippet}}</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

電話detail.html代碼 -

<div class="phone-images"> 
    <img ng-src="{{img}}" 
     class="phone" 
     ng-repeat="img in phone.images" 
     ng-class="{active: mainImageUrl==img}"> 
</div> 

<h1>{{phone.name}}</h1> 

<p>{{phone.description}}</p>

來源

2014-02-21 Ravi Kumar

我有這個錯誤，因爲我吞下我的angularJS代碼。 – happyhardik

我明白了問題所在。

這是因爲我從github複製了phone-detail.html中的內容，應該在後面的步驟中進行介紹。在電話詳情有一些代碼，如

這裏checkmark是一個過濾器，但我根本沒有引入過濾器。

所以解決方案是我添加了過濾器。js with content

angular.module('phonecatFilters', []).filter('checkmark', function() { 
    return function(input) { 
    return input ? '\u2713' : '\u2718'; 
    }; 
});

然後在home.html中導入script.js，它工作正常。

所以我犯了兩個錯誤 - 1.在沒有註冊任何過濾器的情況下引入過濾器的代碼。 2.沒有發佈phone-detail.html的整個代碼，以便您可以找出第一個錯誤。

特別感謝@洛倫佐幫我挖掘出這個問題。

來源

2014-02-21 09:02:26

當你與你必須使用它來創建你的控制器的角度知道phonecatController「屬於」 phonecatApp定義的應用程序模塊。

所以只需更換angular.module與phonecatApp.controller

替換該行

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

有了這個

var phonecatControllers = phonecatApp.controller('phonecatControllers', []); 
//------------------------^--------------------^---------------------------

或者你也可以做

angular.module('phonecatApp').controller('phonecatControllers', []);

來源

2014-02-21 07:46:02 Merlin

你的意思是說，控制器沒有創建refrencing phoneCatApp，但它是因爲在home.html＃/手機我得到的第一個控制器（PhoneListCtrl），我能夠顯示所有手機在JSON這只是第二個問題控制器（PhoneDetailCtrl）。無論如何，我嘗試了你的建議，但它在第一頁home.html＃/電話本身出現相同的錯誤。 –

如果從'PhoneDetailCtrl'中刪除'$ routeParams'參數，並用'$ http.get（'phones/dell- streak-7.json'仍然顯示錯誤？ – Merlin

是錯誤仍然存在 –

錯誤：angular.js中的[$ injector：unpr]

回答

相關問題