Ошибка 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, время: 22:35. |