Přehled AngularJS

Ve společnosti Brat Tech LLC v roce 2009 vyvinuli vývojáři Misko Hevery a Adam Abrons rámec AngularJS, po kterém došlo k revoluci ve vývoji front-end a vytváření jednostránkových aplikací. AngularJS je rámec javascript, který spojuje prvky HTML s objekty javascript. Vázání dat a závislost injekce jsou některé z hlavních funkcí AngularJs, které šetří čas při psaní zdlouhavých kódů, což vývojářům a prohlížečům usnadňuje práci. Jak je toho dosaženo, bude hlouběji vysvětleno, ale prozatím si jen pamatujete tyto terminologie. V tomto tématu se budeme učit o verzi AngularJS.

Verze AngularJS

AngularJS je verze Angular 1.x a poté je vyvinut Angular 2, který se liší od Angular 1.x. funguje.

Proč verze AngularJS a jak to funguje?

AngularJS nám pomáhá vyvíjet interaktivní jednostránkové aplikace. Jednostránkovými aplikacemi mám na mysli, že jedna navštívená stránka načte veškerý další obsah pomocí javascriptu. Tato funkce pomáhá aplikaci být rychlá a efektivní.

Když použijeme javascript a html k vytváření aplikací, budete muset svázat pohled k modelu pomocí funkcí a objektů JS. Ale pokud si myslíte, že tato obousměrná datová vazba je v praktickém průmyslovém použití stejná, stává se zdlouhavá s dlouhými kódy. To je jeden z hlavních důvodů, proč bylo nutné se učit a rozvíjet AngularJS.

Je čas se naučit některé základní pojmy, než začnete vyvíjet aplikace, na nichž je AngularJS postaven:

  • Model: Model obsahuje data, objekty a logiku.
  • Pohled: Jedná se o vizuální prezentaci aplikace, která se také nazývá uživatelské rozhraní.
  • Vazba View to Model obousměrně: Objekt javascript, tj. Objekt, který chcete navázat na Html DOM, například pro textové pole, vstup nebo jakékoli značky Html, a naopak, lze snadno provést pomocí některých předdefinovaných knihoven AngularJS.
  • Řadiče: Řadiče jsou funkce javascriptu, které spojují model a pohled.
  • Služby: Služby AngularJS jsou funkce javascript, které provádějí konkrétní úkol nebo funkce, které jsou udržovány a testovány pomocí javascriptu. Mezi příklady služeb patří $ range, $ http, $ rootScope.
  • Výrazy: Výrazy se používají k vazbě dat s Html. Tato funkce se také nazývá interpolace. Výrazy jsou psány s ((expression)) složenými závorkami. Výrazy jsou hodnoceny a lze je psát bez značek html.
  • Moduly: Moduly fungují jako kontejner obsahující různé části úhlové aplikace, jako je řadič, služby, směrnice atd.

Směrnice a oblast působnosti

Zaměřme se na některé z předdefinovaných směrnic a na to, jak skutečně fungují. Většina této směrnice začíná „ng“ převzatou z Angular

1. Rozsah

  • Rozsah definuje objekt javascript, pomocí kterého mohou být data přístupná z Modelu do HTML. Rozsah funguje jako spojnice mezi nimi.
  • Některé služby oboru jsou $ obor, $ rootScope. '$' definuje, že tyto služby jsou předdefinovány a nelze je měnit. Pamatujte, že HTML nerozlišuje velká a malá písmena, ale AngularJS rozlišuje velká a malá písmena, takže $ Scope vyvolá chybu jako nedefinovanou.
  • Je nutné je deklarovat v naší funkci regulátoru a úhlová injektáž ji automaticky.

2. ng-řadič

  • Tato směrnice se používá k vytvoření instance / objektu řadiče, prostřednictvím kterého bude HTML DOM komunikovat se skutečnou logikou.
  • HTML říká, že jakákoli značka s '-' bude při vytváření Html DOMu ignorována.
  • Jakmile je DOM vytvořen, úhlový interpret najde direktivu ng-řadiče a vytvoří instanci konkrétního řadiče poskytujícího také službu $ range.
  • Na jedné stránce HTML může být mnoho regulátorů ng.

