Čo je AngularJS? - Naučte sa verzie AngularJS so smernicami

• Prehľad AngularJS

Prehľad AngularJS

V spoločnosti Brat Tech LLC v roku 2009 vývojári Misko Hevery a Adam Abrons vyvinuli rámec AngularJS, po ktorom došlo k revolúcii v oblasti vývoja front-end a vytvárania jednostránkových aplikácií. AngularJS je rámec javascript, ktorý spája prvky HTML s objektmi javascript. Väzba údajov a vstrekovanie závislosti sú niektoré z hlavných vlastností AngularJs, ktoré šetria čas pri písaní dlhých kódov, čo uľahčuje vývojárom a prehliadačom prácu. Ako sa to dosiahne, sa hlbšie vysvetlí, ale zatiaľ si tieto terminológie pamätáte. V tejto téme sa dozvieme o verzii AngularJS.

Verzie AngularJS

AngularJS je verzia Angular 1.x a následne je vyvinutá Angular 2, ktorá sa líši od Angular 1.x. Tvorba.

Prečo verzia AngularJS a ako to funguje?

AngularJS nám pomáha vyvíjať interaktívne jednostránkové aplikácie. Jednostránkovými aplikáciami mám na mysli, že jedna navštívená stránka načíta všetok ostatný obsah pomocou javascriptu. Táto funkcia pomáha aplikácii byť rýchla a efektívna.

Keď na vytváranie aplikácií použijeme javascript a html, budete musieť zviazať pohľad na model pomocou funkcií a objektov JS. Ak si však myslíte, že tieto obojsmerné viazanie údajov je v praktickej priemyselnej aplikácii rovnaké, zdĺhavé kódy budú zdĺhavé. To je jeden z hlavných dôvodov, prečo bolo potrebné učiť sa a rozvíjať AngularJS.

Je čas naučiť sa niektoré základné pojmy pred tým, ako sa začnú vyvíjať aplikácie, na ktorých je AngularJS postavený:

• Model: Model obsahuje údaje, objekty a logiku.
• Zobraziť: Je to vizuálna prezentácia aplikácie, ktorá sa tiež nazýva užívateľské rozhranie.
• Viazanie pohľadu na model: Väzba typu javascript, tj objekt, ktorý chcete naviazať na Html DOM, napríklad pre textové pole, vstup alebo akékoľvek značky Html, a naopak, sa dá ľahko vykonať pomocou niektorých preddefinovaných knižníc AngularJS.
• Ovládače: Ovládače sú funkcie javascript, ktoré spájajú model a pohľad.
• Služby: Služby AngularJS sú funkcie javascript, ktoré vykonávajú špecifickú úlohu alebo funkcie, ktoré sú udržiavané a testované pomocou javascriptu. Niektoré z príkladov služieb sú $ rozsah, $ http, $ rootScope.
• Výrazy: Výrazy sa používajú na viazanie údajov s html. Táto vlastnosť sa tiež nazýva interpolácia. Výrazy sú písané ((expression)) zloženými zátvorkami. Výrazy sa vyhodnotia a dajú sa písať bez značiek HTML.
• Moduly: Moduly fungujú ako kontajner obsahujúci rôzne časti uhlovej aplikácie, ako je radič, služby, smernice atď.

Smernice a rozsah pôsobnosti

Zamerajme sa na niektoré z preddefinovaných smerníc a na to, ako v skutočnosti fungujú. Väčšina tejto smernice začína na „ng“ prevzatú z Angular

1. Rozsah pôsobnosti

• Rozsah definuje objekt javascript, pomocou ktorého môžu byť údaje prístupné z Modelu do HTML. Rozsah pôsobnosti funguje ako spojka medzi nimi.
• Niektoré služby rozsahu sú $ rozsah, $ rootScope. '$' definuje, že tieto služby sú vopred definované a nemôžu byť zmenené. Pamätajte, že HTML nerozlišuje veľké a malé písmená, ale AngularJS rozlišuje veľké a malé písmená, takže $ Scope vyvolá chybu ako nedefinovanú.
• Je potrebné ich uviesť v našej funkcii regulátora a uhlové vstrekovanie automaticky.

2. ng-ovládač

• Táto smernica sa používa na vytvorenie inštancie / objektu radiča, prostredníctvom ktorého bude HTML DOM komunikovať so skutočnou logikou.
• HTML hovorí, že pri vytváraní Html DOM bude ignorovaná akákoľvek značka s znakom „-“.
• Po vytvorení DOM nájde Angular interpreter direktívu ng-controller a vytvorí inštanciu konkrétneho radiča, ktorý tiež poskytuje službu rozsahu $.
• Na jednej stránke HTML môže byť veľa regulátorov ng.

