Kio estas AngularJS?
AngularJS estas potenca kaj struktura JavaScript kadro Kiu estas pli facila efektivigi en ununuraj araneaĵaj aplikoj kaj permesas organizanta grandan, Kliento pezaj aplikoj en io manageable. Ĝi estas malferma fonta araneaĵa apliko kadro, Libera kaj uzita de miloj de ellaborantoj ĉirkaŭ la mondo.
AngularJS estas bazita sur la MVC (Modela Vida Kontrolo) Skemo kiu estas celita konstrui riĉan interretan araneaĵon aplikoj kaj simpligi ambaŭ evoluadon kaj elprovanta de aplikoj de uzanta MVCan arkitekturon kaj apartigas viajn riĉajn interretajn aplikojn en modeloj, vidoj kaj regiloj. AngularJS kreas ununurajn paĝajn aplikojn, Kiu signifas la retumilon estas iranta ŝarĝi ununuran paĝon ĉiaokaze de la grandeco de via apliko.
AngularJS Estis evoluigita de Miskohevery Kaj Adam Abron,Daŭrigita de Google; Uzis interne de ili kaj MIT. Ĝi estas licencita sub la Apache Licenca versio 2.0. Ĝi estis komence liberigita en 2009 Kaj la nuna stabila elkarcerigo estas 1.3.5 (Decemeber 1, 2014).
AngularJS: En ĉi tiu sekcio, Lasi nin resumi la basics de AngularJS.
- Estas biblioteko skribita en JavaScript
- Ne estas platformo aŭ lingvo
- Ne estas ŝtopilo-je aŭ etendaĵo
- Ĝi etendas HTML, CSS kaj JavaScript
- Ne estas DOMa manipulada biblioteko kiel jQuery
- Ne postulas jQuery aŭ heredaĵon
- Ne postulas unu-voja datumo ligado kaj boilerplate kodo
Kial AngularJS?
- Ĝi estas bazita sur MVCa desegno skemo kiu provizas multenombrajn vojojn konstrui araneaĵan aplikon ĉe klienta flanko.
- Ĝi helpas konstrui klienton flankaj aplikoj kun malpli kodo kaj pli da fleksebleco.
- Ĝi etendas HTML de uzanta funkcion de instrukcioj, Ecoj, esprimoj kaj ŝablonoj al HTML.
- AngularJS estas MVCa arkitekturo kiu simpligas la evoluadon kaj elprovanta de aplikoj facile por klienta flanko.
- Ĝi estas bona por evoluiganta ununurajn paĝajn aplikojn kaj frontajn finojn por araneaĵo bazita aplikojn.
- Ĝi havas flekseblan kadron kaj diverstalentaj ĉefaĵoj. Do ĝi estas uzita por ambaŭ granda app projektoj kaj malgrandaj malgrandaj aplikoj.
Ĉefaĵoj:
AngularJS (JavaScript bazita kadron) Kreas aplikojn en pli rapida vojo de uzanta plurajn ĉefaĵojn kiel:
- Ĝi estas kliento flanka teknologio kiu provizas potencajn aferojn krei dinamikajn araneaĵajn aplikojn.
- Ĝi estas MVC bazita kadron, Permesas uzantojn konstrui konvenan arkitekturon kaj maintainable araneaĵaj aplikoj.
- Ĝi estas malferma fonta araneaĵa apliko kadro uzita de miloj de ellaborantoj ĉirkaŭ la mondo.
- Ĝi permesas uzon de reusable eroj kaj kodo reuse.
- Ĝi faras kreon de uzanta fasado (UI) Facile tra datumo liganta procezon.
- Declarative HTMLa alproksimiĝo.
- Ĝi helpas disigi vian aplikon en pli malgrandaj partoj.
Arkitektura Skemo kaj Eroj: Lasi nin havas rigardi la arkitekturan skemon de la AngularJS kadro kaj ĝiaj eroj.
Cifero: AngularJS Arkitekturo
AngularJS enhavas Kapsuloj Kiu ago kiel ujo por malsamaj tipoj de aplikoj kiel regiloj, Vidoj, Instrukcioj, Fabriko ktp. Kapsulo specifas kiel aplikon devus esti bootstrapped. Uzanta kapsulojn, Procezoj estos pli facilaj kompreni; Vi povas reuse la kodo, Fini fini testojn uzas kapsulojn superregi la konfiguracion ktp. Ĝi estas la loko por kreanta, Registranta kaj reprenanta angular kapsuloj.
Config Ero nur akceptas provizantojn de kapsuloj, Signifas ĉiun servon, Fabriko ktp. estas okazoj de provizanto. Ĝi provizas ĉiuj ĉi tiuj okazoj al vojoj.
La Vojoj Estas uzita por liganta URL-a al regiloj kaj vidoj.
La Vidoj Estas uzita aldoni altnivelan pritraktanta de uzantaj eventoj. Ĝi uzas Ng-vidoInstrukcio kiu kompletigas vojan servon de ŝablono de la nuna vojo al la ĉefa plano (Indekso.Html) Dosiero.
La Regilo Kontrolas la datumon de AngularJS aplikoj kiu estas regula JavaScript objektoj. AngularJS difinas Ng-regiloInstrukcio kiu kreas novajn regilajn objektojn de uzanta regilan funkcion. Kaj nova infano estas havebla al la regila funkcio kiel $AmpleksoKiel montrita en la skemo.
La Vidoj sendas elementon aŭ econ al la Instrukcioj Kiu diras la HTML de AngularJS compiler alligi specifan konduton al la DOMa elemento kaj ĝiaj infanoj.
La Fabriko Estas uzita difini la AngularJS servo kaj ĝi estas vokita kiam servajn bezonojn esti instantiated.
Akiranta Komencita kun AngularJS:
AngularJS estas facile komenci kun. Ĝi provizas ĉefaĵojn kiel du voja datumo ligado kiu faras laŭmendajn etikedojn, Ecoj kiu personigas konstruita-en instrukcioj kiu faras etendanta funkcion de HTML pli facila.
- Ĝi estas distribuita JavaScript dosiero kaj povas esti uzita en webpage de inkluzivanta AngularJS biblioteko kiel montrita sub:
[Kodo]
<Skribo src=”Http:// Ajax.Googleapis.Com/ajax/libs/ angularjs /1.2.26/ Angular.Min.Js”>
?
</Skribo>
?
[/Kodo]
?
Vi ankaŭ povas kontroli la plej lastan version de AngularJS sur ilia oficiala retejo.
- Vi povas krei AngularJS apliko kiel montrita sub:
[Kodo]
<Htmlng-app></Html>
Aŭ
<Html ng-app=”MyApp”></Html>
Aŭ
<Divng-app></Div>
Aŭ
<Div ng-app=”MyApp”></Div>
[/Kodo]
La Ng-app Eco estas la radika elemento de la AngularJS app.
- Regilo povas esti difinita kiel montrita sub:
[Kodo]
<Div ng-app=” “ ng-regilo=”MyController”>
<Eniga tipo=”teksto” ng-modela=”mesaĝo”>
</Div>
[/Kodo]
La Ng-regiloInstrukcio difinas la aplikan regilon. La Ng-modeloInstrukcio ligas la valoron de HTMLaj kontroloj kiel enigaj kampoj, Elekti ktp. al la aplika datumo.
- Efektivigi la regilon de uzanta $Amplekso Kontraŭargumenti kiel skribita sub:
[Kodo]
FunctionMyController($Amplekso){
$Amplekso.Mesaĝo=”Eniras vian nomon”;
}
[/Kodo]
La $Amplekso Objekto plu-gvidas al la aplika modelo kiu alvokas la regilon kiu kreas Mesaĝo Nemoveblaĵo en la amplekso.
?
Kernaj Konceptoj:En ĉi tiu sekcio ni havos detalan diskuton pri la kernaj eroj kaj la konceptoj malantaŭ ili.
- Kapsuloj
- Instrukcioj
- Amplekso
- Regiloj
- Esprimoj
- Ŝablonoj
- Routing
- Filtriloj
Kapsuloj:
Kapsuloj provizas bonegan mekanismon por disiganta la aplikon en malgranda reusable eroj kaj specifi kiel aplikon devus esti bootstrapped. Kapsuloj specifas kiel vin difinas la erojn en la apliko kaj fara apliko pli legebla. Ĉiu kapsulo estas identigita de unika nomo.
Instrukcioj:
Instrukcioj estas kernaj konstruaĵaj blokoj de AngularJS kiu estas uzita krei laŭmendajn HTMLajn etikedojn kaj povas esti lokita en elementaj nomoj, ecoj kaj rimarkoj. Instrukcioj povas esti uzita kiel HTMLaj instrukcioj kiu konstruas kompleksajn uzaĵojn kun tavolita funkcion.
Amplekso:
Amplekso estas objekto kiu ligas vidon al la regilo. En MVCa strukturo, Ĝi plu-gvidas al la aplika modelo. Ampleksoj povas rigardi esprimojn kaj disvastigi eventojn kiel ili estas aranĝita en hierarkia strukturo.
Regiloj:
Regiloj estas JavaScript objektoj kiu difinas la realan konduton de via app. Ĝi estas priresponda por fiksanta modelajn nemoveblaĵojn kaj funkciojn de uzanta $Amplekso Objekto. La regilo ne entenas ŝtatan kaj ne interrilatas kun izolitaj servoj.
Esprimoj:
Esprimoj estas skribita en buklaj stegoj “{{ }}” Indiki ligadojn kiu referrers al nia aplika modelo. Esprimoj ne subtenas kontrolan fluon komunikaĵoj. AngularJS eligos la datumon kie ili estas uzita.
Ŝablonoj:
Ŝablono estas nur malnova-klara-HTML ke ne inkluzivas ajna angular specifaj dosieraj ŝablonoj. Ĝi venas kun aro de vivaj ŝablonoj krei regilojn ktp. de uzanta ŝablonan motoron. Ŝablonoj estas uzita montri informon de la modelo kaj regilo.
Routing:
Ĝi estas uzita por liganta URL-a al regilo kaj vidoj. Routing estas prizorgita de servaj provizantoj vokis $RouteProvider Pritrakti routing kiu estas la provizanto de la $Vojo Servo. En aliaj vortoj, Ĝi estas ŝarĝanta de sub ŝablonoj dependanta al la URL de la paĝo.
Filtriloj:
Filtriloj estas uzita kun esprimoj transformi aŭ modifi la datumon de la modeloj. Ni povas aldoni esprimojn aŭ instrukciojn uzanta tuban karakteron. AngularJS havas kelkaj de la ofte uzita filtrilojn kiel:
- Valuto: Transformas nombron al valuta formato.
- Uppercase: Transformas ŝnurojn al uppercase.
- Lowercase: Transformas ŝnurojn al lowercase.
- Filtrilo: Elektas subgrupon de eroj de aro.
- OrderBy: Orda aro de la esprimo kiel ordonita alphabetically por ŝnuroj kaj nombre por nombroj.
Ekzemplo:
Lasita-a krei unu simplan ekzemplon uzanta AngularJS biblioteko kaj krei HTMLan dosieron kiel FirstExample.Html Kiel montrita sub:
Listing1: Simpla AngularJS apliko
[Kodo]
<!DOCTYPE html>
<Html>
<Kapo>
<Skribo src= “Http://Ajax.Googleapis.Com/ajax/libs/angularjs/1.2.26/angular.Min.Js”></Skribo>
</Kapo>
<Korpo>
<Div ng-app=”” Ng-regilo=”MyController”>
Eniri Nomon: <Eniga tipo=”Teksto” Ng-modelo=”Salutnomo”><Br>
<Br>
Plena Nomo: {{Salutnomo}}
</Div>
<Skribo>
FunctionMyController($Amplekso) {
$Amplekso.Salutnomo = “David”;
}
</Skribo>
</Korpo>
</Html>
[/Kodo]
Kiel diskutita, Ni inkluzivis AngularJS JavaScript dosiero en la HTMLa paĝo kiu estas difinita ene de la <Kapo> Etikedo. La sekvanta parto enhavas AngularJS app kiu estas difinita uzanta la Ng-app Ecaj kuroj en la <Div> Etikedo.
La Ng-regilo Instrukcio difinas la aplikan regilon. La AngularJS alvokos la “MyController” Kun $Amplekso Kontraŭargumenti kiun kreas nemoveblaĵon vokis “Salutnomo” En la amplekso.
Difini la modelan nomon uzanta Ng-modeloInstrukcio difinita en la <Enigo> Etikedo. Ĝi ligas la enigan kampon al la regila nemoveblaĵo “Salutnomo”.
Malfermi la FirstExample.Html En la retumilo kaj vidi la rezulton kiel montrita en la ekrano pafis malsupre:
Cifero: AngularJS Ekzemplo
Konkludo: Ni jam diskutis ĉiuj la flankoj de AnguarJS. Antaŭ ol ni konkludas, Lasi nin resumi la punktojn. AngularJS (Ankaŭ sciita kiel Angular)Estas malferma fonta araneaĵa apliko kadro. Ĝi provizas klienton flanka MVCa arkitekturo kune kun ofte uzita erojn postulita por riĉaj interretaj aplikoj. AngularJS sekvas declarative programara modelo por konstruanta uzantajn fasadojn. La ĉefa celo de ĉi tiu kadro estas fari evoluadon kaj elprovanta pli facilan.
Hope vi havas klaran komprenon de la AngularJS kadro. Ĝui leganta je Www.techalpine.com
