2014-12-15 4 views
1

Я только начал изучать AngularJS и пытался использовать $route, чтобы показать разные виды, но получить ошибку в моей консоли. Вот мой код:

index.html

<!Doctype html> 
<html ng-app="approute"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="icon" href=""> 
     <title>Search The Angles: {{people.name}}</title> 
     <link rel="stylesheet" href="css/main.css"> 
     <script type="text/javascript" src="script/jquery-2.1.1.min.js"></script> 
     <script type="text/javascript" src="script/angular.min.js"></script> 
     <script type="text/javascript" src="script/angular-route.js"></script> 
     <script type="text/javascript" src="script/app.js"></script> 
    </head> 
    <body> 
     <input type="text" ng-model="test">{{test | json}} 

     <div ng-view></div> 

     <a href="#/path2">Html2</a> 
    </body> 
</html> 

И мой сценарий выглядит следующим образом:

'use strict'; 

var approute = angular.module("approute", ['ngRoute']); 

approute.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/path2', { 
      templateUrl: "partials/index2.html", 
      controller: "appCountroller" 
     }) 
     .when('/', { 
      templateUrl: "partials/index1.html", 
      controller: "appCountroller" 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
}]); 

approute.controller("appCountroller", function($scope, $http) { 
    $http.get('../json/data.json').success(function(response) { 
     $scope.people = response; 
    }); 
}); 

index1 и index2.html в следующем формате:

<div> 
    <ul> 
     <li ng-repeat="person in people | filter:test">{{person.name}}</li> 
    </ul> 
</div> 

и index2.html

<div> 
    <ul> 
     <li ng-repeat="person in people | filter:test">{{person.name}}-{{person.position}}</li> 
    </ul> 
</div> 

Когда я попытался открытие в браузере, я получаю следующее сообщение об ошибке на моей консоли:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.27/ $injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective at Error (native)...

со ссылкой на мои angular.min.js file

Я проверил все, что мог, но не заметил, что вызывает ошибку.

+0

Можете ли вы обновить плункер для этого? Это должно работать –

+0

с вашей ошибки, вы используете угловой 1.2.27. Может возникнуть ошибка, потому что вы используете другую версию angular.route. Можешь подтвердить? btw [здесь] (http://plnkr.co/edit/sGYLfNS5H1H3yFBRUcYB?p=preview) является рабочим примером вашего кода. – dhavalcengg

ответ

1

Кажется, что зависимости не могут быть разрешены. В этом случае это выглядит примерно так: templateRequestProvider в ng-route.

Убедитесь, что версия углового маршрута и версия углового не противоречат друг другу, я думаю, это может быть так.

+0

Да, сейчас работает. благодаря –