AngularJS - Виды: Путеводитель для начинающих

Здравствуйте, будущие программисты! Сегодня мы окунемся в захватывающий мир видов AngularJS. Не волнуйтесь, если вы еще ни разу не писали строку кода - я буду вашим доброжелательным проводником в этом путешествии, как и для countless студентов за годы моей преподавательской деятельности. Так что возьмите чашку кофе (или чая, если это ваше дело), и давайте начнем!

AngularJS - Views

Что такое Вид в AngularJS?

Прежде чем мы углубимся в Details, давайте поймем, что такое Вид в AngularJS. Представьте Вид как "лицо" вашего приложения - это то, что видит и с чем взаимодействует пользователь. В AngularJS, Вид является по сути HTML шаблоном, который отображает данные и реагирует на действия пользователя.

Теперь давайте рассмотрим инструменты, которые AngularJS предоставляет нам для работы с Видами.

Директива ng-view: Ваше окно в динамическое содержимое

Что такое ng-view?

Директива ng-view resembles_specialное окно в вашем приложении AngularJS. Это место, где ваше приложение отображает различное содержимое в зависимости от текущего маршрута (или URL) без перезагрузки всей страницы. Круто, правда?

Как использовать ng-view

Использование ng-view просто, как добавление его к элементу в вашем HTML. Вот пример:

<div ng-view></div>

Вот и все! Этот div теперь будет действовать как контейнер, где AngularJS будет загружать различные виды в зависимости от текущего маршрута.

Реальный пример

Давайте представим, что мы создаем простой веб-сайт для книжного магазина. Мы можем иметь главную страницу, которая выглядит так:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Мой классный книжный магазин</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Добро пожаловать в мой классный книжный магазин</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>

В этом примере, <div ng-view></div> будет местом, где будут отображаться различные страницы нашего книжного магазина (например, список книг, индивидуальные данные книги и т.д.).

Директива ng-template: Ваш чертеж для Видов

Что такое ng-template?

Если ng-view - это окно, то ng-template - это как чертеж для того, что идет в это окно. Он позволяет вам определять повторно используемые шаблоны, которые AngularJS может использовать для заполнения ваших видов.

Как использовать ng-template

Вы используете ng-template, давая ему ID, который вы можете затем сослаться в вашей конфигурации маршрутов. Вот простой пример:

<script type="text/ng-template" id="book-list.html">
<h2>Наши книги</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>

Этот шаблон определяет список книг, который мы можем отобразить в нашем виде.

Сервис $routeProvider: Ваш диспетчер трафика

Что такое $routeProvider?

Сервис $routeProvider resembles_диспетчер трафика для вашего приложения. Он решает, какой вид отображать в зависимости от текущего URL.

Как использовать $routeProvider

Вы обычно настраиваете $routeProvider на этапе конфигурации вашего приложения. Вот пример:

var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Добро пожаловать в наш книжный магазин!</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

В этой конфигурации:

Когда URL просто '/', он отображает欢迎消息.
Когда URL '/books', он использует шаблон 'book-list.html' и контроллер 'BookListController'.
Для любого другого URL, он перенаправляет на '/'.

Полный пример

Давайте объединим все в более полный пример нашего книжного приложения:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Мой классный книжный магазин</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Добро пожаловать в мой классный книжный магазин</h1>
<nav>
<a href="#!">Главная</a>
<a href="#!books">Книги</a>
</nav>
<div ng-view></div>

<script type="text/ng-template" id="book-list.html">
<h2>Наши книги</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} by {{book.author}}</li>
</ul>
</script>

<script>
var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Добро пожаловать в наш книжный магазин!</h2><p>Проверьте нашу потрясающую коллекцию книг.</p>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

app.controller('BookListController', function($scope) {
$scope.books = [
{title: 'Убить пересмешника', author: 'Harper Lee'},
{title: '1984', author: 'George Orwell'},
{title: 'Великий Гэтсби', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>

Что здесь происходит?

Мы создаем базовую HTML структуру с ссылками для навигации между видами.
Мы определяем шаблон для нашего списка книг с помощью ng-template.
Мы настраиваем наши маршруты с помощью $routeProvider.
Мы создаем контроллер для предоставления данных для нашего списка книг.

Когда вы запустите это приложение и кликните на ссылку "Книги", вы увидите список книг в ng-view div. Магия, правда?

Заключение

И вот мы и добрались до этого,folks! Мы сделали первые шаги в мир видов AngularJS. Мы узнали о ng-view, ng-template, и $routeProvider, и как они работают вместе для создания динамических одностраничных приложений.

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

Директива/Сервис	Назначение	Пример использования
ng-view	Определяет, где отображать текущий вид	`<div ng-view></div>`
ng-template	Определяет повторно используемые шаблоны	`<script type="text/ng-template" id="template-name.html">...</script>`
$routeProvider	Конфигурирует маршруты для приложения	`$routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' });`

Счастливого кодирования, будущие мастера AngularJS!

Credits: Image by storyset