Огляд AngularJS

Компанія Brat Tech у 2009 році розробники Misko Hevery та Adam Abrons розробили рамку AngularJS, після чого відбулася революція в розробці та створенні односторінкових додатків. AngularJS - це рамка javascript, яка пов'язує елементи Html з об’єктами javascript. Прив'язка даних та введення залежностей - одні з провідних особливостей AngularJs, які економлять час на написання тривалих кодів, що полегшує роботу розробників та браузерів. Як це досягти, буде детально пояснено далі, але поки ви просто пам’ятаєте ці термінології. У цій темі ми дізнаємось про версію AngularJS.

Версії AngularJS

AngularJS - це версії Angular 1.x, після чого розробляється Angular 2, який відрізняється від Angular 1.x. працює.

Чому версія AngularJS і як це працює?

AngularJS допомагає нам розробляти інтерактивні додатки на одній сторінці. Під односторінковими програмами я маю на увазі, що одна сторінка, яку ви відвідали, завантажує весь інший вміст за допомогою JavaScript. Ця функція допомагає програмі бути швидким та ефективним.

Коли ми використовуємо javascript та html для створення програм, вам доведеться прив’язати представлення до моделі за допомогою функцій та об'єктів JS. Але якщо ви вважаєте, що ці двосторонні прив'язки даних у практичному промисловому застосуванні той самий підхід стає втомливим з тривалими кодами. Це одна з головних причин, чому виникла потреба в навчанні та розвитку AngularJS.

Час вивчити основні поняття, перш ніж розпочати розробку програм, на яких AngularJS будується:

  • Модель: модель містить дані, об'єкти та логіку.
  • Вид: Це візуальна презентація програми, яку також називають користувальницьким інтерфейсом.
  • Погляд до моделі двосторонній прив'язки: Об'єкт javascript, тобто об'єкт, який ви хочете прив’язати до Html DOM для, наприклад, текстового поля, введення або будь-яких тегів Html, і навпаки, можна легко зробити за допомогою деяких заздалегідь визначених бібліотек AngularJS.
  • Контролери: Контролери - це функції javascript, які з'єднують модель та вигляд.
  • Послуги: Послуги AngularJS - це функції javascript, які виконують конкретну задачу чи функціональність, які підтримуються та перевіряються javascript. Деякі з прикладів послуг: $ range, $ http, $ rootScope.
  • Вирази: вирази використовуються для зв’язування даних з Html. Ця особливість також відома як інтерполяція. Вирази записуються фігурними дужками ((express)). Вирази оцінюються і можуть бути записані без html-тегів.
  • Модулі: Модулі працюють як контейнер, що містить різні частини кутового додатка, такі як контролер, служби, директиви тощо.

Директиви та сфера застосування

Зосередимося на деяких заздалегідь визначених директивах та на тому, як вони насправді працюють. Більшість цієї директиви починається з 'ng', взятого з Angular

1. Сфера застосування

  • Область визначає об’єкт javascript, за допомогою якого дані можуть бути доступні від Model до HTML. Сфера працює як з'єднувач між ними.
  • Деякі сервіси сфери застосування - це $ range, $ rootScope. '$' визначає, що ці послуги заздалегідь визначені і їх неможливо змінити. Пам'ятайте, що HTML нечутливий до регістру, але AngularJS відрізняється від регістру, тому $ Scope видасть помилку як невизначену.
  • Потрібно оголосити їх у нашій функції контролера, і кутовий буде вводити їх автоматично.

2. ng-контролер

  • Ця директива використовується для створення екземпляра / об'єкта контролера, за допомогою якого HTML DOM буде спілкуватися з фактичною логікою.
  • HTML говорить, що будь-який тег із символом "-" буде ігноруватися під час створення Html DOM.
  • Після створення DOM Кутовий інтерпретатор знаходить директиву ng-контролера та створює екземпляр конкретного контролера, який також надає послугу з діапазоном $.
  • В одній HTML-сторінці може бути багато ng-контролерів.

