Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2015, 12:39
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 214

Ошибка 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 лежит простая страница с текстом.

Последний раз редактировалось Царь Леонид, 13.02.2015 в 12:42.
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2015, 13:27
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,196

Царь Леонид, для разборов нужна кагбе модель на которой и другие могут получить аналогичную проблему... А ты пока показал какие-то огрызки.
Их даже в кучу не собрать...
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2015, 13:41
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 214

ksa,
Полностью с тобой согласен, просто я думал, что где-то уж явно накосячил и это сразу будет видно Вот ссылка на песочницу http://learn.javascript.ru/play/xj4Kkb, все работает до тех пор, пока не указать модуль <html ng-app="usercat">

Последний раз редактировалось Царь Леонид, 13.02.2015 в 13:43.
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2015, 13:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,196

Сообщение от Царь Леонид Посмотреть сообщение
Файл app.js
angular.module('usercat', []).
  config(['$routeProvider', 
  function($routeProvider) {
    $routeProvider.
        when('/messages', {
          templateUrl: 'partials/messages.html',
          controller: 'UserListCtrl'}).
        otherwise({
          redirectTo: '/'
        });
  }]);
Давай сличим т.с. с примером из первоисточника...

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, а он делается на, описанную выше, маску хеш-фрагмента.

А, что у тебя?
Сообщение от Царь Леонид Посмотреть сообщение
otherwise({
          redirectTo: '/'
        });
Такая маска хеш-фрагмента у тебя не описана.
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2015, 13:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,196

Сообщение от Царь Леонид
все работает до тех пор, пока не указать модуль <html ng-app="usercat">
Значит все дело в его неправильном описании или инициализации.
Ответить с цитированием
  #6 (permalink)  
Старый 13.02.2015, 14:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,196

Начнем с работающего примера...

<!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>
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2015, 14:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,196

Далее в первоисточнике помимо

<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>

Коих у тебя нет. Видать без них никакой маршрутизации не получится.
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2015, 14:50
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 214

Такая тема, начиная с версии 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 спасибо за участие.
Ответить с цитированием
  #9 (permalink)  
Старый 13.02.2015, 16:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,196

Сообщение от Царь Леонид
спасибо за участие
Ты потом сваргань пример "для посмотреть". А то ведь я то же его изучаю...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка: Uncaught TypeError lokifc Общие вопросы Javascript 2 28.09.2014 23:58
Ошибка: Uncaught TypeError: Cannot set property 'innerHTML' of null dolte Events/DOM/Window 4 16.09.2013 10:54
Ошибка Uncaught TypeError: Cannot read property 'elements' of undefined Allality Общие вопросы Javascript 14 29.07.2012 18:35
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
То-ли лыжи не едут, толи... возможно ошибка в коде. AzriMan Общие вопросы Javascript 19 18.05.2009 16:07