Vodič za početnike za izradu web aplikacija s AngularJS

početna stranica angularjs

Pridružite se Googleovom okviru web aplikacija

Ako ste profesionalni programer JavaScript-a, vjerojatno ste već čuli za to Ember.js (okvir otvorenog koda JavaScript) i Backbone.js (JavaScript knjižnica s RESTful JSON sučeljem). Ali ako niste upoznati s tim KutniJS Ipak, propustit ćete neke od njegovih vrlo primamljivih značajki koje stvarno mogu poboljšati vaš HTML za web aplikacije.

Ovdje ćemo vam pružiti okus AngularJS-a, superherojskog JavaScript MVW okvira, uključujući njegove istaknute značajke i postupak početka s njim.



Nadamo se da će vam ovo pomoći ne samo da razvijete dobro arhitekturirane i održavane bogate web aplikacije, već će vam dati i neke solidne razloge da odaberete AngularJS za svoje nadolazeće projekte. Započnimo!

kako nacrtati stopala pogled sprijeda

01. Što je AngularJS?

AngularJS, koji je izradio Google, okvir je web aplikacija otvorenog koda osmišljen kako bi web programerima olakšao razvoj i testiranje na prednjoj strani. Glavni cilj AngularJS-a je produžiti web aplikacije s MVC (Model-view-controller) sposobnošću. To je klijentski JavaScript MVC / MVVM okvir koji je u potpunosti proširiv, pokreće se bez ovisnosti o knjižnici, a također izvrsno surađuje s drugim knjižnicama. Čak i svaku njezinu značajku možete izmijeniti ili zamijeniti u skladu s vašim specifičnim potrebama.

AngularJS su 2009. godine razvili Adam Abrons i Mi & scaron; ko Heverym, koji su u to vrijeme bili Googleovi inženjeri. Kao što je spomenuto na službenim web stranicama, to je 'strukturni okvir za dinamičke web aplikacije' koji je najprikladniji za stvaranje web stranica s jednom stranicom koje zahtijevaju samo JavaScript, CSS i HTML na strani klijenta.

Omogućuje vam upotrebu HTML-a kao jezika predloška i omogućuje vam proširivanje sintakse HTML-a kako bi se komponente vašeg web programa uredno i sažeto izrazile. AngularJS vam pomaže da bolje strukturirate JavaScript kôd i olakšava testiranje, podučavajući preglednik kako koristiti ubrizgavanje ovisnosti za bilo koju poslužiteljsku tehnologiju.

Kako se koristi AngularJS

Početak rada s AngularJS-om prilično je jednostavan. Jednostavnu kutnu aplikaciju možete dobiti za samo pet minuta dodavanjem nekoliko atributa u svoje HTML skripte. Ovi su:

1. Uključite direktivu 'ng-app' u oznaku. Napravit će da se AngularJS pokreće na stranici, definirajući stranicu kao Angular aplikaciju.

2. Postavite kutnu oznaku na dno stranice, tamo gdje oznaka završava.

dikembe mutombo je 4 1/2 tjedna spasio svijet

3. Dodajte redoviti HTML. HTML atributi koriste se za pristup AngularJS direktivama, dok se procjena izraza vrši dvostrukom zagradom.

Today's tasks

  • {{task.name}}

Ovdje direktiva ng-controller definira prostor imena, gdje možete smjestiti svoj Angular JS za kontrolu podataka i procjenu izraza u vašem HTML-u. Iako je ng-repeat direktiva objekt Angular repeater, koji traži od Angulala da stvori elemente popisa sve dok imate zadatke za prikaz.

Iako je većina okvira danas samo paket postojećih alata, AngularJS je okvir sljedeće generacije koji ima neke vrlo uvjerljive značajke korisne ne samo za programere, već i korisne za dizajnere. Slijede neke nevjerojatne značajke AngularJS-a, koje će programerima pomoći da njihove buduće web aplikacije učine nevjerojatnima ...

Direktive

Direktive su jedno od najsnažnijih i najupečatljivijih obilježja AngularJS-a. Omogućuju vam proširivanje HTML-a i koristi ih AngularJS za uključivanje njegove radnje u stranicu. Omogućuju vam određivanje prilagođenih i višekratnih HTML oznaka koje se mogu koristiti za manipulaciju DOM atributima i moderiranje ponašanja određenih elemenata. Sve su Direktive pripremljene s ng-, dizajnirane da budu samostalni elementi odvojeni od vaše MVC aplikacije i smješteni u HTML atribute.



Neke značajne AngularJS direktive su:

  • ng-app: Ova direktiva govori Angular-u gdje da se aktivira. Da biste definirali stranicu kao kutnu aplikaciju, morate upotrijebiti jednostavan kod:.
  • ng-bind: Ova direktiva govori Angularu da promijeni tekstualni sadržaj HTML elementa s vrijednošću zadanog izraza i da ažurira tekst kako se vrijednost tog izraza mijenja.
  • ng-model: Vrlo je sličan ng-bind, ali veže pogled u model, što zahtijevaju druge direktive poput select, textarea ili input.
  • ng-class: Omogućuje dinamičko učitavanje atributa klase.
  • ng-controller: Ova vam direktiva omogućuje određivanje klase JavaScript kontrolera za procjenu HTML izraza.
  • ng-repeat: Bez napora petlja kroz kolekciju stavku na koju je postavljena zadana varijabla petlje.
  • ng-hide i ng-show: Koristeći vrijednost logičkog izraza, ova direktiva odlučuje hoće li se element prikazati ili ne.
  • ngIf: Osnovna je naredba if koja omogućuje ponovno umetanje klona kompiliranog elementa u DOM, ako su uvjeti istiniti. Ako je uvjet netačan, tada uklanja element iz DOM-a.

