Какво е AngularJS? Archiтекстура, характеристики и предимства

Какво е AngularJS?

AngularJS е рамка с отворен код Model-View-Controller, написана на JavaСценарийAngularJS беше една от най-популярните уеб рамки през 2010-те и се използва за разработка...ping предимно приложения с една страница. Тази рамка е разработена от група разработчици от Google себе си.

Заради огромната подкрепа на Google и идеи от широк обществен форум, рамката е била актуализирана през целия си активен живот. Тя е включвала и водещите тенденции в разработката от този период, поради което толкова много производствен код все още работи върху нея днес.

Един терминологичен момент е добре да се уточни предварително. AngularJS е широко описван като MVC рамка, което е полезна отправна точка. Самият екип на AngularJS обаче предпочете етикета MVW (Модел-Изглед-Каквото и да е), защото средата за изпълнение се държи по-близо до Model-View-ViewModel, отколкото до класическия MVC. Официалният Документация на AngularJS нарича го структурна рамка за динамични уеб приложения. След като това е уредено, ето как се съчетават частите.

AngularJS Archiтекстура

AngularJS следва MVC архитектурата. Диаграмата на MVC рамката е показана по-долу:

AngularJS Archiтектурна диаграма

Всеки от трите слоя има ясна задача:

• Контролерът представлява слоя, който има бизнес логиката. Потребителските събития задействат функциите, които се съхраняват във вашия контролер. Потребителските събития са част от контролера.
• Изгледите се използват за представяне на презентационния слой, който се предоставя на крайните потребители.
• Моделите се използват за представяне на вашите данни. Данните във вашия модел могат да бъдат толкова прости, колкото просто да имате примитивни декларации. Например, ако поддържате студентско приложение, вашият модел на данни може да има само идентификатор на студент и име. Или също така може да бъде сложно, като има структуриран модел на данни. Ако поддържате приложение за собственост на автомобил, можете да имате структури, които да дефинират самото превозно средство по отношение на неговия обем на двигателя, капацитет на седалките и т.н.

На практика контролерът рядко въвежда данни в изгледа ръчно. AngularJS наблюдава модела и обновява изгледа вместо вас, а тази автоматична синхронизация се захранва от набора от функции, описан по-долу.

Характеристики на AngularJS

AngularJS има следните ключови характеристики, което го прави една от мощните рамки на пазара:

1. MVC – Рамката е изградена върху известната концепция на MVC (модел-изглед-контролер). Това е шаблон за проектиране, използван във всички съвременни уеб приложения. Този модел се основава на разделянето на слоя бизнес логика, слоя данни и презентационния слой на отделни секции. Разделянето на отделни секции е направено така, че всяка една да се управлява по-лесно.
2. Обвързване на модел на данни – Не е необходимо да пишете специален код, за да обвържете данни с HTML контролите. Това може да се направи чрез AngularJS, като просто добавите няколко фрагмента код.
3. Писане на по-малко код – Когато извършвате DOM манипулация на много JavaСценарий беше необходимо да се напише за проектирането на всяко приложение. Но с AngularJS ще бъдете изумени от по-малкото количество код, което трябва да напишете за манипулиране на DOM.
4. Единица Тестване готови – Дизайнерите в Google не само разработи AngularJS, но и разработи рамка за тестване, наречена „Karma“, която помага при проектирането на модулни тестове за AngularJS приложения.
5. директиви – Маркери като например ng-приложение, ng-модел и ng-повтаряне добавяне на поведение към обикновени HTML елементи.

Тези функции са най-лесни за разбиране, след като ги стартирате, така че следващият раздел изгражда работеща страница от нулата.

Как да настроите AngularJS и да създадете първото си приложение

Да четеш за обвързването на данни е едно, а да го гледаш как работи е съвсем друго. AngularJS не се нуждае от мениджър на пакети, от bundler и от компилатор, така че първото ти приложение е един HTML файл, който се изпълнява директно от твърдия ти диск.

Стъпка 1) Добавете библиотеката AngularJS

Заредете библиотеката от CDN с един скриптов таг. Версия 1.8.3 е последната версия на AngularJS, така че закачете страницата си към тази точна версия, а не към плаваща.

Стъпка 2) Маркирайте корена на приложението с ng-app

Директивата ng-app казва на компилатора на AngularJS коя част от страницата притежава. Поставянето ѝ в html тага предава целия документ на рамката, а стойността, която ѝ давате, назовава модула, който ще създадете.

Стъпка 3) Свързване на данни с ng-модел и израз

