Підручник AngularJS: Всеосяжне керівництво, частина 1

Зміст

1 Введення в AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $scope
5 Controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic with routing $routeProvider
13 Form Validation
14 communication Server with $http and $resource

1. Введення у AngularJS

Angular — MVW-фреймворк для розробки якісних клієнтських веб-додатків на JavaScript. Він створений і підтримується в Google і пропонує поглянути на майбутнє веба, на те, які нові можливості і стандарти готує для нас.

MVW означає Model-View-Whatever (модель — вид — що завгодно), тобто гнучкість у виборі шаблонів проектування при розробці додатків. Ми можемо вибрати моделі MVC (Model-View-Controller) або MVVM (Model-View-ViewModel).

Цей навчальний матеріал замислювався як відправна точка для вивчення AngularJS, його концепцій і API, щоб допомогти вам створювати чудові веб-додатки сучасним способом.

AngularJS позиціонує себе як фреймворк, поліпшує HTML. Він зібрав концепції з різних мов програмування, як JavaScript, так і серверних, і робить з HTML також щось динамічне. Ми отримуємо підхід, заснований на даних, до розробки додатків. Немає потреби оновлювати Модель, DOM або робити якісь інші витратні часу операції, наприклад, виправляти помилки браузерів. Ми концентруємося на даних, дані ж піклуються про HTML, а ми просто займаємося програмуванням програми.

Інженерні концепції в фрейморках JavaScript


Позиція AngularJS по роботі з даними та іншими інженерними концепціями відрізняється від таких фреймворків, як Backbone.js and Ember.js. Ми задовольняємося вже відомим нам HTML, а Angular самостійно покращує його. Angular оновлює DOM при будь-яких змінах Моделі, яка живе собі в чистих Об'єктах JavaScript з метою зв'язку з даними. Коли оновлюється Модель, Angular оновлює Об'єкти, які містять актуальну інформацію про стан програми.

2.1 MVC і MVVM

Якщо ви звикли робити статичні сайти, вам знайомий процес створення HTML вручну, шматочок за шматочком, коли ви вписуєте в сторінку потрібні дані і повторюєте подібні HTML знову і знову. Це можуть бути стовпці решітки, структура для навігації, список посилань або картинок, і т. п. Коли змінюється одна маленька деталь, доводиться оновлювати весь шаблон, і всі наступні його використання. Також доводиться копіювати однакові шматки коду для кожного елемента навігації.

Тримайтеся за крісло — Angular існує поділ обов'язків і динамічний HTML. А це означає, що наші дані живуть в Моделі, наш HTML живе у вигляді маленького шаблону, який буде перетворено на Вигляд, а Контролер ми використовуємо для з'єднання двох цих понять, забезпечуючи підтримку змін Моделі і Виду. Тобто, навігація може виводитися динамічно, створюючись з одного елемента списку, автоматично повторюватися для кожного пункту з Моделі. Це спрощена концепція, пізніше ми ще поговоримо про шаблони.

Різниця між MVC і MVVM в тому, що MVVM спеціально призначений для розробки інтерфейсів. Вид складається з шару презентації, ВидМодель містить логіку презентації, а Модель містить бізнес-логіку і дані. MVVM була розроблена для полегшення двостороннього зв'язку даних, на чому і процвітають фреймворки типу AngularJS. Ми зосередимося на шляху MVVM, так як в останні роки Angular схиляється саме туди.

2.2 Двосторонній зв'язок даних

Двостороння зв'язок даних — дуже проста концепція, що надає синхронізацію між шарами Моделі і Виду. Зміни Моделі передаються у Вигляд, а зміни Виду автоматично відображаються в Моделі. Таким чином, Модель стає актуальним джерелом даних про стан програми.

Angular використовує прості Об'єкти JavaScript для синхронізації Моделі і Виду, у результаті чого оновлювати будь-який з них легко і приємно. Angular перетворює дані в JSON і краще всього спілкується методом REST. За допомогою такого підходу простіше будувати фронтенд-додатки, тому що все стан додатки зберігається в браузері, а не передається з сервера по шматочках, і немає побоювання, що стан буде зіпсоване або втрачене.

Пов'язуємо ми ці значення через вираження Angular, які доступні у вигляді керуючих шаблонів. Також ми можемо пов'язувати Моделі через атрибут під назвою ng-model. Angular використовує свої атрибути для різних API, які звертаються до ядра Angular.

2.3 Ін'єкція залежності (Dependency Injection, DI)

DI — шаблон розробки програм, який визначає, як компоненти зв'язуються зі своїми залежностями. Ін'єкція — це передача залежності до залежного Об'єкта, і ці залежності часто називають Сервісами.

У AngularJS ми хитрим чином використовуємо аргументи функції для оголошення потрібних залежностей, а Angular передає їх нам. Якщо ми забудемо передати залежність, але пошлемося на неї там, де вона потрібна нам, Сервіс буде не визначено і в результаті станеться помилка компіляції всередині Angular. Але не хвилюйтеся, angular викидає свої помилки і їх дуже зручно влаштовані для налагодження

2.3 Додатка на одну сторінку (Single Page Application, SPA), управління станом і Ajax (HTTP)

