Menu

Smernica AngularJS s našim prvým príkladom AngularJS

  • Hlavná
  • Iné
  • Smernica AngularJS s našim prvým príkladom AngularJS

angularjs directive with our first angularjs example

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Smernica AngularJS s prvým príkladom AngularJS:

Mali sme a krátke predstavenie AngularJS v našom predchádzajúcom návode. Tento tutoriál vám vysvetlí dôležité fakty, ktoré potrebujete vedieť o AngularJS.

predvolená brána nie je k dispozícii windows 10 wifi

AngularJS je open-source webový aplikačný rámec založený na JavaScripte.

Udržiava ho spoločnosť Google Corporation a veľká komunita. AngularJS je odpoveďou na rôzne nevýhody, s ktorými sa stretávajú pri formulovaní jednostránkových aplikácií.

Prečítajte si naše Celá séria AngularJS pre dôkladné znalosti o koncepte AngularJS.

Smernica a príklad AngularJS

Aplikačný rámec AngularJS funguje ako šablóna a môže znižovať problémy, ktorým čelia pri vývoji webových aplikácií.

Čo sa dozviete:

Prehľad AngularJS

AngularJS bol vydaný spoločnosťou Google dňa 20thOktóbra 2010 a dnes sa stala významným rámcom pre rôzne jednostránkové aplikácie rozhrania.

To je dôvod, prečo si AngularJS udržal svoju pozíciu napriek technologickému vývoju zlomovým tempom. Systém založený na rozhraní viacerých platforiem je tiež efektívnejší.

AngularJS dopĺňa a prináša výhody Apache Cordova, čo je rámec, ktorý sa používa pre mobilné aplikácie pre rôzne platformy. Má víziu zlepšenia skúseností a zjednodušenia testovania a vývoja webových aplikácií a poskytuje silný rámec pre vývoj ich aplikácií AngularJS.

Prečo používať AngularJS?

Nižšie sú uvedené rôzne funkcie a dôvody, pre ktoré by sa mala AngularJS používať pri vývoji webových aplikácií.

  1. Väzba údajov: Platforma poskytuje automatickú synchronizáciu údajov medzi modelom a prezeraným obsahom a vo veľkej miere tak šetrí váš čas a úsilie.
  2. Radič: Jedná sa o JavaScript, ktorý je viazaný na konkrétny rozsah.
  3. Služby: AngularJS má veľa zabudovaných služieb. Napr $ https
  4. Filtre: To pomáha pri výbere podmnožiny položiek z poľa a vráti ho do nového poľa.
  5. Smernice: Sú to značky na prvkoch DOM, ako sú atribúty, prvky CSS atď. Môžu byť použité ako vlastné značky HTML.
  6. Smerovanie: Pomáha pri vytváraní jednostránkových aplikácií. Je uvedená v adrese URL za znakom # a umožňuje vám vytvoriť rôzne adresy URL pre iný obsah vo vašej aplikácii.
  7. MVC: Znamená model, pohľad a ovládač. Je to návrhový vzor a používa sa na rozdelenie aplikácie na rôzne časti, tj. Model, Zobrazenie a Ovládač.
  8. Priame odkazy: Táto vlastnosť rámca aplikácie vám pomôže zakódovať stav aplikácie do adresy URL pre záložky. Neskôr bude možné aplikáciu v rovnakom stave obnoviť aj z adresy URL.
  9. Injekcia závislostí: AngularJS má tiež zabudovaný podsystém na vkladanie závislostí, ktorý môže vývojárovi pomôcť pri uľahčení, súdržnosti a jasnosti procesu vývoja a testovania.
  10. Rozsah: Sú to objekty, ktoré fungujú ako lepidlo medzi ovládačom a pohľadom.

Ako používať AngularJS?

Osobne si myslím, že na dnešnom trhu je ťažko k dispozícii nejaký lepší front-endový vývojový rámec pre webové aplikácie, ako je AngularJS.

Výukové programy, ako používať AngularJS, nie sú nijako frustrujúco zložité a skutočne mi tiež prišlo celkom ľahké ich sledovať. Môžete tiež využiť výhody obojsmerného väzobného systému, šablónového vybavenia, modularizácie, systému vstrekovania závislostí, funkcie AJAX Handling a ďalších funkcií tohto rámca.

Pred začatím kódovania by ste mali vedieť o koncepcii MVC (Model, View a Controller), skripte „Hello World“ a rôznych funkciách AngularJS.

Smernice AngularJS

AngularJS vám poskytuje veľké množstvo smernice ktoré vám umožňujú priradiť rôzne prvky HTML k údajom aplikácie. Sú to základné atribúty, ktoré sa začínajú kľúčovým slovom ng- .

