Водич за модул АнгуларЈС са примером

Преглед садржаја:

Anonim

Шта је АнгуларЈС модул?

Модул дефинише функционалност апликације која се примењује на целу ХТМЛ страницу помоћу нг-апп директиве. Дефинише функционалност, попут услуга, директива и филтера, на начин који олакшава поновну употребу у различитим апликацијама.

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

У овом упутству ћете научити-

  • Како створити модул у АнгуларЈС
  • Модули и контролери

Како створити модул у АнгуларЈС

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

Размотримо стварање датотеке под називом "ДемоЦонтроллер.јс" и додавање доњег кода у датотеку

Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});

У горе наведеном коду створили смо функцију названу „ДемоЦонтроллер“ која ће деловати као контролер у нашој апликацији.

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

Сада креирајмо наш главни Сампле.хтмл, који ће бити наша главна апликација. Убацимо доњи исечак кода у нашу ХТМЛ страницу.

<боди нг-апп = ""><див нг-цонтроллер = "ДемоЦонтроллер"><х3> Гуру99 глобални догађај {{ц}}

У горњи код смо укључили наш ДемоЦонтроллер, а затим позивањем вредности променљиве $ сцопе.ц путем израза.

Али обратите пажњу на нашу директиву нг-апп, она има празну вредност.

  • То у основи значи да се свим контролерима који се позивају у контексту директиве нг-апп може приступити глобално. Не постоји граница која раздваја више контролера један од другог.
  • Сада је у модерном програмирању лоша пракса да контролори нису повезани на било који модул и чине их глобално доступним. Мора постојати нека логичка граница за контролере.

И ту модули долазе. Модули се користе за стварање раздвајања граница и помоћ у раздвајању контролера на основу функционалности.

Променимо горњи код за примену модула и прикључимо наш контролер на овај модул

var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});

Забележимо кључне разлике у горе написаном коду

  1. var sampleApp = angular.module('sampleApp',[]);

    Ми посебно креирамо АнгуларЈС модул под називом 'самплеАпп'. Ово ће формирати логичку границу за функционалност коју ће овај модул садржати. Дакле, у нашем горњем примеру имамо модул који садржи контролер који врши улогу додавања 2 објекта опсега. Дакле, можемо имати један модул са логичком границом који каже да ће овај модул изводити само функционалност математичких прорачуна за апликацију.

  2. sampleApp.controller('DemoController', function($scope)

    Сада прикључујемо контролер на наш АнгуларЈС модул "СамплеАпп". То значи да ако у нашем главном ХТМЛ коду не упутимо референцу на модул „самплеАпп“, нећемо бити у могућности да упућујемо на функционалност нашег контролера.

Наш главни ХТМЛ код неће изгледати као што је приказано у наставку



Guru99 Global Event

{{c}}

Забележимо кључне разлике у горе написаном коду и нашем претходном коду



У нашој телесној ознаци,


    

  • Уместо да имамо празну нг-апп директиву, сада позивамо модул самплеАпп.
    • 

  • Позивањем овог апликационог модула, сада можемо приступити контролеру 'ДемоЦонтроллер' и функцијама присутним у демо контролеру.
    • 




Модули и контролери


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


Модули ће се обично чувати у одвојеним Јавасцрипт датотекама, које би се разликовале од главне датотеке апликације.


Погледајмо пример како се то може постићи.





У доњем примеру,


    

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

  • Затим ћемо створити 2 одвојене датотеке апликације и приступити датотеци услужног програма из сваке датотеке апликације.
    • 

  • У једној апликационој датотеци приступићемо модулу за сабирање, а у другој модулу за одузимање.
    • 



Корак 1) Дефинишите код за више модула и контролера.


var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});


Забележимо кључне тачке горе написаног кода


    

  1. 

     var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);
    

    Постоје два одвојена углата модула, један коме је дато име 'АддитионАпп', а другом 'СубтрацтионАпп'.
    

    2. 

  2. 

    AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)
    

    Постоје 2 одвојена контролера дефинисана за сваки модул, један се назива ДемоАддЦонтроллер, а други је ДемоСубтрацтЦонтроллер. Сваки контролер има засебну логику за сабирање и одузимање бројева.
    


    

    3. 



Корак 2) Направите главне датотеке апликације. Направимо датотеку која се зове АпплицатионАддитион.хтмл и додајте доњи код


Addition
Addition :{{c}}


Забележимо кључне тачке горе написаног кода


    

  1. 

    

    Наводимо датотеку Утилитиес.јс у нашој главној датотеци апликације. Ово нам омогућава референцу на било који АнгуларЈС модул дефинисан у овој датотеци.
    

    2. 

  2. 

    

    Приступамо модулу 'АддитионАпп' и ДемоАддЦонтроллер користећи директиву нг-апп и нг-цонтроллер.
    

    3. 

  3. 

    {{c}}
    

    Будући да упућујемо на горе поменути модул и контролер, у могућности смо да упутимо референцу на променљиву $ сцопе.ц путем израза. Израз ће бити резултат додавања 2 променљиве опсега а и б које је изведено у контролеру 'ДемоАддЦонтроллер'
    

    На исти начин као и за функцију одузимања.
    

    4. 



Корак 3) Направите главне датотеке апликације. Направимо датотеку под називом "АпплицатионСубтрацтион.хтмл" и додајте доњи код


Addition
Subtraction :{{d}}


Забележимо кључне тачке горе написаног кода


    

  1. 

    

    Наводимо датотеку Утилитиес.јс у нашој главној датотеци апликације. То нам омогућава референцу на било који модул дефинисан у овој датотеци.
    

    2. 

  2. 

    

    Приступамо модулу „СубтрацтионАпп“ и „ДемоСубтрацтЦонтроллер“ користећи директиву нг-апп и нг-цонтроллер.
    

    3. 

  3. 

    {{d}}
    

    Будући да упућујемо на горе поменути модул и контролер, у могућности смо да упутимо референцу на променљиву $ сцопе.д путем израза. Израз ће бити резултат одузимања 2 променљиве опсега а и б које је изведено у контролеру 'ДемоСубтрацтЦонтроллер'
    

    4. 



Резиме


    

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

  • Модули се користе за одвајање пословне логике. Може се створити више модула који ће се логички раздвојити унутар ових различитих модула.
    • 

  • Сваки модул АнгуларЈС може имати свој властити сет контролера који му је дефинисан и додијељен.
    • 

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