Sprievodca pre začiatočníkov k vytváraniu webových aplikácií pomocou AngularJS

domovská stránka angularjs

Pripojte sa k rámcu webových aplikácií spoločnosti Google

Ak ste profesionálny vývojár JavaScriptu, pravdepodobne ste už o tom počuli Ember.js (rámec JavaScript s otvoreným zdrojovým kódom) a Backbone.js (knižnica JavaScript s rozhraním RESTful JSON). Ale ak nie ste oboznámení s AngularJS napriek tomu vám budú chýbať niektoré z jeho veľmi pútavých funkcií, ktoré môžu skutočne vylepšiť váš HTML pre webové aplikácie.

Tu vám ponúkneme ochutnávku AngularJS, superhrdinského rámca JavaScript MVW, vrátane jeho vynikajúcich funkcií a procesu, ako s ním začať.



Dúfajme, že vám to pomôže nielen pri vývoji dobre štruktúrovaných a udržiavateľných bohatých webových aplikácií, ale tiež vám dá niekoľko pádnych dôvodov, prečo si zvoliť AngularJS pre svoje nadchádzajúce projekty. Poďme začať!

ako vyrobiť trojnásobok v dizajne

01. Čo je AngularJS?

AngularJS, vyvinutý spoločnosťou Google, je rámec webových aplikácií s otvoreným zdrojovým kódom, ktorý je navrhnutý tak, aby vývojárom webu uľahčil vývoj aj testovanie. Hlavným cieľom AngularJS je predĺženie webových aplikácií o schopnosť MVC (Model – view – controller). Jedná sa o framework JavaScript MVC / MVVM na strane klienta, ktorý je plne rozšíriteľný, pracuje bez závislostí od knižnice a funguje skvele aj s inými knižnicami. Môžete tiež upraviť alebo nahradiť všetky jeho funkcie tak, aby vyhovovali vašim konkrétnym potrebám.

AngularJS vyvinuli v roku 2009 Adam Abrons a Mi & scaron; ko Heverym, ktorí boli v tom čase inžiniermi spoločnosti Google. Ako bolo spomenuté na oficiálnych webových stránkach, ide o „štrukturálny rámec pre dynamické webové aplikácie“, ktorý je najvhodnejší na vytváranie jednostránkových webových aplikácií, ktoré na strane klienta vyžadujú iba JavaScript, CSS a HTML.

Umožňuje vám použiť HTML ako svoj jazyk šablón a umožňuje vám rozšíriť syntax HTML, aby ste úhľadne a výstižne vyjadrili komponenty svojej webovej aplikácie. AngularJS vám pomáha lepšie štruktúrovať váš kód JavaScript a uľahčuje jeho testovanie, pričom učí prehliadač, ako využívať vkladanie závislostí pre akúkoľvek serverovú technológiu.

Ako používať AngularJS

Začíname s AngularJS je celkom jednoduché. Jednoduchú aplikáciu Angular môžete mať už za päť minút vložením niekoľkých atribútov do svojich skriptov HTML. Sú to:

1. Zahrňte do značky smernicu „ng-app“. Umožní to spustenie AngularJS na stránke a definovanie stránky ako aplikácie Angular.

2. Umiestnite značku Angular do dolnej časti stránky, kde značka končí.

3. Pridajte bežný kód HTML. Atribúty HTML sa používajú na prístup k direktívam AngularJS, zatiaľ čo hodnotenie výrazov sa vykonáva s dvojbodkovou notáciou.

ako kresliť izometrické výkresy ručne

Today's tasks

  • {{task.name}}

Tu direktíva ng-controller definuje priestor názvov, kam môžete umiestniť svoj Angular JS na kontrolu dát a vyhodnotenie výrazov vo vašom HTML. Zatiaľ čo direktíva ng-repeat je objektom Angular repeater, ktorý požaduje, aby Angular vytvoril prvky zoznamu, pokiaľ máte zobrazené úlohy.