3. ng-app

• Táto smernica slúži ako kontajner obsahujúci ovládače, smernice, filtre, výrazy atď. Registruje alebo spúšťa aplikáciu alebo modul.
• Vo vašom html je iba jedna ng-aplikácia. Pod jednou ng-aplikáciou môže byť veľa ng-kontrolérov.

Toto vytvorí inštanciu objektu aplikácie pomocou služby $ rootScope.

• Takže $ rootScope premenné / funkcie sú prístupné v kompletnej aplikácii.

4. ng-model

• ng-model sa používa na naviazanie údajov z html na modelový objekt. Poskytuje obojsmerné viazanie.

5. ng-ak

• Na vykonávanie podmienených príkazov v html značkách ng-if sa používa. Ak je podmienka neplatná, potom DOM nezahŕňa dané div v DOM.

6. ng-väzba

• Namiesto použitia (()) na interpoláciu sa môže použiť aj ng-bind.

7. ng-postihnutých

• Na základe stavu môže byť prvok v zobrazení zakázaný.

8. ng-show

• Ak je daná podmienka pre ng-show pravdivá, konkrétny prvok sa zobrazí na DOM.

9. ng-hide

• Ak je daná podmienka pre ng-hide pravdivá, konkrétny prvok zostane skrytý v DOM.

10. ng-opakovanie

• Bude opakovať konkrétne delenie alebo rozpätie v Html s dĺžkou poskytnutého poľa alebo zoznamu.

11. ng-click

• Po kliknutí na udalosť na prvku html vykoná zadanú funkciu alebo úlohu.

Tip: Najlepším spôsobom, ako sa naučiť akýkoľvek jazyk, je jeho kódovanie. Pozrime sa teda na náš prvý kód.

Príklady verzie AngularJS

Tu je niekoľko príkladov uvedených nižšie




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))



Výkon:

Meno: Joseph
Priezvisko: Alex
Vaše meno je: Joseph Alex

Z vyššie uvedeného útržku kódovania je potrebné zamerať niekoľko bodov:

• Na riadok 3 sa na stránku pridá súbor angular.min.js, ktorý načíta všetky potrebné knižnice na spustenie aplikácie AngularJS.
• AngularJS má hlavne 2 knižnice angular.js a komprimovanú verziu tohto súboru ako angular.min.js.
• Na riadku 5 vidíte direktívu ako ng-aplikáciu, ktorú ignoruje Html pri vytváraní Html DOM a AngularJS ju prijíma ako jednu zo svojich direktív na spustenie aplikácie.
• V riadku 6, 7 sa používa model, ktorý spojí text, ktorý zadáte do textového poľa, s premennými fname a lname. Pamätajte, že tieto premenné rozlišujú veľké a malé písmená.
• Na riadku 8 vidíte výraz ((fname + "" + lname)), ktorý uhol vyhodnotí a zobrazí údaje, ktoré zadáte do textových polí. Toto je známe ako interpolácia.

Pozrime sa na jeden ďalší príklad:



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



Krstné meno:

Priezvisko:

Meno zákazníka je ((customerName)) a vek je ((customerAge))

V tomto príklade sa na riadku 5 vytvorí aplikácia s názvom CustomerApp, ktorá bude obsahovať všetky časti aplikácie. Na úplnom nasledujúcom riadku sa vytvorí kontrolér s menom firstController. $ rozsah je deklarovaný ako parameter funkcie. AngularJS ju automaticky vloží do aplikácie na priame použitie, vývojár ju nemusí explicitne vytvárať.

Táto funkcia sa nazýva injekcia závislosti. Podobným spôsobom sa ng-kontrolér používa pre rovnaký kontrolér pod značkou ng-app. Pamätajte, že rozsah aplikácie alebo ovládača bude taký, kde sa končí koniec divu alebo čokoľvek, kam definujete aplikáciu alebo kontrolér. V tomto prípade nemôžete pristupovať k radiču alebo aplikácii po riadku 16.

Odporúčané články

Toto je príručka k verzii AngularJS. Tu diskutujeme o verziách AngularJS so smernicami, rozsahom a ako Ang AngelJS funguje. Ďalšie informácie nájdete aj v nasledujúcich článkoch -

1. AngularJS Architecture
2. Uhlová aplikácia JS
3. AngularJS Unit Testing
4. Kariéra v AngularJS
5. Čo je Angular 2?