3. ng-app

  • Tato směrnice funguje jako kontejner obsahující řadiče, směrnice, filtry, výrazy atd. Registruje nebo spouští aplikaci nebo modul.
  • Ve vašem Html je pouze jedna aplikace ng. Pod jednou ng-aplikací může být mnoho ng-kontrolerů.

Tím dojde k vytvoření instance aplikace pomocí služby $ rootScope.

  • Proměnné / funkce $ rootScope jsou tedy přístupné v kompletní aplikaci.

4. ng-model

  • ng-model se používá k vazbě dat z html na modelový objekt. Poskytuje obousměrné vázání.

5. ng-if

  • K provádění podmíněných příkazů na Html tagech ng-if se používá. Pokud je podmínka chybná, potom DOM nezahrnuje dané div na DOM.

6. ng-bind

  • Namísto použití (()) pro interpolaci lze použít také ng-bind.

7. ng-disabled

  • Na základě podmínky lze prvek v pohledu deaktivovat.

8. ng-show

  • Pokud je daná podmínka pro ng-show pravdivá, pak se daný prvek zobrazí na DOM.

9. ng-skrýt

  • Pokud je daná podmínka pro ng-hide pravdivá, zůstane konkrétní prvek v DOMu skrytý.

10. ng-opakování

  • Bude opakovat konkrétní div nebo rozpětí na Html s délkou pole nebo seznamu.

11. ng-click

  • Po kliknutí na událost na prvku html provede zadanou funkci nebo úkol.

Tip: Nejlepší způsob, jak se naučit jakýkoli jazyk, je jeho kódování. Podívejme se tedy na náš první kód.

Příklady verze AngularJS

Zde je několik příkladů uvedených níže




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ýstup:

Křestní jméno: Joseph
Příjmení: Alex
Vaše jméno je: Joseph Alex

Z výše uvedeného fragmentu kódu je třeba zaostřit několik bodů:

  • Na řádek 3 je na stránku přidán soubor angular.min.js, který načte všechny potřebné knihovny pro spuštění aplikace AngularJS.
  • AngularJS má převážně 2 knihovny angular.js a komprimovanou verzi tohoto souboru jako angular.min.js.
  • Na řádku 5 vidíte direktivu jako ng-app, která je ignorována Html při vytváření Html DOM a převzata AngularJS jako jedna ze směrnic pro spuštění aplikace.
  • Na řádku 6, 7 se používá model, který váže text, který zadáte do textového pole, k proměnným fname a lname. Pamatujte, že tyto proměnné rozlišují velká a malá písmena.
  • Na řádku 8 uvidíte výraz ((fname + "" + lname)), který úhel vyhodnotí a zobrazí data, která zadáte do textových polí. Toto je známo jako interpolace.

Podívejme se na další příklad:



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

Jméno:

Příjmení:

Jméno zákazníka je ((customerName)) a věk je ((customerAge))

V tomto příkladu je na řádku 5 vytvořena aplikace s názvem CustomerApp, která bude zahrnovat všechny části aplikace. Na úplně dalším řádku je vytvořen řadič a pojmenován jako firstController. $ obor je deklarován jako funkční parametr. AngularJS ji automaticky vloží do aplikace pro přímé použití, vývojář ji nemusí explicitně vytvářet.

Tato funkce se nazývá injekce závislosti. Podobným způsobem je ng-řadič použit pro stejný řadič pod značkou ng-app. Nezapomeňte, že rozsah aplikace nebo řadiče bude tam, kde končí div nebo na cokoli definujete aplikaci nebo řadič. V tomto případě nemůžete přistupovat k řadiči nebo aplikaci po řádku 16.

Doporučené články

Toto je průvodce What is AngularJS Version. Zde diskutujeme verze AngularJS se směrnicemi, rozsahem a způsobem fungování AngularJS. Další informace naleznete také v následujících článcích -

  1. AngularJS Architecture
  2. Úhlová JS aplikace
  3. AngularJS Unit Testing
  4. Kariéra v AngularJS
  5. Co je Angular 2?

Kategorie:

Vývoj softwaru