Menu

Směrnice AngularJS s naším prvním příkladem AngularJS

  • Hlavní
  • Jiný
  • Směrnice AngularJS s naším prvním příkladem AngularJS

angularjs directive with our first angularjs example

Vyzkoušejte Náš Nástroj Pro Odstranění Problémů

Směrnice AngularJS s prvním příkladem AngularJS:

Měli jsme krátký úvod do AngularJS v našem předchozím tutoriálu. Tento výukový program vám vysvětlí důležitá fakta, která potřebujete o AngularJS vědět.

AngularJS je open-source framework pro webové aplikace založený na JavaScriptu.

Udržuje jej společnost Google Corporation a velká komunita. AngularJS je odpovědí na různé nevýhody, se kterými se setkáváme při formulování jednostránkových aplikací.

Přečtěte si naše Celá řada AngularJS pro podrobné znalosti o konceptu AngularJS.

Směrnice a příklad AngularJS

Aplikační rámec AngularJS funguje jako šablona a může snížit výzvy, kterým čelí během vývoje webových aplikací.

Co se naučíte:

Přehled AngularJS

AngularJS byl vydán společností Google dne 20thŘíjna 2010 a dnes se stala významným rámcem pro různé jednostránkové aplikace rozhraní.

To je důvod, proč si AngularJS udržela svoji pozici navzdory technologickému vývoji zlomovým tempem. Systém založený na multiplatformním rozhraní je také efektivnější.

AngularJS doplňuje a přináší výhody Apache Cordova, což je rozhraní, které se používá pro mobilní aplikace pro různé platformy. Má vizi zlepšení zkušeností a zjednodušení testování a vývoje webových aplikací a poskytuje robustní rámec pro vývoj jejich aplikací AngularJS.

Proč používat AngularJS?

Níže jsou uvedeny různé funkce a důvody, pro které by měl být AngularJS použit při vývoji webových aplikací.

  1. Vazba dat: Platforma poskytuje automatickou synchronizaci dat mezi modelem a obsahem zobrazení a ve výsledku do značné míry šetří váš čas i úsilí.
  2. Ovladač: Jedná se o JavaScript, který je vázán na určitý rozsah.
  3. Služby: AngularJS má mnoho vestavěných služeb. Např $ https
  4. Filtry: To pomáhá při výběru podmnožiny položek z pole a vrátí jej do nového pole.
  5. Směrnice: Jsou to značky na prvcích DOM, jako jsou atributy, prvky CSS atd. Lze je použít jako vlastní značky HTML.
  6. Směrování: Pomáhá při vytváření jednostránkových aplikací. Je zadán v adrese URL za znaménkem # a umožňuje vám vytvářet různé adresy URL pro různý obsah ve vaší aplikaci.
  7. MVC: Stojany pro model, pohled a ovladač. Jedná se o návrhový vzor a slouží k rozdělení aplikace do různých částí, tj. Model, Pohled a Řídicí jednotka.
  8. Přímé odkazy: Tato funkce rámce aplikace vám pomůže zakódovat stav aplikace do adresy URL pro záložky. Později lze aplikaci také obnovit z adresy URL ve stejném stavu.
  9. Injekce závislostí: AngularJS má také zabudovaný podsystém pro vkládání závislostí, který může vývojáři pomoci, aby byl proces vývoje a testování snazší, soudržnější a přímočarější.
  10. Rozsah: Jedná se o objekty, které fungují jako lepidlo mezi řadičem a pohledem.

Jak používat AngularJS?

Osobně se domnívám, že na dnešním trhu je sotva nějaký lepší rámec pro vývoj front-endových webových aplikací, než je AngularJS.

Výuky o tom, jak používat AngularJS, nejsou nijak frustrujícím způsobem složité a opravdu jsem je také snadno sledoval. Můžete využít výhod obousměrného vazebního systému, šablonových zařízení, modularizace, systému vkládání závislostí, funkce AJAX Handling a dalších funkcí tohoto rámce.

Před zahájením kódování byste měli vědět o konceptu MVC (Model, View a Controller), skriptu „Hello World“ a různých funkcích AngularJS.

Směrnice AngularJS

AngularJS vám poskytuje velké množství směrnice které vám umožní přidružit různé prvky HTML k datům aplikace. Jsou to základní atributy, které začínají klíčovým slovem ng- .