3. ng-додаток

  • Ця директива діє як контейнер, що містить контролери, директиви, фільтри, вирази тощо. Він реєструє або запускає додаток або модуль.
  • У вашому Html існує лише одна ng-програма. Під одним ng-додатком може бути багато ng-контролерів.

Це створює об'єкт програми за допомогою сервісу $ rootScope.

  • Таким чином, $ rootScope змінні / функції доступні в повному додатку.

4. ng-модель

  • ng-модель використовується для прив'язки даних з html до об'єкта моделі. Він забезпечує двостороннє зв'язування.

5. нг-якщо

  • Для виконання умовних операторів на тегах Html використовується ng-if. Якщо умова стає помилковою, тоді DOM не включає цей роздільник на DOM.

6. нг-зв’язувати

  • Замість використання (()) для інтерполяції також можна використовувати ng-bind.

7. нг-інвалід

  • Виходячи з умови, елемент у поданні можна вимкнути.

8. нг-шоу

  • Якщо задана умова для ng-show істинна, то конкретний елемент відображається на DOM.

9. нг-ховати

  • Якщо задана умова для ng-hid істинна, то певний елемент залишатиметься прихованим у DOM.

10. нг-повтор

  • Він повторить конкретний div чи span на Html із наданою довжиною масиву чи списку.

11. натиснення нг

  • Після події клацання на html-елементі він виконує надану функціональність або завдання.

Порада . Найкращий спосіб вивчити будь-яку мову - це кодувати її. Тож давайте подивимось наш перший код.

Приклади версії AngularJS

Ось кілька прикладів, наведених нижче




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))

Вихід:

Ім'я: Йосиф
Прізвище: Олексій
Ваше ім'я: Джозеф Алекс

Зверху на фрагмент кодування слід звернути увагу на кілька моментів:

  • У рядку 3 на сторінку додається файл angular.min.js, який завантажить усі необхідні бібліотеки для запуску програми AngularJS.
  • AngularJS в основному має 2 бібліотеки angular.js і стиснуту версію цього файлу як angular.min.js.
  • У рядку 5 ви можете бачити директиву як ng-додаток, яке Html ігнорує під час створення Html DOM і прийняте AngularJS як одну з його директив для запуску програми.
  • У рядку 6, 7 використовується ng-модель, яка прив’яже текст, який ви введете в текстове поле, до змінних fname та lname. Пам'ятайте, що ці змінні залежать від регістру.
  • У рядку 8 ви бачите вираз ((fname + ”“ + lname)), який кутовий буде оцінювати та відображати дані, які ви вводите у текстові поля. Це відомо як інтерполяція.

Розглянемо ще один приклад:



var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));

Ім'я:

Прізвище:

Ім'я клієнта ((customerName)), а вік - ((customerAge))

У цьому прикладі в рядку 5 створюється додаток з ім'ям CustomerApp, яке буде включати всі частини програми. У наступному рядку створюється контролер і присвоюється ім'я як firstController. $ range оголошено функціональним параметром. AngularJS автоматично вводить його в додаток для прямого використання, розробнику не потрібно його чітко створювати.

Ця функція відома як ін'єкція залежності. Аналогічним чином ng-контролер використовується для того ж контролера під тегом ng-app. Пам’ятайте про сферу застосування програми чи контролера - там, де закінчується діва або все, на що ви визначаєте додаток чи контролер. У цьому випадку ви не можете отримати доступ до контролера чи програми після рядка 16.

Рекомендовані статті

Це посібник щодо версії AngularJS. Тут ми обговорюємо версії AngularJS з директивами, сферою застосування та способом роботи AngularJS. Ви також можете переглянути наступні статті, щоб дізнатися більше -

  1. AngularJS Архітектура
  2. Кутове застосування JS
  3. Тестування модулів AngularJS
  4. Кар'єра в AngularJS
  5. Що таке кутовий 2?

Категорія:

Розробка програмного забезпечення