Slijedi primjer direktive koja preslušava događaj i posljedično ažurira njegov opseg $.

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: '' }; });

Ova prilagođena direktiva može se koristiti na sljedeći način:

Dvosmjerno vezivanje podataka

Vezivanje podataka vjerojatno je najdominantnija i najzapaženija značajka AngularJS-a. Uštedava programerima pisanje znatne količine koda smanjujući velik dio tereta na pozadini poslužitelja. U tipičnoj web aplikaciji 80% baze koda posvećeno je manipulaciji, prelasku i preslušavanju DOM-a. Vezivanje podataka čini ovaj kod nevidljivim, tako da se možete usredotočiti na druge važne stvari vaše aplikacije.

Tradicionalno, većina sustava za izradu predložaka ima jednosmjerno vezivanje podataka: oni spajaju komponente modela i predloška zajedno u prikaz. Nakon spajanja, promjene na modelu ne odražavaju se automatski u prikazu. Da bi odražavao ove promjene, programer mora ručno manipulirati DOM elementima i atributima. Ovaj postupak postaje kompliciraniji i glomazniji kada korisnik napravi bilo kakve promjene u prikazu. Budući da programer tada treba protumačiti interakcije, spojiti ih u model i ažurirati prikaz.

Jednosmjerni dijagram vezivanja podataka

Slika ljubaznošću http://docs.angularjs.org

Suprotno tome, AngularJS povezivanje podataka vrši na bolji i drugačiji način obrađujući sinkronizaciju podataka između modela i DOM-a i obrnuto.

umjetnost ratova zvijezda sila se budi

Dvosmjerni dijagram vezivanja podataka

Slika ljubaznošću http://docs.angularjs.org

Slijedi jednostavan primjer, objašnjavajući vezanje ulazne vrijednosti na

označiti.

Name:

Hello, {{yourName}}!

Injekcija ovisnosti

AngularJS ima ugrađeni podsustav injektora koji programerima olakšava razvoj, razumijevanje i testiranje aplikacija. Injekcija ovisnosti u AngularJS-u odgovorna je za stvaranje komponenata, bavljenje načinom na koji dohvaćaju svoje ovisnosti i stavljanje ih na raspolaganje drugim komponentama na zahtjev.

Korištenjem ubrizgavanja ovisnosti, AngularJS donosi tradicionalne usluge na strani poslužitelja web stranicama na strani klijenta, što rezultira smanjenim opterećenjem pozadine i čineći web aplikaciju mnogo lakšom.

Ako želite pristupiti osnovnim uslugama AngularJS, tada trebate dodati određenu uslugu kao parametar. AngularJS će automatski primijetiti da želite koristiti tu uslugu i učinit će instancu dostupnom za vas.



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

Uz to, možete definirati vlastite prilagođene usluge i učiniti ih dostupnima za ubrizgavanje.

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'];

Predlošci

U AngularJS, predložak je napisan s HTML-om koji sadrži atribute i elemente specifične za Angular. Kombinirajući predložak s podacima iz kontrolera i modela, AngularJS prikazuje dinamički prikaz u preglednicima.

Ispod su kutni elementi i atributi koji se mogu koristiti:

  • Filter: Ovaj element vrši oblikovanje podataka za prikaz.
  • Kontrole obrasca: Koristi se za provjeru korisničkog unosa.
  • Oznaka: za povezivanje izraza s elementima pomoću oznake dvostruke kovrčave zagrade {{}}.
  • Direktiva: Element ili atribut koji čine DOM komponentu za višekratnu upotrebu ili produžuju postojeći DOM element.

Dolje navedeni kod prikazuje predložak s direktivama i oznakama:

kako pretvoriti sliku u rgb način boje u
{{buttonText}}

U tipičnoj aplikaciji predložak ima CSS, HTML i Angular direktive u jednoj HTML datoteci (obično index.html).

Testiranje

Kako je JavaScript dinamičan i interpretira se s velikom snagom izražavanja, ali prevoditelj ne uzima gotovo nikakvu pomoć. Stoga tim AngularJS dobro razumije da bilo koji JavaScript kôd mora proći kroz niz ozbiljnih testova. Stoga su AngularJS dizajnirali od temelja kako bi ga bilo moguće testirati, čineći testiranje vaših web aplikacija što jednostavnijim.

AngularJS u potpunosti iskorištava ubrizgavanje ovisnosti, dolazi u paketu s lažnim porukama i potiče razdvajanje ponašanja i pogleda. Za testiranje od kraja do kraja, AngularJS ima end-to-end test trkač, nazvan Protractor, koji razumije unutarnji rad AngularJS-a kako bi eliminirao neispravnost testa i simulira interakciju korisnika s vašom aplikacijom.

Druga vrsta testa u AngularJS je Unit test kroz koji možete testirati pojedinačne jedinice koda. Nadalje, tim tvrtke Angular također je izradio proširenje za Chrome pod nazivom KutniJS Batarang , koji omogućava programerima da lako otkriju uska grla u izvedbi i omogućuju im uklanjanje pogrešaka u programima u pregledniku.

Ajeet Yadav je profesionalni web programer, povezan sa wordpressintegration.com , poznata tvrtka za web razvoj koja pruža visokokvalitetnu uslugu pretvorbe tema / predložaka Photoshop u WordPress. slijediti @Wordpress_INT na Twitteru.