Преглед АнгуларЈС

У Брат Тецх ЛЛЦ-у 2009. године, програмери Миско Хевери и Адам Абронс развили су оквир АнгуларЈС након којег се догодила револуција у развоју и изградњи апликација за једну страницу. АнгуларЈС је оквир јавасцрипта, који повезује Хтмл елементе са ЈаваСцрипт објектима. Везивање података и убризгавање зависности су неке од водећих карактеристика АнгуларЈс-а који штеде време у писању дугачких кодова што олакшава рад програмерима и прегледачима. Како је то постигнуто детаљно ћемо објаснити даље, али за сада се само сећате ових терминологија. У овој теми ћемо сазнати више о АнгуларЈС верзији.

Верзије АнгуларЈС

АнгуларЈС је верзија Ангулар 1.к и након тога се развија Ангулар 2 који се разликује од Ангулар 1.к. Извођење радова.

Зашто верзија АнгуларЈС и како то функционира?

АнгуларЈС нам помаже да развијемо интерактивне апликације за једну страницу. Под једноструким апликацијама, мислим да ће једна страница коју сте посетили учитати сав остали садржај помоћу ЈаваСцрипта. Ова функција помаже да апликација буде брза и ефикасна.

Када користимо јавасцрипт и хтмл за прављење апликација, морат ћете везати поглед помоћу модела помоћу ЈС функција и објеката. Али ако мислите да ови двосмерни повезивања података у практичној индустријској примени, исти приступ постаје напоран с дугим кодовима. То је један од главних разлога зашто је постојала потреба да се учи и развија АнгуларЈС.

Време је да научите неке основне концепте пре него што започнете развој апликација на којима је АнгуларЈС изграђен:

  • Модел: Модел садржи податке, објекте и логику.
  • Приказ: То је визуелна презентација апликације која се такође назива кориснички интерфејс.
  • Погледајте на модел двосмерно везивање: Јавасцрипт објект тј. Објект за који желите да се веже за Хтмл ДОМ за нпр. Текстуалну кутију, унос или било коју Хтмл ознаку и обрнуто, може се лако извршити употребом неких унапред дефинисаних АнгуларЈС библиотека.
  • Контролери: Контролери су функције јавасцрипта који повезују модел и приказ.
  • Услуге: АнгуларЈС услуге су функције јавасцрипта које изводе одређене задатке или функционалности које одржава и тестира јавасцрипт. Неки од примера услуга су $ ранге, $ хттп, $ роотСцопе.
  • Изрази: Изрази се користе за повезивање података с Хтмл. Ова карактеристика је позната и као интерполација. Изрази се пишу ((израз)) коврчавим заградама. Изрази се вреднују и могу се писати без хтмл тагова.
  • Модули: Модули раде као спремник који садржи различите делове угаоне апликације као што су контролер, услуге, директиве итд.

Директиве и обим

Усредсредимо се на неке унапред дефинисане директиве и на то како оне заправо делују. Већина ове директиве започиње с „нг“ преузетим од Ангулар

1 Обим

  • Обим дефинира јавасцрипт објект с којим подаци могу бити доступни од Модел до ХТМЛ-а. Сцопе делује као конектор између њих две.
  • Неке услуге обухватају: $ ранге, $ роотСцопе. '$' дефинира да су ове услуге унапријед дефиниране и не могу их мијењати. Запамтите, ХТМЛ не разликује велика и мала слова, али АнгуларЈС разликује велика и мала слова, па ће $ Сцопе довести грешку као недефинисану.
  • Потребно је то пријавити у нашој функцији контролера и угаоно ће је аутоматски убризгати.

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

  • Ова се директива користи за стварање инстанције / објекта контролера преко којих ће ХТМЛ ДОМ комуницирати са стварном логиком.
  • ХТМЛ каже да ће било која ознака са '-' бити занемарена током креирања Хтмл ДОМ-а.
  • Једном када је ДОМ креиран Кутни интерпретер проналази нг-регулатор директиве и креира инстанцу одређеног контролера који такође пружа услугу $ ранге.
  • У једној ХТМЛ страници може бити пуно нг-контролера.

