Мени

Направите апликацију за једну страницу користећи АнгуларЈС (Водич са примером)

  • Главни
  • Остало
  • Направите апликацију за једну страницу користећи АнгуларЈС (Водич са примером)

build single page application using angularjs

Испробајте Наш Инструмент За Елиминисање Проблема

Направите СПА за једну страницу користећи АнгуларЈС:

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

Да ли знате за Нетфлик? Да ли сте икада посетили његову веб страницу?

Ако је ваш одговор „Да“, онда знате како изгледа апликација на једној страници! Истражите наше Комплетан водич за АнгуларЈС да бисте стекли јасно знање о АнгуларЈС.

Апликација на једној страници која користи АнгуларЈС

Дозволите ми да разрадим!

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

Направили су свој УИ веома једноставно чинећи га СПА (Апликација за једну страницу). То значи да се навигација унутар Нетфлика врши без освежавања целе странице.

Шта ћете научити:

Предности апликација на једној страници

Доље је дато неколико предности апликација на једној страници.

  • Побољшано корисничко искуство.
  • Веб странице се брже освежавају јер се користи мање пропусног опсега.
  • Примена апликације - индек.хтмл, ЦСС снопа и јавасцрипт пакета - у производњи постаје лакша.
  • Раздвајање кода може се извршити за поделу снопова на више делова.

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

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

Следећих неколико разлога је зашто је АнгуларЈС јасан победник:

# 1) Не зависности

За разлику од АнгуларЈС, бацкбоне.јс има зависности од ундерсцоре.јс и јКуери. Док, ембер ЈС има зависности од управљача и јКуери-а.

играјте вау за бесплатни приватни сервер

# 2) Усмеравање

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

# 3) Тестирање

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

ангуларЈС особине

(извор слике едурека.цо)

# 4) Везивање података

АнгуларЈС подржава двосмерно везивање података, тј. Кад год се модел ажурира, поглед се такође ажурира како АнгуларЈС следи МВЦ архитектуру.

Дакле, корисник може да види податке на основу својих преференција.

# 5) Подршка за прегледач

АнгуларЈС је подржан у већини прегледача, укључујући ИЕ верзије 9 и новије. Такође се може прилагодити раду на мобилним телефонима, таблетима и преносним рачунарима.

# 6) Спретност

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

У АнгуларЈС постоји око 30000 модула који су лако доступни за брзи развој апликација. Када програмер жели да прилагоди постојећу апликацију, он може да користи модуле који су већ доступни и доради код уместо да целу апликацију гради од нуле.

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

Како развити апликацију за једну страницу користећи АнгуларЈС?

У наставку су наведени различити кораци који су укључени у развој СПА-а помоћу АнгуларЈС-а.

Корак 1: Креирајте модул

Сви знамо да АнгуларЈС следи МВЦ архитектуру. Дакле, свака апликација АнгуларЈС садржи модул који се састоји од контролера, услуга итд.

var app = angular.module('myApp', ());

Корак 2: Дефинисање једноставног контролера

app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });

Корак 3: Укључите скрипту АнгуларЈС у ХТМЛ код

Наведите модул (креиран у кораку 1) у нг-апп атрибут и контролер (дефинисан у кораку 2) у нг-контролер атрибут.

{{message}}

First Second Third

(Када Ангулар открије предлошке дефинисане директивама нг-темплате, учитаће свој садржај у кеш предложака и неће извршити Ајак захтев за добијање њиховог садржаја.)

Једном када се ХТМЛ покрене на лоцалхост, приказује се следећа страница.

прва веб страница

Приметите да хипервезе Прво, друго, треће на страници су рутери и када кликнете на њих, долази до навигације до одговарајућих веб страница, без освежавања.

друга веб страница

Трећа веб страница

То је то! Надам се да бисте могли да направите једноставан СПА као што је приказано на овом блогу. Када успех добијете, можете испробати сложене СПА локације на истим линијама.

Закључак

Апликације са једном страницом су данас веома популарне, а брендови попут Нетфлика одлучују се за њих.

Ако развијате СПА, онда је очигледан избор АнгуларЈС. Међутим, нова верзија АнгуларЈС, тј. Ангулар нуди више функционалности. Иначе постоје разне технологије попут развоја апликација Ноде ЈС итд.

Пратите наш предстојећи водич да бисте истражили о надоградњи вертикалне верзије!

ПРЕВ Туториал |. | СЛЕДЕЋА Лекција

Препоручено читање

^