Bevezetés a AngularJS

Mi AngularJS?

AngularJS van egy erős és strukturális JavaScript keretrendszer amely könnyebb megvalósítani az egységes webes alkalmazások, és lehetővé teszi a nagy szervező, ügyfél nehéz alkalmazások valami kezelhető. Ez egy nyílt forráskódú webes alkalmazás keretrendszer, szabad és ezrei használják a világ fejlesztői.

AngularJS alapul MVC (Model View Control) minta, amely célja, hogy a gazdag internetes alkalmazások és webes leegyszerűsíti mind a fejlesztés és a tesztelés alkalmazások segítségével MVC architektúra és szétválasztja gazdag internetes alkalmazásokat modellek, nézetek és vezérlők. AngularJS létre egy oldalt alkalmazások, ami azt jelenti, a böngésző fog betölteni egy oldalt, függetlenül attól, hogy mekkora a kérelem.

AngularJS által kifejlesztett Miskohevery és Adam Abron,által fenntartott Google; használják belsőleg, és MIT. Licence van az Apache License 2.0. Ez eredetileg megjelent 2009 és a jelenlegi stabil kiadás 1.3.5 (Decemeber 1, 2014).

AngularJS: Ebben a részben, foglaljuk össze az alapokat a AngularJS.

  • Van egy könyvtár írt JavaScript
  • Nem egy platform vagy nyelv
  • Nem egy plug-in, vagy kiterjesztés
  • Ez kiterjeszti a HTML, CSS és JavaScript
  • Nem egy DOM manipuláció könyvtár mint jQuery
  • Nem igényel jQuery vagy öröklési
  • Nem igényel egyirányú adat kötelező és boilerplate kód

Miért AngularJS?

  • Ez alapján MVC tervezési mintát, amely számos módon építeni internetes alkalmazás kliens oldali.
  • Ez segít, hogy a kliens oldali alkalmazásokat kevesebb kód és nagyobb rugalmasságot.
  • Ez kiterjeszti a HTML használatával funkcionalitása irányelvek, attribútumok, kifejezések és sablonok HTML.
  • AngularJS egy MVC architektúra, amely leegyszerűsíti a fejlesztés és a tesztelés alkalmazások könnyen kliens oldali.
  • Ez jó a fejlődő egylapos alkalmazások és kezelőfelületekről webalapú alkalmazásokhoz.
  • Ez a rugalmas keret és sokoldalú funkciók. Ezért használják mind a nagy app projektek és kis apró alkalmazások.

Features:

AngularJS (JavaScript keretrendszer) teremt alkalmazások gyorsabb módon használatával számos funkciót, mint például:

  • Ez egy kliens oldali technológia, amely nagy dolgokat, hogy dinamikus webes alkalmazásokat.
  • Ez egy MVC keretrendszer, lehetővé teszi a felhasználók, hogy megfelelő építészeti és karbantartható webes alkalmazások.
  • Ez egy nyílt forráskódú webes alkalmazás keretrendszer ezrei használják a világ fejlesztői.
  • Ez lehetővé teszi, hogy újrahasználható alkatrészek és a kód újrafelhasználásának.
  • Ez teszi létrehozása felhasználói felület (UI) könnyen át adatokat kötelező folyamat.
  • A deklaratív HTML megközelítés.
  • Segít osztani az alkalmazás kisebb részekre.

Építészeti rajz és alkatrészek: Vessünk egy pillantást az architektúra diagram a AngularJS keret és annak összetevői.

arch_angular_JS

Figure: AngularJS Architecture

AngularJS tartalmaz modulok ami jár, mint a tartály különböző típusú alkalmazások, mint például vezérlők, nézetek, irányelvek, gyár stb. Modul meghatározza, hogyan kell kérelmet kell bootstrap. modulok használata, folyamatok könnyebb lesz megérteni; akkor újra a kódot, végéig vizsgálatokat használ modulokat, hogy felülbírálja a konfiguráció, stb. Ez az a hely létrehozására, regisztráció és visszakeresésére szögletes modulok.

config komponens csak akkor fogadja el a szolgáltatók modulok, jelenti, hogy minden szolgáltatás, gyár stb olyan esetek szolgáltató. Ez biztosítja az összes ilyen esetekben az útvonalak.