3. нг-апп

  • Ова директива делује као спремник који садржи контролере, директиве, филтере, изразе итд. Региструје или покреће апликацију или модул.
  • У вашем Хтмл-у постоји само једна нг апликација. Под једном нг-апликацијом може бити много нг-контролера.

Ово инстанцира апликацијски објект услугом $ роотСцопе.

  • Стога су $ роотСцопе променљиве / функције доступне у комплетној апликацији.

4. нг-модел

  • нг-модел се користи за везање података из хтмл-а за објект модела. Омогућава двосмерно везивање.

5. нг-иф

  • За извршавање увјетних изјава на Хтмл ознакама нг-иф се користи. Ако је услов погрешан, ДОМ не укључује тај див на ДОМ.

6. нг-бинд

  • Уместо да се (()) користи за интерполацију, може се користити и нг-бинд.

7. нг-дисаблед

  • На основу стања, елемент у приказу се може онемогућити.

8. нг-схов

  • Ако је наведени услов за нг-схов тачан, тада се одређени елемент приказује на ДОМ-у.

9. нг-хид

  • Ако је наведени услов за нг-хид истинит, тада ће одређени елемент остати скривен у ДОМ-у.

10. нг-поновите

  • Поновит ће одређени див или распон на Хтмл-у уз дуљину распона или листе.

11. нг-клик

  • Када кликне на хтмл елемент, извршиће обезбеђену функционалност или задатак.

Савет: Најбољи начин да научите било који језик је да га шифрирате. Па да видимо наш први код.

Примери верзије АнгуларЈС

Ево неколико примера датих у наставку




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. реду, датотека ангулар.мин.јс додаје се на страницу која ће учитати све потребне библиотеке за покретање АнгуларЈС апликације.
  • АнгуларЈС углавном има 2 библиотеке ангулар.јс и компримовану верзију ове датотеке као ангулар.мин.јс.
  • У ретку 5 можете видети директиву као нг-апликацију коју Хтмл игнорише током креирања Хтмл ДОМ-а, а АнгуларЈС је преузео као једну од својих директива за покретање апликације.
  • У ретку 6, 7 користи се нг-модел који ће текст који ћете унијети у текстуалну кутију везати за променљиве фнаме и лнаме. Запамтите да ове променљиве разликују велика и мала слова.
  • У линији 8 видите израз ((фнаме + ”„ + име)) који угао ће проценити и приказати податке које унесете у текстна поља. То је познато као интерполација.

Истражимо још једним примером:



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

Име:

Презиме:

Име клијента је ((цустомерНаме)), а старост је ((цустомерАге))

У овом примјеру, у ретку 5 креира се апликација са именом ЦустомерАпп која ће укључивати све дијелове апликације. На сљедећем ретку ствара се контролер и даје му име фирстЦонтроллер. $ досег деклариран је као функцијски параметар. АнгуларЈС ће га аутоматски убацити у апликацију за директну употребу, програмер не мора да је креира експлицитно.

Ова карактеристика је позната као убризгавање зависности. На сличан начин се нг-контролер користи за исти контролер под ознаком нг-апп. Запамтите да ће опсег апликације или контролера бити тамо где се завршава див или било шта у шта дефинишете апликацију или контролер. У овом случају, не можете да приступите контролеру или апликацији после линије 16.

Препоручени чланци

Ово је водич за шта је АнгуларЈС верзија. Овде разговарамо о Верзијама АнгуларЈС-а са директивама, обимом и начином рада АнгуларЈС-а. Можда ћете такође погледати следеће чланке да бисте сазнали више -

  1. АнгуларЈС Арцхитецтуре
  2. Угаона ЈС апликација
  3. Испитивање јединице АнгуларЈС
  4. Каријера у АнгуларЈС
  5. Шта је угаони 2?

Категорија:

Развој софтвера