Najdôležitejšia smernica, ktorú musíte zahrnúť na ktorúkoľvek stránku pri používaní AngularJS, je uvedená nižšie.

ng-app -

Je východiskovým bodom aplikácie AngularJS a musí sa pridať do každého prvku, ktorý obklopuje zvyšnú časť stránky, ako je napríklad prvok časti tela. AngularJS hľadá tento aspekt vždy, keď sa stránka načíta, a má tendenciu automaticky vyhodnocovať všetky rôzne smernice v kóde.

Smernice AngularJS zahŕňajú:

# 1) ng-app :Používa sa na spustenie aplikácie AngularJS. Keď sa načíta webová stránka obsahujúca aplikáciu AngularJS, automaticky zavedie aplikáciu definovaním koreňového prvku. V kóde HTML by mala byť použitá iba jedna smernica ng-app.

Ak sa však v kóde HTML nachádza viac ako jedna smernica o aplikácii ng, použije sa prvé zobrazenie.

Syntax:

{body of the HTML code}

# 2) tepla :Používa sa na inicializáciu aplikácie.

Poskytuje množinu hodnôt, ktoré je potrebné priradiť k premenným na účely inicializácie. Táto smernica sa často nepoužíva, pretože inicializácia premenných sa zvyčajne deje prostredníctvom špecifických funkcií v rámci projektu.

Syntax:

# 3) ng-controller: Používa sa, keď sa inicializácia premenných musí robiť na základe funkcie; tj. každá z premenných musí byť inicializovaná na základe funkčnej logiky. AngularJS vyvolá funkciu zadanú v smernici ng-controller s objektom.

Syntax:

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

# 4) ng-model :Používa sa na naviazanie hodnôt AngularJS na ovládacie prvky poskytované aplikáciou. Aby sme boli konkrétni, dáta načítané vstupom cez kontrolér a model budú viazané na zobrazenie (model MVC w.r.t.), ktoré sa zobrazí používateľovi.

Syntax:

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

ng-show a ng-hide: Tieto príkazy skrývajú a zobrazujú prvky, čo sa dá dosiahnuť nastavením štýlu zobrazenia CSS.

AngularJS vám tiež umožňuje definovať vlastné smernice. Používajú sa na rozšírenie funkčnosti HTML a sú definované pomocou funkcie „direktíva“. Jednoducho nahradia prvok, pre ktorý sú aktivované.

Cheat Sheet AngularJS pre mňa zachránil život. Existuje niekoľko ďalších pokynov, ktoré môžete skontrolovať na podvádzačke. Môžete sa dokonca naučiť, ako vytvárať vlastné smernice pomocou nástroja AngularJS. Na Cheat Sheet som našiel všetky pokyny a smernice platformy AngularJS, aby som zjednodušil veľa problémov.

Príklad AngularJS

Jednoduchý príklad AngularJS je možné napísať nasledovne:

Musíte vytvoriť súbor HTML, Napríklad , angularjsexample.html ako je uvedené nižšie.

nástroje na maskovanie údajov pre server SQL

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

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

Vo vyššie uvedenom príklade predstavuje skript JavaScript AngularJS.

Boli by ste prekvapení, keby ste vedeli, koľko aplikácií, ktoré denne používate, bolo vyvinutých na platforme AngularJS.

Tu je niekoľko mien:

  • The Guardian
  • PayPal
  • jetBlue
  • Lego
  • Prepracované
  • Netflix
  • Na voľnej nohe
  • iStock

Už z názvov vyššie je zrejmé, akú výšku môžete dosiahnuť, keď sa naučíte využívať tento rámec. Tieto stránky sú na vrchole svojej hry a veľká časť ich úspechu určite smeruje k ich efektívnosti práve preto, že boli vyvinuté na AngularJS.

Záver

Ak hľadáte vývoj a vývoj jednostránkových aplikácií pre mobilné alebo dokonca webové stránky, ako som bol kedysi - potom už nemusíte hľadať.

AngularJS je komplexné miesto pre vás, pretože táto stránka pomáha a umožňuje vývoj aplikácií oveľa pohodlnejším a súdržnejším. Nie je to skvelé len pre začiatočníkov, ale keď sa tým hlbšie zaoberáte, budete mať tendenciu učiť sa skúsenosťami a vyvíjať vynikajúce aplikácie.

Medzitým, v prípade, že inovujete na novšie verzie, nemusíte vyvíjať veľké úsilie. Len tým, že sa naučíte niekoľko nových príkazov a pochopíte nové vylepšenia, môžete začať vyvíjať aplikácie aj v nových verziách.

Pozrite si náš nadchádzajúci tutoriál a dozviete sa viac o vývoji jednostránkových webových aplikácií pomocou AngularJS.

Výukový program PREV | NEXT Tutorial

Odporúčané čítanie

^