A útvonalak használt összekötő URL szabályozóknak és nézetek.

A Nézetek használnak hozzá kifinomult kezelése felhasználói események. ez használ ng-nézetirányelv, amely kiegészíti az útvonalat szolgáltatás sablon az aktuális útvonal a fő elrendezés (index.html) fájl.

A ellenőr vezérli az adatok AngularJS alkalmazások, amelyek rendszeresen JavaScript objektumok. AngularJS határozza ng-vezérlőirányelvet, amely megteremti az új vezérlő objektumokat vezérlő funkció. És az új gyerek áll a vezérlő funkciót $hatályaahogy az ábrán látható.

A nézetek küld eleme vagy attribútuma, hogy a irányelvek amely azt mondja AngularJS HTML fordító csatolni meghatározott magatartást a DOM elem és gyerekek.

A gyár meghatározására használják a AngularJS szolgáltatást, és az úgynevezett amikor egy szolgáltatást kell példányosítható.

Az első lépések AngularJS:

AngularJS könnyű kezdeni. Ez biztosítja funkciók, mint a kétirányú adatok kötelező amely egyedi címkék, jellemzőket felölelik beépített irányelvek, amelyek kiterjesztése funkcionalitását HTML könnyebb.

  • Ez oszlik JavaScript fájlt, és fel lehet használni a weboldal által beleértve AngularJS könyvtár az alábbi módon:

[kód]

<script src =”http:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>

 

</forgatókönyv>

 

[/kód]

 

Azt is ellenőrizze a legfrissebb verzióját AngularJS a saját hivatalos honlapján.

  • Hozhat létre AngularJS alkalmazás az alábbi módon:

[kód]

<htmlng-app></html>

Vagy

<html ng-app = "MyApp"></html>

Vagy

<divng-app></div>

Vagy

<div ng-app = "MyApp"></div>

[/kód]

A ng-app attribútum a gyökér eleme a AngularJS app.

  • Controller lehet meghatározni, mint alább látható:

[kód]

<div ng-app = "" ng-szabályzó = "MyController">

<input type = "text" ng-modell = "üzenet">

</div>

[/kód]

A ng-vezérlőirányelv meghatározza az alkalmazás vezérlő. A ng-modellirányelv kötelezi az értékét HTML ellenőrzéseket, mint beviteli mezők, válassza ki, stb, hogy az alkalmazási adatok.

  • Végrehajtja a kontroller segítségével $hatálya objektum, mint írva az alábbiakban:

[kód]

functionMyController($hatálya){

$scope.message = "Adja meg a nevét";

}

[/kód]

A $hatálya objektum hivatkozik a modell, amely meghívja a vezérlő, amely létrehozza üzenet ingatlan a hatálya alá.

 

Core Concepts:Ebben a részben lesz egy részletes vitát az alapvető összetevők és a fogalmak mögött.

  • modulok
  • irányelvek
  • Alkalmazási kör
  • vezérlők
  • kifejezések
  • sablonok
  • routing
  • szűrők

modulok:

A modulok kiváló mechanizmust elosztjuk az alkalmazás kis újrafelhasználható komponensek és meghatározza, hogy egy alkalmazás kell bootstrap. A modulok adja, hogyan határozza meg a komponensek az alkalmazás, és teszi alkalmazása olvashatóbb. Minden modul azonosít egy egyedi nevet.

irányelvek:

Irányelvek alapvető építőkövei AngularJS, amelyek segítségével létre egyedi címkék és lehet helyezni elemneveket, attribútumok és megjegyzések. Irányelvek lehet használni, mint a HTML irányelvek építeni összetett widgetek rakott funkcionalitás.

Alkalmazási kör:

Scope egy objektum, amely kötődik a céllal, hogy a vezérlő. In MVC szerkezet, arra utal, hogy az alkalmazás modell. Scope nézheti kifejezéseket és szaporodni események vannak elrendezve hierarchikus.

vezérlők:

Vezérlők JavaScript objektumok, amely meghatározza a tényleges viselkedése az alkalmazás. Ez felelős a beállítás modell tulajdonságai és funkciói segítségével $hatálya tárgy. A vezérlő nem tárolja az állami és nem lép kölcsönhatásba a távoli szolgáltatások.

