Директива ngInclude

Директиви використовуються для компіляції та включення зовнішнього HTML-фрагменту
Використання:
<div ng-include=“’books.html’”></div>
<ng-include src=“’books.html’”></ng-include>
Створює новий scope

Single Page Application

Веб-додаток або веб-сайт, який розміщений на одній сторінці
Немає необхідності перезавантаження всієї сторінки
Більшість ресурсів підкачується після одного завантаження сторінки
«Перемальовуються» лише частини сторінки при необхідності

Проблеми в SPA

Пошукова оптимізація
Поділ відповідальності між клієнтом і сервером
Ведення історії
Аналітика
Прискорення початкового завантаження сторінки

Роль клієнта і сервера в SPA

Сервер

Слугує для отримання даних з використанням REST API
Видача статичних HTML сторінок, Angular шаблони і ресурси

Рендерінг виду повністю на стороні клієнта

Шаблонування і маршрутизація

$location сервіс

Надає поточний URL в адресному рядку браузера:

Дивиться і спостерігає URL
Змінює URL

Синхронізує URL з браузером, коли користувач:

Змінює адресний рядок
Клацає кнопки вперед / назад
Клацає за посиланням

Дозволяє керувати хеш частиною URL

Angular ngRoute Module

Керує взаємодією між сервісом $location та видом
Dependency injection:

angular.module('tolkienApp', ['ngRoute'])

$routeProvider

Створює взаємодію між роутами та хендлерами
Хендлери описуються:

- URL-адресою шаблону

- контролером

Конфігурація $routeProvider

angular.module('tolkienApp', ['ngRoute'])
.config( function($routeProvider) {
$routeProvider
.when('/callus', {
templateUrl : 'callus.html’,

controller : 'ContactController'
})
.when('/books', {
templateUrl : 'books.html',

controller : 'BooksController'
})
.otherwise('/callus');
});

$routeParams

books.html:
<div class="media-left media-middle">
<a ng-href="#/books/{{book.id_}}">

BookInfoController:
.controller('BookInfoController', ['$scope', '$routeParams',
'bookService', function($scope, $routeParams, bookService) {
$scope.book= bookService.getBook( parseInt($routeParams.id,10));
}]);

<script src="vendor/angular-route/angular-route.min.js"></script>

.config(  function($routeProvider) {
	$routeProvider
                .when('/about', { 
				templateUrl : 'about.html',
				controller : ''
		  })
		 .when('/callus', { 
				templateUrl : 'callus.html',
				controller : 'ContactController'
		  })
		  .when('/books', { 
				templateUrl : 'books.html',
				controller : 'BooksController'
		  })
		  .otherwise('/about');
})

.when('/books/:id', { 
	templateUrl : 'bookInfo.html',
	controller : 'bookInfoController'
})

<section id="services">
<div class="container">
	<div class="row">
		<div class="col-lg-12 text-center">
			<a href="#/books" class="btn btn-default btn-xl sr-button"><< All Books</a>
			<h2 class="section-heading">Book Information</h2>
			<hr class="primary">
		</div>
	</div>
</div>

<div class="container">
	<div class="row" ng-controller="bookInfoController">
		<div class="col-lg-12 col-md-12">
			<div class="media-list">
				<div class="media">
					<div class="media-left media-top">
						<a href="#">
							<img class="media-object img-thumbnail" ng-src={{book.image}} alt="book" />
						</a>
					</div>
					<div class="media-body">
						<h2 class="media-heading">{{book.name}}
							<span class="label label-danger label-xs">{{book.label}}
							</span>
							<span class="badge">{{book.price | currency}}
							</span>
						</h2>
						<p>{{book.description}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>

.controller('bookInfoController', [ '$scope', '$routeParams', 'booksService', 
    function($scope, $routeParams, booksService){
				
	$scope.book = booksService.getBook( parseInt($routeParams.id,10) );
	
}])

this.getBook = function(id) {
    return books[id];
}

Обмеження ngRoute

Тільки один вид допускається на одній сторінці
- Немає підтримки декількох видів

- Немає підтримки вкладених видів
Види прив'язані до URL-адреси

Router через State

.state('app.about', {
url:'about',
views: {
'content@': {

templateUrl : 'views/about.html’,

controller : 'AboutController'

}
}
});
$urlRouterProvider.otherwise('/');
});

config( function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url:'/',
views: {
'header': { templateUrl : 'views/header.html’ },

'content': { templateUrl : 'views/content.html’ },
'footer': { templateUrl : 'views/footer.html’ }
}
})

uiView директива

ui-sref

Використовуємо ui-sref=“state”, щоб вказати в який стан перейти при натисканні

Відповідне посилання буде генеруватись під час компіляції

<script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>

<div ui-view="header"></div>

<div ui-view="content"></div>

<div ui-view="footer"></div>

<li>
	<a class="page-scroll" ui-sref="app.about">About</a>
</li>
<li>
	<a class="page-scroll" ui-sref="app.books">Books</a>
</li>
<li>
	<a class="page-scroll" href="#gallery">Gallery</a>
</li>
<li>
	<a class="page-scroll" ui-sref="app.callus">Contact</a>
</li>

header {
	min-height : 700px;
}

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

	.state('app', {
		url:'/',
		views: {
			'header': {
				templateUrl : 'views/header.html',
			},
			'content': {
				templateUrl : 'views/about.html',
			},
			'footer': {
				templateUrl : 'views/footer.html',
			}
		}

	})

	.state('app.about', {
		url:'about',
		views: {
			'content@': {
				templateUrl : 'views/about.html',                
			}
		}
	})

	.state('app.callus', {
		url:'callus',
		views: {
			'content@': {
				templateUrl : 'views/callus.html',
				controller  : 'ContactController'                  
			}
		}
	})

	.state('app.books', {
		url: 'books',
		views: {
			'content@': {
				templateUrl : 'views/books.html',
				controller  : 'booksController'
			}
		}
	})

	.state('app.bookinfo', {
		url: 'books/:id',
		views: {
			'content@': {
				templateUrl : 'views/bookInfo.html',
				controller  : 'bookInfoController'
		   }
		}
	});

$urlRouterProvider.otherwise('/');
})

ui-sref="app.bookinfo({id: book.id_})"

ui-sref="app.books"