Мени

Директива АнгуларЈС са нашим првим примером АнгуларЈС

  • Главни
  • Остало
  • Директива АнгуларЈС са нашим првим примером АнгуларЈС

angularjs directive with our first angularjs example

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

Директива АнгуларЈС са првим примером АнгуларЈС:

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

АнгуларЈС је оквир веб апликација отвореног кода заснован на ЈаваСцрипт-у.

Одржава га Гоогле Цорпоратион и велика заједница. АнгуларЈС је одговор на разне недостатке који се појављују приликом формулисања апликација на једној страници.

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

АнгуларЈС директива и пример

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

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

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

Гоогле је 20. августа објавио АнгуларЈСтхОктобра 2010. и данас је постао значајан оквир за различите апликације интерфејса са једном страницом.

кружно повезана листа ц ++

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

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

Зашто користити АнгуларЈС?

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

  1. Подаци везивања: Платформа омогућава аутоматску синхронизацију података између модела и садржаја прегледа и као резултат, у великој мери штеди ваше време и труд.
  2. Контролер: То су ЈаваСцрипт који је везан за одређени опсег.
  3. Услуге: АнгуларЈС има много уграђених услуга. На пример $ хттпс
  4. Филтери: Ово помаже у одабиру подскупина предмета из низа и враћа га у нови низ.
  5. Директиве: Они су маркери на ДОМ елементима као што су атрибути, ЦСС елементи итд. Они се могу користити као прилагођене ознаке ХТМЛ-а.
  6. Рутирање: Помаже у стварању апликација на једној страници. Наведено је у УРЛ-у иза знака # и омогућава вам да креирате различите УРЛ-ове за различит садржај у својој апликацији.
  7. МВЦ: Постоља за модел, приказ и контролер. То је образац дизајна и користи се за поделу апликације на различите делове, тј. Модел, приказ и контролер.
  8. Дубоко повезивање: Ова функција оквира апликације помаже вам да кодирате стање апликације у УРЛ-у за обележавање. Касније се апликација такође може вратити из УРЛ-а у истом стању.
  9. Убризгавање зависност: АнгуларЈС такође има уграђени подсистем за убризгавање зависности који програмеру може бити од помоћи да процес развоја и тестирања учини лакшим, кохезивним и директним.
  10. Обим: То су предмети који делују као лепак између контролера и погледа.

Како се користи АнгуларЈС?

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

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

Пре започињања кодирања, требали бисте знати о МВЦ концепту (Модел, Виев и Цонтроллер), скрипти „Хелло Ворлд“ и разним карактеристикама АнгуларЈС.

АнгуларЈС директиве

АнгуларЈС вам пружа велики број директиве који вам омогућавају да различите ХТМЛ елементе повежете са подацима апликације. Они су основни атрибути који почињу са кључном речи нг- .

Најважнија директива коју морате укључити на било коју страницу док користите АнгуларЈС дата је у наставку.

ng-app -

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

Директиве АнгуларЈС укључују:

# 1) нг-апп :Ово се користи за покретање апликације АнгуларЈС. Када се учита веб страница која садржи апликацију АнгуларЈС, она аутоматски покреће апликацију дефинисањем основног елемента. У вашем ХТМЛ коду треба користити само једну директиву нг-апп.

Међутим, ако се у ХТМЛ коду нађе више од једне директиве нг-апп, користиће се прво појављивање.

Синтакса:

{body of the HTML code}

# 2) топлоте :Ово се користи за иницијализацију апликације.

Пружа скуп вредности које морају бити повезане са променљивим ради иницијализације. Ова се директива не користи често јер се иницијализација променљивих обично дешава кроз одређене функције у пројекту.

Синтакса:

# 3) нг-контролер: Користи се када се иницијализација променљивих мора извршити на основу функције; тј. свака од променљивих мора бити иницијализована на основу логике функције. АнгуларЈС позива функцију наведену у директиви нг-цонтроллер са објектом.

Синтакса:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) нг-модел :Ово се користи за везивање вредности АнгуларЈС за контроле које пружа апликација. Да будемо прецизнији, подаци које улаз улази кроз контролер и модел биће везани за приказ (в.р.т. МВЦ модел) који ће бити представљен кориснику.

Синтакса:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

нг-схов и нг-хиде: Ове наредбе скривају и приказују елементе, што се постиже подешавањем ЦСС стила приказа.

АнгуларЈС такође вам омогућава да дефинишете прилагођене директиве. Користе се за проширење функционалности ХТМЛ-а и дефинишу се помоћу функције „директива“. Једноставно замењују елемент за који су активирани.

АнгуларЈС Цхеат Схеет ми је спасио живот. Постоји низ других смерница које можете проверити на Цхеат Схеет-у. Можете чак и да научите како да правите прилагођене директиве коришћењем АнгуларЈС. Нашао сам сва упутства и упутства платформе АнгуларЈС на Цхеат Схеет-у да поједноставим многа питања.

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

Једноставан пример АнгуларЈС може се написати на следећи начин:

Треба да креирате ХТМЛ датотеку, На пример , ангуларјсекампле.хтмл како је приказано испод.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

У горњем примеру, скрипта представља АнгуларЈС ЈаваСцрипт.

Изненадили бисте се када бисте сазнали колико је апликација које свакодневно користите развијено на платформи АнгуларЈС.

Ево неколико имена:

  • Старатељ
  • ПаиПал
  • јетБлуе
  • Лего
  • Упворк
  • Нетфлик
  • Слободњак
  • иСтоцк

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

Закључак

Ако желите да правите и развијате апликације на једној страници за мобилне уређаје или чак веб локације, попут онога какав сам био некад, онда не тражите даље.

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

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

који је најбољи бесплатни музички довнлоадер за андроид

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

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

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

^