У додатку на одну сторінку (SPA) або весь необхідний код (HTML, CSS and JavaScript) викликається за одне завантаження сторінки, або потрібні ресурси динамічно підключаються і додаються до сторінки за необхідності, зазвичай у відповідь на дії користувача. Сторінка не перезавантажується під час роботи, не передає управління іншій сторінці, хоча сучасні технології HTML5 дозволяють одній з додатком працювати на декількох логічних сторінках. Взаємодія з SPA часто відбувається за допомогою фонового спілкування з сервером.

У більш старих додатках, коли стан програми зберігалося на сервері, траплялися відмінності між тим, що бачить користувач і тим, що зберігалося на сервері. Також відчувалася нестача стану програми в моделі, так як всі дані зберігалися в шаблонах HTML і динамічними не були. Сервер готував статичний темплейт, користувач вводив туди інформацію і браузер відправляв її назад, після чого відбувалася перезавантаження сторінки і бекенд оновлював стан. Будь збережене стан втрачалося, і браузеру потрібно було скачувати всі дані після оновлення сторінок заново.

Часи змінилися, браузер зберігає стан додаток, складна логіка і фреймворки придбали популярність. AngularJS зберігає стан в браузері і передає зміни при необхідності через Ajax (HTTP) з використанням методом GET, POST, PUT і DELETE. Краса в тому, що сервер може бути незалежний від фротенда, а фронтенд — від сервера. Ті ж самі сервера можуть працювати з мобільними додатками з абсолютно іншим фронтендом. Це дає нам гнучкість, так як на бэкенде ми працюємо з JSON-даними будь-яким зручним нам способом на будь-якому сервері ЯП.

2.5 Структура програми

У Angular є різні API, але структура програми зазвичай одна і та ж, тому майже всі програми будуються подібним чином і розробники можуть включатися в проект без зусиль. Також це дає передбачувані API і процеси налагодження, що зменшує час розробки і швидке прототипування. Angular побудований навколо можливості тестування («testability»), щоб бути найбільш простим як у розробці, так і в тестуванні.

Давайте вивчати.

3 Модулі

Всі програми створюються через модулі. Модуль може залежати від інших, або бути поодиноким. Модулі служать контейнерами для різних розділів програми, таким чином роблячи код придатним для повторного використання. Для створення модуля застосовується глобальний Object, простір імен фреймворку, і метод module.

3.1 Сетери (setters).



У додатку є один модуль app.

angular.module('app', []);


Другим аргументом йде [] — зазвичай цей масив містить залежності модуля, які нам потрібно підключити. Модулі можуть залежати від інших модулів, які у свою чергу теж можуть мати залежності. У нашому випадку масив порожній.

3.2 Геттери (Getters)

Для створення Controllers, Directives, Services і інших можливостей нам треба послатися на існуючий модуль. У синтаксисі є непомітне відмінність — ми не використовуємо другий аргумент.

angular.module('app');


3.3 Робота модулів

Модулі можуть зберігатися і викликатися і через змінну. Ось приклад зберігання модуля в змінної.

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


Тепер ми можемо використовувати змінну app для побудови програми.

3.4 HTML бутстрап

Для опису того, де додаток знаходиться в DOM, а зазвичай це елемент
<html>
, нам треба зв'язати атрибут ng-app з модулем. Так ми повідомляємо Angular, куди присобачити наш додаток.

<html ng-app="app">
<head></head>
<body></body>
</html>


Якщо ми вантажимо файли з JavaScript асинхронно, нам треба присобачити додаток вручну через angular.bootstrap(document.documentElement, ['app']);.

4 Розбираємося з $scope

Одне з основних понять програмування — область видимості. У Angular область видимості — це один з головних об'єктів, який робить можливим цикли двостороннього зв'язку даних і зберігає стан програми. $scope — досить хитрий об'єкт, який не тільки має доступ до даних і значенням, але і надає ці дані в DOM, коли Angular рендерить наш додаток.

Уявіть, що $scope — це автоматичний міст між JavaScript і DOM, зберігає синхронізовані дані. Це дозволяє простіше працювати з шаблонами, коли ми використовуємо при цьому синтакс HTML, а Angular рендерить відповідні значення $scope. Це створює зв'язок між JavaScript і DOM. Загалом, $scope грає роль ViewModel.

$scope використовується тільки всередині Контролерів. Там ми прив'язуємо дані Контролера до Виду. Ось приклад того, як ми оголошуємо дані Контролера:

$scope.someValue = 'Hello';


Щоб це відобразилося в DOM, ми повинні приєднати Контролер до HTML і повідомити Angular, куди вставляти значення.

<div ng-controller="AppCtrl">
{{ someValue }}
</div>


Перед вами концепція області видимості Angular, що підкоряється деяким правилам JavaScript в плані лексичних областей видимості. Зовні елемента, до якого приєднаний Контролер, дані знаходяться поза зоною видимості — так само, як мінлива вийшла б за область видимості, якщо б ми послалися на неї зовні її області видимості.

Ми можемо прив'язати будь-які типи JavaScript $scope. Таким чином ми беремо дані від сервісу, спілкується з сервером, і передаємо їх в View, шар презентації.

Чим більше ми створимо Контролерів та зв'язків з даними, тим більше з'являється областей видимості. Розібратися в їх ієрархії нічого не варто — тут нам допоможе змінна $rootScope

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.