Директивата ng-model свързва входен елемент със свойство в обхвата, а израз с двойни скоби отпечатва същото свойство другаде на страницата. Тъй като свързването е двупосочно, typing в полето актуализира заглавието незабавно, без ваш собствен обработчик на събития.

Стъпка 4) Добавете контролер за логиката

Контролерът е обикновен JavaСкриптова функция, която получава обекта $scope и му задава начални стойности. Регистрирането му в модула го прави достъпен за директивата ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Стъпка 5) Стартирайте страницата и проверете резултата

Запазете файла като index.html и го отворете във всеки браузър. Заглавието първоначално гласи „Здравей, свят!“ и се презаписва при всяко натискане на клавиш. Не е необходим уеб сървър, нито стъпка за изграждане.

Ако нищо не се появи, отворете конзолата на браузъра и потвърдете, че CDN скриптът е зареден и че името на модула в ng-app съвпада точно с името, предадено на angular.module, защото несъответствието води до тиха грешка. Тази малка страница вече демонстрира силните страни, описани по-долу.

Предимства на AngularJS

Ето предимствата на AngularJS:

• Тъй като е рамка с отворен код, можете да очаквате броят на грешките или проблемите да бъде минимален.
• Двупосочно свързване – AngularJS поддържа данните и презентационния слой синхронизирани. Не е необходимо да пишете допълнително JavaСкрипт код, който да синхронизира данните във вашия HTML код и слоя с данни. AngularJS ще направи това автоматично вместо вас. Просто трябва да посочите кой контрол е обвързан с коя част от вашия модел.
• Маршрутизиране – AngularJS може да се погрижи за маршрутизирането, което означава преминаване от един изглед към друг. Това е ключовият фундамент на приложенията с една страница; при който можете да преминавате към различни функционалности във вашето уеб приложение въз основа на взаимодействието с потребителя, но все пак да останете на една и съща страница.
• AngularJS поддържа тестване, както Единично тестване, и Тестване на интеграцията.
• Той разширява HTML, като предоставя свои собствени елементи, наречени директиви. На високо ниво, директивите са маркери върху DOM елемент (като атрибут, име на елемент и коментар или CSS клас), които казват на HTML компилатора на AngularJS да прикачи определено поведение към този DOM елемент. Тези директиви помагат за разширяване на функционалността на съществуващите HTML елементи, за да се даде повече мощност на вашето уеб приложение.

Предимства на AngularJS

Балансираният поглед е също толкова важен, така че компромисите са посочени по-долу.

Недостатъци и ограничения на AngularJS

Всяка рамка прави компромис с нещо и AngularJS не е изключение. Това са ограниченията, за които най-често се съобщава от екипи, поддържащи AngularJS приложения:

• Няма собствен защитен слой – AngularJS не предоставя нито удостоверяване, нито оторизация, така че и двете трябва да бъдат наложени на сървъра.
• Пълна зависимост от JavaСценарий – Ако посетителят деактивира JavaСкрипт, страницата се връща към гола маркировка и не се рендира.
• Производителност на цикъла на дайджест – Промените се откриват чрез многократно сравняване на наблюдаваните стойности, така че страниците с няколко хиляди връзки могат да изглеждат бавни.
• Стръмна крива на обучение – Обхватите, директивите, фабриките, услугите и доставчиците се припокриват и често съществуват няколко начина за постигане на един и същ резултат.
• Видимост на търсачката – Изгледите се сглобяват в браузъра, така че е необходима допълнителна работа, като например предварително рендиране, преди роботите да индексират страниците надеждно.
• Няма други актуализации – От 31 декември 2021 г. не съществуват официални корекции, така че новооткритата уязвимост остава непоправена, освен ако търговски доставчик не предостави корекция.

Тази последна точка тласка повечето екипи към наследната рамка, която е различен продукт въпреки споделеното име.

AngularJS срещу Angular: Каква е разликата?

AngularJS и Angular често се бъркат, защото имената им са толкова близки, но те са отделни рамки с различни езици, архитектури и линии на издания. AngularJS се отнася само до серията 1.x, описана на тази страница. Angular означава версия 2 и всяка версия след нея, напълно преработена версия, издадена през 2016 г., която все още се разработва активно. Code не се движи между тях без целенасочена миграционна работа.

Практическото следствие е, че AngularJS контролер не може просто да бъде пуснат в Angular проект. Миграцията означава пренаписване на всеки контролер като компонент, така че планирайте я като истинска инженерна работа, а не като надстройка. Накратко, третирайте AngularJS като умение за поддръжка, а Angular като платформа за нова разработка.

Въпроси и Отговори