kifejezések:

Kifejezések vannak írva benne kapcsos zárójelek "{{ }}"Jelöli kötések, amelyek hivatkozók a mi alkalmazás modell. Kifejezések nem támogatják ellenőrzési flow kimutatások. AngularJS fogja kiírni az adatokat, amennyiben azok használják.

sablonok:

Sablon csak régi sima HTML, amely nem tartalmaz semmilyen konkrét szögletes fájlsablonokat. Jön egy sor éles sablonok létrehozása vezérlők stb segítségével sablon motor. A sablonok megjeleníteni az adatokat a modell és a vezérlő.

routing:

Ezt alkalmazzák összekötő URL a vezérlőhöz és nézetek. Routing elintézve a szolgáltatók által hívott $útvonal üzemeltető kezelni routing, amely a szolgáltató a $útvonal szolgáltatás. Más szavakkal, ez terhelés alatti sablonok függően az oldal URL.

szűrők:

Szűrők használhatók kifejezéseket transzformálására vagy módosítsa az adatokat a modellek. Mi adhat kifejezéseket vagy irányelveket a cső karakter. AngularJS van néhány, a leggyakrabban használt szűrők, mint például:

  • valuta: alakítja számot pénznem formátum.
  • nagybetűs: konvertálja húrok nagybetűs.
  • kisbetűs: konvertálja húrok kisbetűs.
  • szűrő: kiválasztja részhalmaza elemeket tömb.
  • orderBy: megbízások tömb kifejezéssel, mint ábécésorrendben vonósokra és numerikusan számok.

Példa:

Hozzunk létre egy egyszerű példát a AngularJS könyvtár, és hozzon létre egy HTML fájlt FirstExample.html az alábbiakban bemutatott:

Listing1: Egyszerű AngularJS alkalmazás

[kód]

<!DOCTYPE html>

<html>

<fej>

<script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></forgatókönyv>

</fej>

<test>

<div ng-app =”” ng-szabályzó =”MyController”>

Név megadása: <input type =”text” ng-modell =”felhasználónév”><br>

<br>

Teljes név: {{felhasználónév}}

</div>

<forgatókönyv>

functionMyController($hatálya) {

$scope.userName = “David”;

}

</forgatókönyv>

</test>

</html>

[/kód]

Ahogy megbeszéltük, van benne AngularJS JavaScript fájlt a HTML oldalt, amely belül meghatározott <fej> tag. A következő rész tartalmaz AngularJS alkalmazás, amely meghatározása a ng-app attribútum belül fut a <div> tag.

A ng-vezérlő irányelv meghatározza az alkalmazás vezérlő. A AngularJS fogja idézni "MyControllerval vel $hatálya tárgy, amely megteremti tulajdon úgynevezett "felhasználónévaz irányelv hatálya alá.

Határozza meg a modell nevét használja ng-modellirányelv meghatározott <bemenet> tag. Megköti a beviteli mezőbe a vezérlő tulajdonság "felhasználónév”.

Nyissa meg a FirstExample.html A böngésző és nézze meg az eredményt, ahogy az alábbi képernyőkép:

angular_JS_example

Figure: AngularJS példa

Következtetés: Már tárgyalt valamennyi aspektusát AnguarJS. Mielőtt kötni, foglaljuk össze a pontokat. AngularJS (néven is ismert szögletes)egy nyílt forráskódú webes alkalmazás keretrendszer. Ez biztosítja a kliens oldali MVC architektúra együtt általánosan használt alkatrészek szükséges gazdag internetes alkalmazások. AngularJS következik deklaratív programozási modellt kínál a felhasználói felületek. A fő cél ennek a keret, hogy a fejlesztési és tesztelési könnyebb.

Remélem már megvan a világos megértése a AngularJS keret. Élvezze olvasás www.techalpine.com

============================================= ============================================== Buy best TechAlpine Books on Amazon
============================================== ---------------------------------------------------------------- electrician ct chestnutelectric
error

Enjoy this blog? Please spread the word :)

Follow by Email
LinkedIn
LinkedIn
Share