Ошибка Uncaught Error: [$injector:modulerr]
Вобщем гугл показал, что такая ошибка не редкость, только лечили ее везде разными способами, а так как я не очень понимаю, что там происходит, то хочу сам разобраться. Индексная страница:
<!doctype html> <html ng-app="usercat"> <head> <title>My Angular App</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="UserListCtrl"> ... </body> </html> Файл app.js angular.module('usercat', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/messages', { templateUrl: 'partials/messages.html', controller: 'UserListCtrl'}). otherwise({ redirectTo: '/' }); }]); На всяк случай контроллер: function UserListCtrl($scope) { $scope.users = [ ... ]; ... } В директории partials/messages лежит простая страница с текстом. |
Царь Леонид, для разборов нужна кагбе модель на которой и другие могут получить аналогичную проблему... А ты пока показал какие-то огрызки.
Их даже в кучу не собрать... :no: |
ksa,
Полностью с тобой согласен, просто я думал, что где-то уж явно накосячил и это сразу будет видно:) Вот ссылка на песочницу http://learn.javascript.ru/play/xj4Kkb, все работает до тех пор, пока не указать модуль <html ng-app="usercat"> |
Цитата:
angular.module('phonecat', []). 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' }); }]); http://angular.ru/tutorial/step_07 Заметь куда делается redirectTo, а он делается на, описанную выше, маску хеш-фрагмента. А, что у тебя? Цитата:
|
Цитата:
|
Начнем с работающего примера... :)
<!doctype html> <html ng-app> <head> <title>My Angular App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script type='text/javascript'> function UserListCtrl($scope) { $scope.users = [ { "name": "Homer S.", "phone": "(999)321-467", "message": "Сообщение на внутренней странице Homer S." }, { "name": "Bart S.", "phone": "(999)821-568", "message": "Сообщение на внутренней странице Bart S." }, { "name": "Lisa S.", "phone": "(999)865-234", "message": "Сообщение на внутренней странице Lisa S." }, { "name": "Alex V.", "phone": "(999)865-284", "message": "Сообщение на внутренней странице Alex V." } ]; $scope.orderProp = "count";/*сортировка модели при открытии страницы*/ $scope.ordering = function(Name){/* функция сортировки модели */ $scope.orderProp = Name; }; $scope.remove = function(item){/*удаление объекта из модели*/ var index = $scope.users.indexOf(item) $scope.users.splice(index, 1) }; $scope.addUser = function(){/*добавление элемента в модель*/ $scope.users.push({ name:$scope.addName, phone:$scope.addPhone, message:$scope.addMessage }); $scope.addName = '';/* reset поля имени*/ $scope.addPhone = '';/*reset поля телефона*/ $scope.addMessage = '';/*reset поля сообщения*/ }; }; </script> </head> <style> th.change{ cursor:pointer; color:blue; } th.change:hover{ text-decoration:underline; } .container{ width:900px; margin:0 auto; } </style> <body ng-controller='UserListCtrl'> <div> <div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-bordered"> <th class="change" ng-click="ordering('article')"> По номеру </th> <th class="change" ng-click="ordering('name')"> По имени </th> <th class="change" ng-click="ordering('phone')"> По телефону </th> <th> Всего пользователей:{{users.length}} </th> <tr ng-repeat="user in users | orderBy:orderProp"> <td>{{$index+1}}</td> <td><a href="#/messages">{{user.name}}</a></td> <td>{{user.phone}}</td> <td><input value="Удалить" type="button" ng-click="remove($index)"></td> </tr> </table> <div class="col-md-12"> <form ng-submit="addUser()" class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Имя</label> <input ng-model="addName" type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Телефон</label> <input ng-model="addPhone" class="form-control" id="exampleInputEmail2" placeholder="(999)333-444"> </div> <div class="form-group"> <textarea ng-model="addMessage" class="form-control" id="exampleInputEmail3" placeholder="Введите ваше сообщение..."></textarea> </div> <button type="submit" class="btn btn-default">Добавить</button> </form> </div> </div> </div> </div> </div> </body> </html> |
Далее в первоисточнике помимо
<script src="bower_components/angular/angular.js"></script> Подключают еще два скрипта! <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> Коих у тебя нет. Видать без них никакой маршрутизации не получится. |
Такая тема, начиная с версии 1.1.6 надо подключать ngRoute, в заголовке индекс.хтмл указываем
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> В модуле (у меня файл app.js) указываем роутер angular.module('usercat', ['ngRoute']). Ошибка не вылазит, но и перехода не происходит (это уже наверное мой косяк где-то, сегодня мой второй день знакомства с ангуляром, так что мне можно)) .ksa спасибо за участие. |
Цитата:
|
Часовой пояс GMT +3, время: 12:34. |