Шта је контролер у АнгуларЈ-овима?
Контролори у АнгуларЈс преузимају податке из погледа, обрађују податке, а затим их шаљу у приказ који се приказује крајњем кориснику. Контролор ће имати вашу основну пословну логику.
Контролор ће користити модел података, извршити потребну обраду, а затим проследити излаз у приказ који се заузврат приказује крајњем кориснику.
У овом упутству ћете научити-
- Шта Цонтроллер ради из перспективе Ангулала
- Како направити основни контролер
- Како дефинисати методе у контролеру
- Коришћење нг-контролера у спољним датотекама
- Примарна одговорност контролера је да контролише податке који се прослеђују у приказ. Опсег и поглед имају двосмерну комуникацију.
- Својства приказа могу позивати „функције“ на опсегу. Штавише, догађаји у приказу могу позвати „методе“ на опсегу. Исечак кода у наставку даје једноставан пример функције.
- Функција ($ сцопе) која је дефинисана приликом дефинисања контролера и унутрашња функција која се користи за враћање повезивања $ сцопе.фирстНаме и $ сцопе.ластНаме.
- У АнгуларЈС када дефинишете функцију као променљиву, она је позната као Метод.
- Подаци на овај начин прелазе из контролера у опсег, а затим подаци прелазе из опсега у приказ.
- Опсег се користи за излагање модела погледу. Модел се може изменити методама дефинисаним у опсегу које се могу покренути путем догађаја из погледа. Можемо дефинисати двосмерно везивање модела из опсега за модел.
- Контролери се не би требали идеално користити за манипулацију ДОМ-ом. То би требало да ураде директиве које ћемо видети касније.
- Најбоља пракса је имати контролере засноване на функционалности. На пример, ако имате образац за унос и потребан вам је контролер за то, креирајте контролер назван „контролер форме“.
- Додајемо референце на ЦСС табеле стилова боотстрап, које ће се користити заједно са библиотекама боотстрап.
- Додајемо референце на ангуларјс библиотеке. Дакле, шта год да радимо са ангулар.јс убудуће, биће референцирано из ове библиотеке.
- Додајемо референце на боотстрап библиотеку како би наша веб страница више одговарала на одређене контроле.
- Додали смо референце на библиотеке јкуери које ће се користити за ДОМ манипулацију. Ово захтева Ангулар јер неке функције у Ангулар-у зависе од ове библиотеке.
- Прво раздвајамо датотеке у 2 фасцикле, као што се ради са било којом уобичајеном веб апликацијом. Имамо директоријум „ЦСС“. Садржат ће све наше каскадне датотеке стилова, а затим ћемо имати нашу фасциклу "либ" која ће имати све наше ЈаваСцрипт датотеке.
- Датотека боотстрап.цсс се налази у ЦСС директоријуму и користи се за додавање доброг изгледа и осећаја нашој веб локацији.
- Ангулар.јс је наша главна датотека која је преузета са странице ангуларЈС и чувана у нашој фасцикли либ.
- Датотека апп.јс ће садржати наш код за контролере.
- Датотека боотстрап.јс користи се као додатак датотеци боотстрап.цс за додавање функције боотстрап нашој веб апликацији.
- Датотека јкуери користиће се за додавање функционалности ДОМ манипулације нашој веб локацији.
Шта Цонтроллер ради из перспективе Ангулала
Следи једноставна дефиниција рада Ангулар ЈС контролера.
Како направити основни контролер
Пре него што започнемо са стварањем контролера, прво морамо да поставимо основно подешавање ХТМЛ странице.
Исечак кода у наставку је једноставна ХТМЛ страница која има наслов „Регистрација догађаја“ и садржи референце на важне библиотеке као што су Боотстрап, јкуери и Ангулар.
Подразумевано ће горњи исечак кода бити присутан у свим нашим примерима, тако да можемо да прикажемо само одређени кутни ЈС код у следећим одељцима.
Друго, погледајмо наше датотеке и структуру датотека са којима ћемо започети током нашег курса.
Погледајмо пример како се користи ангулар.јс,
Оно што овде желимо да урадимо је само да прикажемо речи „АнгуларЈС“ и у текстуалном формату и у оквиру за текст када се страница гледа у прегледачу.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Објашњење кода:
- Нг апликација кључна реч се користи да означи да је ова апликација треба сматрати углом апликације. Све што почиње префиксом 'нг' познато је као директива. „ДемоАпп“ је име дато нашој апликацији Ангулар.ЈС.
- Направили смо див ознаку и у ову ознаку смо додали нг контролер директиву заједно са именом нашег контролера „ДемоЦонтроллер“. Ово у основи чини нашој див ознаци могућност приступа садржају демо контролера. Морате да наведете име контролера према директиви да бисте били сигурни да ћете моћи да приступите функцији дефинисаној у оквиру контролера.
- Креирамо везивање модела користећи директиву нг-модел. Ово што ради је то што веже оквир за текст за назив водича да буде везан за променљиву члана „туториалНаме“.
- Стварамо променљиву члана под називом "туториалНаме" која ће се користити за приказ информација које корисник уноси у оквир за текст за Име водича.
- Креирамо модул који ће се прикључити нашој апликацији ДемоАпп. Дакле, овај модул сада постаје део наше апликације.
- У модулу дефинишемо функцију која нашој променљивој туториалНаме додељује подразумевану вредност „АнгуларЈС“.
Ако се наредба успешно изврши, приказаће се следећи излаз када покренете свој код у прегледачу.
Излаз:
Будући да смо променљивој туториалНаме доделили вредност „Ангулар ЈС“, то се приказује у пољу за текст и у редовном тексту.
Како дефинисати методе у контролеру
Обично би неко желео да дефинише више метода у контролеру за одвајање пословне логике.
На пример, претпоставимо да ако желите да ваш контролер ради две основне ствари,
- Извршите сабирање 2 броја
- Извршите одузимање 2 броја
Тада бисте идеално креирали 2 методе у оквиру контролера, једну за извршавање сабирања, а другу за одузимање.
Погледајмо једноставан пример како можете дефинисати прилагођене методе у оквиру Ангулар.ЈС контролера. Контролер ће једноставно вратити низ.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Објашњење кода:
- Овде само дефинишемо функцију која враћа низ „АнгуларЈС“. Функција је припојена објекту опсега путем променљиве члана која се назива туториалНаме.
- Ако се наредба успешно изврши, приказаће се следећи излаз када покренете свој код у прегледачу.
Излаз:
Коришћење нг-контролера у спољним датотекама
Погледајмо пример „ХеллоВорлд“ где је сва функционалност смештена у једну датотеку. Сада је време да код за контролер поставимо у посебне датотеке.
Пратимо кораке у наставку да бисмо то урадили.
Корак 1) У датотеку апп.јс додајте следећи код за свој контролер
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Горњи код чини следеће ствари,
- Дефинишите модул назван „апликација“ који ће садржавати контролер заједно са функционалношћу контролера.
- Направите контролер са именом „ХеллоВорлдЦтрл“. Овај контролер ће се користити за функцију приказивања поруке „Хелло Ворлд“.
- Објект опсега користи се за прослеђивање информација из контролера у поглед. Дакле, у нашем случају, објект опсега ће се користити за задржавање променљиве која се назива „порука“.
- Ми дефинишемо поруку променљиве и додељујемо јој вредност „Хелло Ворлд“.
Корак 2) У датотеку Сампле.хтмл додајте див класу која ће садржати директиву нг-цонтроллер, а затим додајте референцу на променљиву члана „мессаге“
Такође не заборавите да додате референцу на датотеку скрипте апп.јс која има изворни код за ваш контролер.
Event Registration Guru99 Global Event
{{message}}
Ако је горњи код исправно унесен, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Резиме
- Примарна одговорност контролера је да креира објекат опсега који се заузврат преноси на поглед
- Како направити једноставни контролер помоћу директива нг-апп, нг-цонтроллер и нг-модел
- Како додати прилагођене методе контролеру који се могу користити за одвајање различитих функционалности унутар модула ангуларјс.
- Контролори се могу дефинисати у спољним датотекама да би се овај слој одвојио од слоја Виев. Ово је обично најбоља пракса приликом креирања веб апликација.