Директива 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 директива

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

ui-sref

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

<a ui-sref="app"> </a>

<a ui-sref="app.about"> </a>

<a ui-sref="app.books"> </a>

  • Відповідне посилання  буде генеруватись під час компіляції
<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"

AngularJS: Templates. ngInclude. SPA. ngRoute. UI-Router.

By Ievgen Liubarshchuk

Made with Slides.com

AngularJS: Templates. ngInclude. SPA. ngRoute. UI-Router.

AngularJS: Templates. ngInclude. SPA. ngRoute. UI-Router.

  • 1,765

More from Ievgen Liubarshchuk