Zatiaľ čo väčšina dnešných rámcov predstavuje iba balík existujúcich nástrojov, AngularJS je rámec novej generácie, ktorý má niekoľko veľmi zaujímavých funkcií, ktoré sú užitočné nielen pre vývojárov, ale rovnako užitočné aj pre návrhárov. Nasleduje niekoľko neuveriteľných funkcií AngularJS, ktoré vývojárom pomôžu urobiť ich budúce webové aplikácie úžasnými ...

Smernice

Direktívy sú jednou z najsilnejších a najpútavejších funkcií AngularJS. Umožňujú vám rozšíriť váš HTML a používa ich AngularJS na zapojenie svojej akcie na stránku. Umožňujú vám určiť vlastné a opakovane použiteľné značky HTML, pomocou ktorých môžete manipulovať s atribútmi DOM a moderovať správanie konkrétnych prvkov. Všetky smernice majú predponu ng-, sú navrhnuté tak, aby boli samostatnými prvkami oddelenými od vašej aplikácie MVC, a sú umiestnené v atribútoch HTML.



Niektoré z významných smerníc AngularJS sú:

  • ng-app: Táto smernica hovorí Angular, kde sa má aktivovať. Ak chcete definovať stránku ako aplikáciu Angular, musíte použiť jednoduchý kód:.
  • ng-bind: Táto smernica hovorí Angular, aby zmenil textový obsah prvku HTML s hodnotou daného výrazu a aktualizoval text, keď sa zmení hodnota tohto výrazu.
  • ng-model: Je to veľmi podobné ako s ng-bind, ale viaže pohľad do modelu, čo vyžadujú ďalšie smernice ako select, textarea alebo input.
  • ng-class: Umožňuje dynamické načítanie atribútov triedy.
  • ng-controller: Táto smernica umožňuje určiť triedu radiča JavaScript na hodnotenie výrazov HTML.
  • ng-repeat: Bez námahy prechádza v zbierke položku, na ktorú je nastavená daná premenná cyklu.
  • ng-hide a ng-show: Použitím hodnoty boolovského výrazu táto smernica rozhodne, či sa prvok zobrazí alebo nie.
  • ngIf: Je základná príkazová smernica if, ktorá umožňuje znovu vložiť klon skompilovaného prvku do DOM, ak sú splnené podmienky. Ak je podmienka nepravdivá, odstráni prvok z DOM.

Nasleduje príklad smernice, ktorá počúva udalosť a následne aktualizuje jej $ rozsah.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Túto vlastnú smernicu je možné použiť nasledovne:

Obojsmerná väzba údajov

Väzba údajov je pravdepodobne najdominantnejšou a najvýznamnejšou vlastnosťou AngularJS. Šetrí vývojárom pri písaní značného množstva kódu znížením veľkej záťaže serverového servera. V typickej webovej aplikácii je 80% kódovej základne určených na manipuláciu, prechádzanie a počúvanie modelu DOM. Vďaka väzbe údajov je tento kód neviditeľný, takže sa môžete sústrediť na ďalšie dôležité veci svojej aplikácie.

Väčšina šablónových systémov má tradične jednosmernú väzbu údajov: zlúčia komponenty modelu a šablóny do jedného pohľadu. Po zlúčení sa zmeny modelu v zobrazení automaticky neodrazia. Na zohľadnenie týchto zmien musí vývojár ručne manipulovať s prvkami a atribútmi DOM. Tento proces je komplikovanejší a ťažkopádnejší, keď používateľ vykoná v zobrazení nejaké zmeny. Pretože vývojár potom musí interpretovať interakcie, zlúčiť ich do modelu a aktualizovať zobrazenie.

Jednosmerný diagram viazania údajov

Obrázok so súhlasom http://docs.angularjs.org

Naproti tomu AngularJS robí viazanie údajov lepším a odlišným spôsobom spracovaním synchronizácie údajov medzi modelom a DOM a naopak.

