Angularjs. Вступ.

Відео: Відеокурс Angular 2 Essential. Урок 1. Введення

Сьогодні ми почнемо вивчати відомий фреймворк AngularJs. Цей урок у нас буде вступним, і ми розберемося, що таке AngularJs і як його використовувати.

AngularJs - це MVC фреймворк, який полегшує життя розробникам, які пишуть на мові jаvascript. Даний фреймворк почав розробляти співробітник фірми Google в 2009 році, як свій персональний проект. Перша версія була випущена в 2012 році і в ній використовувався JQuery, але в подальшому від нього відмовилися. Офіційний сайт - https://angularjs.org. Там ви можете знайти вихідний код, документацію, відео уроки і приклади. Давайте тепер подивимося на простий приклад.

Для початку зайдемо на вказаний вище сайт і натиснемо кнопку download, щоб завантажити бібліотеку. Я її качати не буду, а підключу через CDN.

 
lang="Ru"gt; 
 
charset="UTF-8"gt; 
Angular JS 
 
 
ng-appgt; 
 {{3 + 5}}

Просто підключивши бібліотеку, вона не почне свою роботу. Її ще потрібно активувати. Для цього потрібно додати нестандартний атрибут ng-app. Всі спеціальні теги і атрибути html, підтримувані фреймворком AngularJs, називаються директивами.

Відео: Введення в Angular 2 [GeekBrains]

Використання подвійних фігурних дужок забезпечує висновок значення моделі. Швидше за все, ви нічого зараз не зрозуміли, але це не страшно, тому що це всього лише вступна стаття і надалі ми з цим розберемося. У нашому прикладі ми виводимо значення операції додавання двох чисел. Відповідь, як ви здогадалися, буде 8.

8

У подвійних фігурних дужках можна вказувати будь-які арифметичні операції або, навіть, функцію, яка спрацює динамічно на нашому DOM дереві.

Відео: AngularJS. Введення в Angular JS - jаvascript фреймворк. уроки AngularJS

Тепер розглянемо більш практичний приклад.

type="Text"ng-model="Name"gt; 
Привіт, {{name}}!

Якщо ви запустите цей приклад, то, кожен раз натискаючи на клавіші, сторінка буде перемальовуватись, і ми будемо бачити динамічний введення. Тобто значення буде братися з текстового поля з директивою ng-model і підставлятися замість фігурних дужок зі значенням name.

І ще один приклад

type="Checkbox"ng-model="ShowMyText"gt; 
ng-show="ShowMyText"gt;Текст, який з`явиться відразу після того, як користувач активує checkbox.

на чистому jаvascript у нас було б набагато більше рядків коду, але AngularJs позбавляє нас від цього.

Відео: Курс Angular

На цьому підійшла до кінця вступна стаття по AngularJs. Сподіваюся, я вас заінтригував, і в наступній статті ми вже почнемо більш поглиблено розбиратися з тим, як він працює.

Поділися в соціальних мережах:

Схожі