Преглед на AngularJS
В Brat Tech LLC през 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. Тази функция е известна още като интерполация. Изразите се пишат с ((израз)) къдрави скоби. Изразът се оценява и може да се запише без html тагове.
- Модули: Модулите работят като контейнер, съдържащ различни части от ъгловото приложение като контролер, услуги, директиви и т.н.
Директиви и обхват
Нека се съсредоточим върху някои от предварително дефинираните директиви и как всъщност работят. По-голямата част от тази директива започва с 'ng', взето от Angular
1. Обхват
- Обхватът определя обекта javascript, с който данните могат да бъдат достъпни от Model до HTML. Scope работи като съединител между двете.
- Някои услуги за обхват са $ range, $ rootScope. '$' определя, че тези услуги са предварително дефинирани и не могат да бъдат променяни. Не забравяйте, че HTML е нечувствителен към регистъра, но AngularJS е чувствителен към регистъра, така че $ Scope ще хвърли грешка като неопределена.
- Изисква се да ги декларираме в нашата функция на контролера и ъгловият ще го инжектира автоматично.
2. ng-контролер
- Тази директива се използва за създаване на инстанция / обект на контролера, чрез който HTML DOM ще комуникира с действителната логика.
- HTML казва, че всеки маркер с '-' ще бъде игнориран при създаването на Html DOM.
- След като DOM е създаден Angular interpreter намира директива ng-controller и създава екземпляр на конкретния контролер, който също предоставя услуга $ range.
- В една HTML страница може да има много ng-контролер.
3. ng-ап
- Тази директива действа като контейнер, съдържащ контролери, директиви, филтри, изрази и др. Регистрира или стартира приложението или модула.
- Има само едно ng-приложение във вашия Html. Под едно ng-приложение може да има много ng-контролер.
Това създава обект на приложение с услугата $ rootScope.
- По този начин променливите / функциите $ rootScope са достъпни в пълно приложение.
4. ng-модел
- ng-model се използва за обвързване на данни от html към моделен обект. Той осигурява двупосочно обвързване.
5. ng-ако
- За изпълнение на условни оператори върху Html тагове ng-if се използва. Ако условието се обърка, DOM не включва този div на DOM.
6. ng-вържете
- Вместо да се използва (()) за интерполация, може да се използва и ng-bind.
7. ng-инвалиди
- Въз основа на условие, елемент в изгледа може да бъде деактивиран.
8. ng-шоу
- Ако даденото условие за ng-show е вярно, тогава конкретният елемент се показва на DOM.
9. ng-скрий
- Ако даденото условие за ng-скриване е вярно, тогава конкретният елемент ще остане скрит в DOM.
10. ng-повторение
- Той ще повтори конкретния div или обхват на Html с предоставената дължина на масива или списъка.
11. ng-щракване
- При събитие при кликване върху 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. Не забравяйте, че обхватът на приложението или контролера ще бъде мястото, където завършва div или всичко, в което определите приложение или контролер. В този случай не можете да получите достъп до контролера или приложението след ред 16.
Препоръчителни статии
Това е ръководство за това какво е AngularJS версия. Тук обсъждаме версиите на AngularJS с директиви, обхват и как работи AngularJS. Може да разгледате и следните статии, за да научите повече -
- AngularJS Архитектура
- Ъглово приложение JS
- Изпитване на AngularJS модул
- Кариера в AngularJS
- Какво е Angular 2?