Obojsmerný diagram viazania údajov

Obrázok so súhlasom http://docs.angularjs.org

Nasleduje jednoduchý príklad vysvetľujúci väzbu vstupnej hodnoty na

značka.

ako vyrobiť snapchat geofiltre vo photoshope
Name:

Hello, {{yourName}}!

Injekcia závislostí

AngularJS má zabudovaný injektorový subsystém, ktorý vývojárom uľahčuje vývoj, porozumenie a testovanie aplikácií. Injekcia závislostí v AngularJS je zodpovedná za vytváranie komponentov, riešenie toho, ako sa dostanú do svojich závislostí, a ich sprístupnenie ďalším komponentom, keď o to požiadajú.

Využitím vstrekovania závislostí prináša AngularJS tradičné webové služby na serveri webovým aplikáciám na strane klienta, čo má za následok zníženie záťaže backendu a oveľa ľahšiu webovú aplikáciu.

Ak chcete získať prístup k základným službám AngularJS, požadujete pridanie konkrétnej služby ako parametra. AngularJS si automaticky všimne, že chcete túto službu používať, a sprístupní vám inštanciu.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Okrem toho môžete definovať svoje vlastné zákaznícke služby a sprístupniť ich injekcii.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Šablóny

V AngularJS je šablóna napísaná pomocou HTML, ktoré obsahuje atribúty a prvky špecifické pre Angular. Kombináciou šablóny s informáciami z ovládača a modelu vykresľuje AngularJS dynamické zobrazenie v prehľadávačoch.

Ďalej uvádzame uhlové prvky a atribúty, ktoré je možné použiť:

  • Filter: Formátovanie údajov na zobrazenie sa vykonáva týmto prvkom.
  • Ovládacie prvky formulára: Používa sa na overenie vstupu používateľa.
  • Značka: Na viazanie výrazov na prvky pomocou zápisu dvojitej zloženej zátvorky {{}}.
  • Smernica: Prvok alebo atribút, ktorý vykresľuje opakovane použiteľný komponent DOM alebo predlžuje existujúci prvok DOM.

Kód uvedený nižšie zobrazuje šablónu so smernicami a značkami:

najlepší spôsob učenia sa po účinkoch
{{buttonText}}

V typickej aplikácii má šablóna direktívy CSS, HTML a Angular v jednom súbore HTML (zvyčajne index.html).

Testovanie

Pretože JavaScript je dynamický a interpretovaný s veľkou silou výrazu, kompilátor mu nezaberie takmer žiadnu pomoc. Tím AngularJS preto dobre chápe, že je potrebné prejsť akýmkoľvek kódom JavaScript so súborom náročných testov. Preto vyvinuli AngularJS od základu tak, aby boli testovateľné, vďaka čomu je testovanie vašich webových aplikácií čo najjednoduchšie.

AngularJS využíva všetky výhody injekcie závislostí, je dodávaný s predstieraným obsahom a podporuje oddelenie správania a zobrazenia. Pre end-to-end testovanie má AngularJS end-to-end testovací bežec s názvom Protractor, ktorý rozumie vnútornému fungovaniu AngularJS s cieľom eliminovať chybnosť testu a simuluje interakcie používateľov s vašou aplikáciou.

Ďalším typom testu v AngularJS je Unit test, pomocou ktorého môžete testovať jednotlivé jednotky kódu. Tím Angular ďalej vytvoril aj rozšírenie pre Chrome s názvom AngularJS Batarang , ktorá umožňuje vývojárom ľahko zistiť úzke miesta výkonu a umožňuje im ladiť ich aplikácie v prehliadači.

Ajeet Yadav je profesionálny webový vývojár wordpressintegration.com , renomovaná spoločnosť pre vývoj webových aplikácií, ktorá poskytuje vysoko kvalitnú službu konverzie motívov / šablón z Photoshopu na WordPress. Postupujte @Wordpress_INT na Twitteri.