Níže je uvedena nejdůležitější směrnice, kterou musíte při používání AngularJS zahrnout na jakoukoli stránku.

ng-app -

Je výchozím bodem aplikace AngularJS a musí být přidán k jakémukoli prvku, který obklopuje zbytek části stránky, jako je prvek části těla. AngularJS hledá tento aspekt vždy, když se stránka načte, a má tendenci automaticky vyhodnocovat všechny různé směrnice v kódu.

Směrnice AngularJS zahrnují:

# 1) ng-aplikace :Používá se ke spuštění aplikace AngularJS. Když se načte webová stránka obsahující aplikaci AngularJS, automaticky ji zavede definováním kořenového prvku. Ve vašem kódu HTML by měla být použita pouze jedna směrnice ng-app.

Pokud se však v kódu HTML nachází více než jedna direktiva ng-app, použije se první vzhled.

Syntax:

{body of the HTML code}

# 2) tepla :Slouží k inicializaci aplikace.

Poskytuje sadu hodnot, které musí být přidruženy k proměnným pro účely inicializace. Tato směrnice se často nepoužívá, protože inicializace proměnných se obvykle děje prostřednictvím konkrétních funkcí v rámci projektu.

Syntax:

# 3) ng-controller: Používá se, když je třeba inicializaci proměnných provést na základě funkce; tj. každá z proměnných musí být inicializována na základě funkční logiky. AngularJS vyvolá funkci určenou ve směrnici ng-controller s objektem.

Syntax:

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

# 4) ng-model :Používá se k navázání hodnot AngularJS na ovládací prvky poskytované aplikací. Konkrétně budou data načtená vstupem prostřednictvím ovladače a modelu vázána na zobrazení (model MVC w.r.t.), které bude uživateli prezentováno.

Syntax:

jak vytvořit makefile c ++
Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show a ng-hide: Tyto příkazy skryjí a zobrazují prvky, čehož je dosaženo nastavením stylu zobrazení CSS.

AngularJS také umožňuje definovat vlastní směrnice. Používají se k rozšíření funkčnosti HTML a jsou definovány pomocí funkce „směrnice“. Jednoduše nahradí prvek, pro který jsou aktivovány.

Cheat Sheet AngularJS pro mě zachránil život. Existuje několik dalších pokynů, které můžete zkontrolovat na podváděcím listu. Můžete se dokonce naučit, jak vytvářet vlastní směrnice pomocí AngularJS. Na Cheat Sheet jsem našel všechny pokyny a směrnice platformy AngularJS, abych zjednodušil mnoho problémů.

Příklad AngularJS

Jednoduchý příklad AngularJS lze napsat následovně:

Musíte vytvořit soubor HTML, Například , angularjsexample.html Jak je ukázáno níže.

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

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

Ve výše uvedeném příkladu představuje skript JavaScript AngularJS.

Byli byste překvapeni, kdybyste věděli, kolik aplikací, které denně používáte, bylo vyvinuto na platformě AngularJS.

Zde je několik jmen:

  • Opatrovník
  • PayPal
  • jetBlue
  • lego
  • Upwork
  • Netflix
  • Nezávislý pracovník
  • iStock

Z výše uvedených jmen je zřejmé, jakou výšku můžete dosáhnout, když se naučíte používat tento rámec. Tyto stránky jsou na vrcholu své hry a velká část jejich úspěchu rozhodně jde o efektivitu stránek jen proto, že byly vyvinuty na AngularJS.

Závěr

Pokud hledáte vytváření a vývoj jednostránkových aplikací pro mobilní nebo dokonce webové stránky, jako kdybych byl kdysi - pak už nehledejte.

AngularJS je pro vás jediným kontaktním místem, protože tento web pomáhá a činí vývoj aplikací mnohem pohodlnějším a soudržnějším. Není to skvělé jen pro začátečníky, ale jak se do toho ponoříte hlouběji, budete mít tendenci se učit se zkušenostmi a vyvíjet skvělé aplikace.

Mezitím, pokud upgradujete na novější verze, nemusíte vynaložit velké úsilí. Pouhým naučením se několika nových příkazů a pochopením nových vylepšení můžete také začít vyvíjet aplikace v nových verzích.

Podívejte se na náš nadcházející výukový program a dozvíte se více o vývoji jednostránkových webových aplikací pomocí AngularJS.

Výukový program PREV | DALŠÍ výuka

Doporučené čtení

^