Anong AngularJS?
AngularJS ay isang malakas at structural JavaScript framework na kung saan ay mas madaling ipatupad sa solong mga web application at nagbibigay-daan pag-aayos ng mga malalaking, client mabigat aplikasyon sa isang bagay na mapapamahalaan. Ito ay isang open source web application framework, libre at ginagamit ng libu-libong mga developer sa buong mundo.
AngularJS ay batay sa MVC (Modelo Tingnan ang Control) pattern na ay inilaan upang bumuo ng mayaman sa internet web application at gawing simple ang parehong pag-unlad at testing ng mga aplikasyon sa pamamagitan ng paggamit MVC architecture at hinihiwalay ang iyong mga aplikasyon ng mayaman sa internet sa mga modelo, views at controllers. AngularJS lumilikha single pahina ng mga application, na nangangahulugan na ang browser ay pagpunta upang i-load ang isang solong pahina nang walang kinalaman sa laki ng iyong application.
AngularJS ay binuo ng Miskohevery at Adam Abron,pinapanatili ng Google; ginagamit sa loob ng mga ito at MIT. Ito ay lisensiyado sa ilalim ng Lisensyang bersiyon Apache 2.0. Ito ay una inilabas noong 2009 at ang kasalukuyang stable release ay 1.3.5 (Decemeber 1, 2014).
AngularJS: Sa seksyong ito, ipaalam sa amin sabihin sa maikling pangungusap ang mga pangunahing kaalaman ng AngularJS.
- Ay isang library na nakasulat sa JavaScript
- Ay hindi isang platform o wika
- Ay hindi isang plug-in o extension
- Ito ay umaabot HTML, CSS at JavaScript
- Ay hindi isang DOM pagmamanipula library tulad ng jQuery
- Hindi nangangailangan ng jQuery o mana
- Hindi nangangailangan ng one-way data umiiral at boilerplate code
Bakit AngularJS?
- Ito ay batay sa MVC disenyo pattern na kung saan ay nagbibigay ng maraming mga paraan upang bumuo ng mga web application sa client side.
- Ito ay tumutulong upang bumuo ng client side application na may mas kaunting code at higit na flexibility.
- Ito ay umaabot HTML sa pamamagitan ng paggamit ng pag-andar ng direktiba, katangian, expression at mga template sa HTML.
- AngularJS ay isang MVC architecture na pinapasimple ang pag-unlad at testing ng mga aplikasyon madali para client side.
- Ito ay mabuti para sa pagbubuo ng single pahina ng mga application at harap dulo para sa mga web based na mga aplikasyon.
- Ito ay may kakayahang umangkop framework at maraming nalalaman mga tampok. Kaya ito ay ginagamit para sa parehong mga malalaking proyekto app at maliit na maliit na mga aplikasyon.
Features:
AngularJS (batay JavaScript framework) lumilikha aplikasyon sa isang mas mabilis na paraan sa pamamagitan ng paggamit ng ilang mga tampok tulad ng:
- Ito ay isang client side na teknolohiya na nagbibigay ng malakas na mga bagay upang lumikha ng mga dynamic na mga aplikasyon ng web.
- Ito ay isang MVC framework batay, nagbibigay-daan sa mga gumagamit na bumuo ng tamang architecture at maintainable mga web application.
- Ito ay isang open source web application framework na ginagamit ng libu-libong mga developer sa buong mundo.
- Ito ay nagpapahintulot sa paggamit ng reusable mga bahagi at code muli.
- Ito ay gumagawa ng paglikha ng mga user interface (UI) madaling sa pamamagitan ng data umiiral na proseso.
- Paturol diskarte HTML.
- Ito ay tumutulong upang hatiin ang iyong application sa mas maliit na mga bahagi.
Architectural Diagram at Components: Ipaalam sa amin magkaroon ng isang pagtingin sa mga architecture diagram ng AngularJS framework at mga bahagi nito.
Figure: AngularJS Architecture
AngularJS naglalaman modules na kumilos bilang isang lalagyan para sa iba't ibang uri ng mga application tulad ng controllers, views, direktiba, factory etc. Module tumutukoy kung paano ang isang application ay dapat na bootstrapped. Paggamit ng modules, proseso ay mas madali upang maunawaan; maaari mong muling gamitin ang code, dulo sa dulo mga pagsusulit ay gumagamit ng mga module upang i-override ang configuration etc. Ito ay ang lugar para sa paglikha ng, pagrerehistro at pagkuha ng angular modules.
config component ay tumatanggap lamang ng provider mula modules, nangangahulugan na ang bawat serbisyo, factory etc ay mga pagkakataon ng provider. Ito ay nagbibigay ng lahat ng mga pagkakataon sa mga ruta.
The ruta ay ginagamit para sa pag-link URL na controllers at mga pagtingin.
The views ay ginagamit upang magdagdag ng sophisticated paghawak ng mga kaganapan user. gumagamit ito Ng-viewdirektiba na complements ruta serbisyo sa pamamagitan ng template ng kasalukuyang ruta sa ang layout ng main (index.html) file.
The magsusupil kontrol ang data ng AngularJS aplikasyon kung saan ay regular na mga bagay JavaScript. AngularJS tumutukoy Ng-controllerdirektiba na lumilikha ng mga bagong controller bagay sa pamamagitan ng paggamit ng function controller. At bagong bata ay magagamit sa controller function bilang $saklawtulad ng ipinakita sa diagram.
The views nagpapadala elemento o katangian sa direktiba na nagsasabi ni AngularJS HTML compiler upang i-attach partikular na pag-uugali sa mga sangkap DOM at mga anak nito.
The pabrika ay ginagamit upang tukuyin ang AngularJS serbisyo at ito ay tinatawag na kapag ang isang serbisyo ay kailangang instantiated.
Pagsisimula sa AngularJS:
AngularJS ay madali upang magsimula sa. Ito ay nagbibigay ng mga tampok tulad ng dalawang paraan ng data umiiral na ginagawang pasadyang mga tag, katangian na encapsulate built-in na mga direktiba na gumawa pagpapalawak andar ng HTML mas madali.
- Ito ay ipinamamahagi JavaScript file at maaaring magamit sa isang webpage sa pamamagitan ng kasama AngularJS library na nakapakita sa ibaba:
[kodigo]
<script src=”http:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>
</script>
[/kodigo]
Maaari mo ring tingnan ang pinakabagong bersyon ng AngularJS sa kanilang opisyal na website.
- Maaari kang lumikha ng AngularJS application na nakapakita sa ibaba:
[kodigo]
<htmlng-app></html>
o
<html Ng-app = "MyApp"></html>
o
<divng-app></div>
o
<div Ng-app = "MyApp"></div>
[/kodigo]
The Ng-app attribute ay ang root elemento ng AngularJS app.
- Controller ay maaaring tinukoy na nakapakita sa ibaba:
[kodigo]
<div Ng-app = "" Ng-controller = "MyController">
<input type = "text" Ng-modelo = "message">
</div>
[/kodigo]
The Ng-controllerdirektiba tumutukoy sa application controller. The Ng-modelodirektiba binds ang halaga ng mga kontrol HTML tulad ng input field, piliin etc sa data application.
- Ipatupad ang controller sa pamamagitan ng paggamit $saklaw bagay na nakasulat sa ibaba:
[kodigo]
functionMyController($saklaw){
$scope.message = "Ipasok ang iyong pangalan";
}
[/kodigo]
The $saklaw object ay tumutukoy sa modelo application na invokes ang controller na lumilikha mensahe ari-arian sa ang saklaw.
core Concepts:Sa seksyong ito magkakaroon kami ng isang detalyadong talakayan tungkol sa mga bahagi core at ang konsepto sa likod ng mga ito.
- modules
- direktiba
- saklaw
- controllers
- Expressions
- Template
- direksiyon
- Mga filter
modules:
Modules magbigay ng mahusay na mekanismo para sa naghahati ang application sa maliit na mga bahagi magagamit muli at tukuyin kung paano ang isang application ay dapat na bootstrapped. Modules tukuyin kung paano mo tukuyin ang mga bahagi sa application at gumagawa application mas nababasa. Ang bawat module ay makikilala sa pamamagitan ng isang natatanging pangalan.
direktiba:
Direktiba ay core gusali mga bloke ng AngularJS kung saan ay ginagamit upang lumikha ng pasadyang mga tag na HTML at maaaring ilagay sa mga pangalan ng elemento, mga katangian at mga komento. Direktiba ay maaaring magamit bilang HTML direktiba na bumuo ng mga kumplikadong mga widget na may layered functionality.
saklaw:
Saklaw ay isang bagay na binds isang pagtingin sa controller. Sa MVC istraktura, ito ay tumutukoy sa modelo application. Scopes maaaring panoorin expression at palaganapin kaganapan habang ang mga ito ay nakaayos sa hierarchical istraktura.
controllers:
Controllers ay mga bagay JavaScript na tumutukoy sa aktwal na pag-uugali ng iyong app. Ito ay responsable para sa pagtatakda ng properties model at pag-andar sa pamamagitan ng paggamit $saklaw bagay. Ang controller ay hindi nag-iimbak ng estado at ay hindi makipag-ugnayan sa remote na serbisyo.
Expressions:
Expression ay nakasulat sa loob kulot tirante "{{ }}"Magpakilala bindings na referrer sa aming mga modelo application. Expressions ay hindi sumusuporta sa kontrol ng daloy pahayag. AngularJS kalooban output ng data na kung saan ang mga ito ay ginagamit.
Template:
Template ay lamang lumang-plain-HTML na hindi isama ang anumang angular tiyak na mga template file. Ito ay may isang hanay ng mga live na mga template upang lumikha controllers etc sa pamamagitan ng paggamit template engine. Template ay ginagamit upang ipakita ang impormasyon mula sa mga modelo at controller.
direksiyon:
Ito ay ginagamit para linking URL upang magsusupil at mga pagtingin. Routing ay alaga sa pamamagitan ng mga nagbibigay ng serbisyo na tinatawag na $ruta operator upang mahawakan routing kung saan ay ang provider ng $ruta serbisyo. Sa ibang salita, ito ay pag-load ng sub template depende sa URL ng pahina.
Mga filter:
Ang mga filter ay ginagamit sa mga expression upang ibahin ang anyo o baguhin ang data mula sa mga modelo. Maaari naming idagdag expression o direktiba gamit pipe character. AngularJS may ilan sa mga karaniwang ginagamit na mga filter tulad ng:
- pera: nagpalit numero sa pera format.
- uppercase: nagpalit string sa uppercase.
- lowercase: nagpalit string sa lowercase.
- filter: pinipili subset ng mga item mula array.
- Iniutos ni: order array ng pananalitang tulad ng inayos ayon sa alpabeto para sa mga string at ayon sa bilang para sa mga numero.
halimbawa:
Sabihin lumikha ng isang simpleng halimbawa ng paggamit AngularJS library at lumikha ng isang HTML file bilang FirstExample.html tulad ng ipinapakita sa ibaba:
Listing1: application Simple AngularJS
[kodigo]
<!DOCTYPE html>
<html>
<head>
<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
<div Ng-app =”” Ng-controller =”MyController”>
Ilagay ang pangalan: <input type =”teksto” Ng-modelo =”userName”><br>
<br>
Buong pangalan: {{userName}}
</div>
<script>
functionMyController($saklaw) {
$scope.userName = “David”;
}
</script>
</body>
</html>
[/kodigo]
Gaya ng tinalakay, isinama natin AngularJS JavaScript file sa HTML na pahina na kung saan ay tinukoy sa loob ng <head> tag. Ang susunod na bahagi ay naglalaman ng AngularJS app kung saan ay tinukoy gamit ang Ng-app attribute ay tumatakbo sa loob ng <div> tag.
The Ng-controller direktiba tumutukoy sa application controller. Ang AngularJS ay invoke ang "MyController” may $saklaw object na lumilikha property na tinatawag na "username” sa saklaw.
Ibigay ang kahulugan ng pangalan ng modelo gamit Ng-modeloDirective tinukoy sa <input> tag. Ito binds ang input field sa controller ari-arian "username”.
buksan ang FirstExample.html sa browser at makita ang mga resulta tulad ng ipinapakita sa screen shot sa ibaba:
Figure: AngularJS Halimbawa
Konklusyon: Natalakay na natin ang lahat ng aspeto ng AnguarJS. Bago tapusin namin, ipaalam sa amin sabihin sa maikling pangungusap ang mga puntos. AngularJS (na kilala rin bilang Angular)ay isang open source web application framework. Ito ay nagbibigay ng client side MVC architecture kasama karaniwang ginagamit mga sangkap na kinakailangan para sa mga aplikasyon ng mayaman sa internet. AngularJS sumusunod paturol programming modelo para sa pagbuo ng mga interface ng gumagamit. Ang pangunahing layunin ng mga ito framework ay upang gumawa ng pag-unlad at pagsubok ng mas madali.
Sana ikaw ay may got ang isang malinaw na-unawa ng mga AngularJS framework. Masiyahan sa pagbabasa sa www.techalpine.com
