Форум

Царь Леонид · #1 (**permalink**) 13.02.2015, 12:39

Вобщем гугл показал, что такая ошибка не редкость, только лечили ее везде разными способами, а так как я не очень понимаю, что там происходит, то хочу сам разобраться. Индексная страница:

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

ksa · #2 (**permalink**) 13.02.2015, 13:27

Царь Леонид, для разборов нужна кагбе модель на которой и другие могут получить аналогичную проблему... А ты пока показал какие-то огрызки.
Их даже в кучу не собрать...

Царь Леонид · #3 (**permalink**) 13.02.2015, 13:41

ksa,
Полностью с тобой согласен, просто я думал, что где-то уж явно накосячил и это сразу будет видно

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

ksa · #4 (**permalink**) 13.02.2015, 13:53

Сообщение от Царь Леонид

Файл 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: '/'
        });

Такая маска хеш-фрагмента у тебя не описана.

ksa · #5 (**permalink**) 13.02.2015, 13:54

Сообщение от Царь Леонид

все работает до тех пор, пока не указать модуль <html ng-app="usercat">

Значит все дело в его неправильном описании или инициализации.

ksa · #6 (**permalink**) 13.02.2015, 14:32

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

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

ksa · #7 (**permalink**) 13.02.2015, 14:46

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

<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

Такая тема, начиная с версии 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 спасибо за участие.

ksa · #9 (**permalink**) 13.02.2015, 16:13

Сообщение от Царь Леонид

спасибо за участие

Ты потом сваргань пример "для посмотреть". А то ведь я то же его изучаю...

Форум

Справочник

Discord чат

Курсы javascript