AngularJS, AngularJS pēctecis, ir izstrādes platforma mobilo un galddatoru lietojumprogrammu veidošanai, izmantojot TypeScript un / vai JavaScript un citas valodas. Angular ir populārs liela apjoma vietņu veidošanā, un tas atbalsta tīmekļa, mobilā tīmekļa, vietējās mobilās un vietējās darbvirsmas lietojumprogrammas.
Angular core izstrādes komanda ir sadalīta starp Google darbiniekiem un spēcīgu kopienu; tas drīz nezudīs. Papildus savām plašajām iespējām Angular platformai ir spēcīga ārējā ekosistēma: vairākas ievērojamas IDE atbalsta Angular, tai ir četras datu bibliotēkas, ir pusducis noderīgu rīku un vairāk nekā ducis UI komponentu komplektu, un ir desmitiem citu Stūra grāmatas un kursi. 2015. gadā, piešķirot AngularJS Bossie balvu, es paskaidroju, ka tas ir modeļa skats neatkarīgi (MVW) JavaScript AJAX ietvars, kas paplašina HTML ar dinamisko skatu marķējumu un divvirzienu datu saistīšanu. Angular ir īpaši labs, lai izstrādātu vienas lapas tīmekļa lietojumprogrammas un saistītu HTML formas ar modeļiem un JavaScript kontrolieriem. Jaunais Angular ir rakstīts TypeScript, nevis JavaScript, kam ir daudz priekšrocību, kā es paskaidrošu.
Dīvaini skanošais modelis “skats neatkarīgi no tā” ir mēģinājums modeļa skata kontroliera (MVC), modeļa skata skata modeļa (MVVM) un modeļa skata prezentētāja (MVP) modeļus iekļaut vienā. moniker. Atšķirības starp šiem trim cieši saistītajiem modeļiem ir tādas lietas, par kurām programmētājiem patīk nikni strīdēties; Angular izstrādātāji nolēma atteikties no diskusijas.
Būtībā Angular automātiski sinhronizē datus no jūsu lietotāja saskarnes (AngularJS skati un veidnes Angular 2 un jaunākās versijās) ar jūsu JavaScript objektiem (modeli), izmantojot divvirzienu datu saistīšanu. Lai palīdzētu jums labāk strukturēt lietojumprogrammu un atvieglotu tā testēšanu, Angular pārlūkam māca, kā veikt atkarības ievadīšanu un vadības inversiju. Jaunais Angular (2. un jaunāka versija) skatus un kontrollerus aizstāj ar komponentiem un pieņem standarta konvencijas, kas padara to vieglāk saprotamu un ļauj izstrādātājiem koncentrēties uz ECMAScript 6 moduļu un klašu izstrādi. Citiem vārdiem sakot, Angular 2 ir pilnīgs AngularJS pārrakstīšana, kas mēģina labāk īstenot tās pašas idejas. Leņķa skata veidnes, kurām ir diezgan vienkārša sintakse, tiek apkopotas JavaScript, kas ir labi optimizētas mūsdienu JavaScript dzinējiem. Jaunais komponentes maršrutētājs, kas atrodas Angular 2, var veikt koda sadalīšanu (slinks ielāde), lai samazinātu piegādātā koda daudzumu skata renderēšanai.
Lejupielādēt sāciet ar leņķi Lejupielādējiet šo leņķa apmācību ērtā PDF formātāKāpēc Angular? Un kad tā nav laba izvēle?
Tīmekļa lietotnei JavaScript ietvara izvēle ir sava veida process, kas iesaista reliģiskos karus izstrādātāju vidū. Es neesmu šeit, lai lūgtu Angular, bet es vēlos, lai jūs zināt tā priekšrocības un trūkumus. Ideālā gadījumā jums vajadzētu izvēlēties savai lietotnei piemērotu ietvaru, ņemot vērā organizācijas prasmes un ietvarus, kurus izmantojat citās lietojumprogrammās. Parasti Angular ir labs rīks, un tas ir piemērots patiešām lieliem, lielas satiksmes projektiem. AngularJS kā pilnīgs AngularJS pārrakstījums tika izstrādāts jau no paša sākuma lietošanai mobilajās ierīcēs un augstai veiktspējai. Tāpat kā tā priekšgājējs, tas viegli un labi sasaista datus.
Angular izmanto tīmekļa komponentu modeli, bet ne Web Components kā tādu. Tas nav Polymer, kas rada reālus tīmekļa komponentus, lai gan, ja vēlaties, jūs varat izmantot Polymer Web Components Angular lietojumprogrammās. Angular patiešām izmanto vadības inversijas (IoC) un atkarības injekcijas (DI) modeļus un novērš dažas problēmas ar AngularJS ieviešanu.
Angular izmanto direktīvas un komponentus, kas sajauc loģiku ar HTML iezīmēšanu. Vienā domu skolā teikts, ka loģikas sajaukšana ar prezentāciju ir kardināls grēks. Citā domu skolā teikts, ka visu, ko programma dara, deklarēšana vienā vietā atvieglo attīstību un izpratni. Tas ir jautājums, kas jums būs jāizlemj pašam, jo esmu atradis sevi dažādu jautājumu dažādos projektos.
Angular patiešām ir dažas dokumentācijas problēmas, biežas problēmas ar atpakaļejošu savietojamību un daudzas koncepcijas, ko mācīties jaunam izstrādātājam. No otras puses, Angular ir milzīga ekosistēma, kas Angular dokumentācijas nepilnības aizpilda ar trešo personu tīmekļa apmācībām, videoklipiem un grāmatām.
Par TypeScript
Leņķiskais ir ieviests TypeScript, pīles tipizētā JavaScript superset, kas tiek pārnests uz JavaScript. Parasti TypeScript lietojumprogrammas ir vieglāk uzturēt ražošanas mērogā nekā JavaScript. Vienkāršais process, lai noteiktu, vai kompilēšanas laikā jūsu tipi ir pareizi, novērš lielu kopēju JavaScript kļūdu klasi, un, zinot veidus, redaktori, rīki un IDE var būt noderīgāki koda aizpildīšanā, atjaunošanā un kodu pārbaudē.
Man gadās būt liels TypeScript fans. Manuprāt, daudz produktīvāk ir strādāt ar lielu TypeScript projektu, nekā strādāt ar lielu JavaScript projektu. Izmantojot JavaScript, es patiešām nekad nezinu, vai kodā slēpjas kļūdas, kas gaida, ka mani iekodīs, neatkarīgi no tā, cik bieži es palaidu JSHint. Izmantojot TypeScript, vismaz tad, kad esmu pievienojis izvēles veidus, klases, moduļus un saskarnes, es jūtos daudz drošāk.
Darba sākšana: instalējiet Angular, TypeScript un Visual Studio kodu
Pateicoties tam, instalēsim programmatūru un sāksim darbu.
Instalējiet Node.js un NPM
Pirms veicat jebko citu, jums jāinstalē Node.js un Node pakotņu pārvaldnieks NPM, jo tie ir lielā mērā Angular instalēšanas un rīku pamatā. Lai uzzinātu, vai tie ir instalēti un, ja jā, kādas versijas ir instalētas, dodieties uz konsoles vai termināla uzvedni un ierakstiet šādas divas komandas:
$ mezgls -v $ npm -v
Manā datorā ziņotā Node.js versija ir v6.9.5 un NPM versija 3.10.10. Tās šobrīd ir pašreizējās ilgtermiņa atbalsta versijas, kā es varu pateikt, aplūkojot //nodejs.org/. Ja jūsu versijas ir aktuālas, varat pāriet uz nākamo sadaļu. Ja kāda no komandām nav atrasta vai kāda no versijām ir novecojusi, instalējiet pašreizējās versijas. Manas versijas ir aktuālas, jo es nesen pārinstalēju Node, kā parādīts zemāk redzamajā ekrānuzņēmumā. Gan Node.js, gan NPM instalēšana ir pārlūkošana vietnē nodejs.org, nospiežot zaļo pogu LTS un sekojot instrukcijām.
Kad esat pabeidzis instalēšanu, vēlreiz pārbaudiet versijas, lai pārliecinātos, vai tās patiešām tiek atjauninātas. Es zinu, ka pārbaudes atkārtošana izklausās paranojas, bet labam programmētājam ir nepieciešama veselīga paranojas deva, lai izvairītos no kļūdām, un pārtraukta instalēšana nav nekas neparasts.
1. Instalējiet Angular
Ir divi veidi, kā instalēt un izmantot Angular. Vispirms es jums parādīšu komandrindas saskarnes (CLI) metodi vairāku iemeslu dēļ. Pirmais ir tas, ka tas labāk atbilst man patīkamam darbam. Otrais ir tas, ka CLI ģenerē pilnīgāku startera lietojumprogrammu nekā QuickStart sēkla. Trešais ir tas, ka tīrīšanas solis QuickStart sēklu instrukcijās, šķiet, varētu izraisīt postījumus, ja to izmantotu nepareizā laikā vai nepareizā direktorijā.
Pārlūkojiet uz //angular.io/ un noklikšķiniet uz vienas no trim pogām Sākt. Viņi visi dodas uz to pašu vietu - Angular QuickStart.
Lūdzu, izlasiet šo lapu un nekautrējieties izmēģināt QuickStart piemēru Plunker, izmantojot saiti pēc pirmā koda bloka. Kad domājat, ka varat sekot @Komponents dekoratora funkcija un leņķiskās interpolācijas saistošā izteiksme {{name}}, noklikšķiniet uz saites CLI QuickStart kreisajā pusē. Neuztraucieties pārāk daudz par to, kā tiek ieviesta dekoratora funkcija un interpolācijas saistīšana: mēs pie tā tiksim.
1.a Instalējiet un pārbaudiet Angular-CL
Mēs izpildīsim norādījumus, lai izveidotu CLI izstrādes vidi. Pirmais solis ir instalēt Angular un tā CLI globāli ar npm:
$ npm instalēt -g @ angular / cli
Ja uzmanīgi skatīsities, kā turpinās instalēšana, redzēsit virkni priekšnoteikumu un rīku, kas instalēti pirms Angular un tā CLI. Ja ir brīdinājumi, neuztraucieties par tiem. Ja ir kļūdas, iespējams, tās būs jālabo; Es pats esmu redzējis tikai brīdinājumus. Leņķa CLI ir droši pārinstalēt, kad vien vēlaties.
Nākamais solis ir jauna projekta izveidošana ar Angular CLI. Es ievietoju raktuves direktorijā ar nosaukumu Work, kas atrodas manas mājas lietotāja mapē.
$ cd strādā $ ng jaunu manu lietotni
Kā norādīts instrukcijās, jaunās lietotnes Angular izveide aizņem dažas minūtes. Šis ir piemērots laiks, lai ietu pagatavot jauku tasi tējas vai kafijas.
Ekrānuzņēmumā redzēsiet, ka es vēlreiz pārbaudīju savu TypeScript versiju (tsc -v) pēc leņķa CLI instalēšanas. Jā, tas bija nedaudz paranojas. Jā, tā ir laba ideja arī jums. Ja vēl neesat instalējis TypeScript, parūpēsimies par to tūlīt:
$ npm instalēt –g mašīnrakstu
Mēs gandrīz esam klāt. Pēc tam pārejiet uz jauno direktoriju un apkalpojiet lietojumprogrammu.
Lietotne $ cd my-app $ ng
Kā serveris jums pateiks, tas klausās 4200. portā. Tāpēc atveriet pārlūka cilni vietnē // localhost: 4200, un jūs redzēsiet attēlu kreisajā pusē.
CLI QuickStart lapas atlikums liek jums mainīt nosaukuma rekvizītu un tā CSS. Droši dariet to ar visu programmēšana redaktors (nē vārdu procesors!), iespējams, esat instalējis vai pagaidiet, līdz vēlāk instalējat Visual Studio kodu. Pārlūka logs tiks automātiski atjaunināts ikreiz, kad saglabājat, kad serveris skatās kodu un atjaunina izmaiņas.
Kad esat pabeidzis serveri, termināļa logā nospiediet Control-C, lai nogalinātu procesu.
1.b Uzstādiet Angular QuickStart sēklas
Tikai veiciet šo darbību, ja esat izlaidis 1.a darbību. Ja jūs to darāt gan soļiem, šī instalācija būs daļa no CLI instalācijas, un jums tas būs jāpārtaisa, ja vēlaties to izmantot vēlreiz. QuickStart sēklu instalēšanas instrukcijās ir divas iespējas procesa sākšanai: sēklu lejupielāde un izpakošana vai sēklu klonēšana šādi:
$ git clone //github.com/angular/quickstart.git quickstart
Neatkarīgi no tā, kuru kodu izvēlaties, nākamās darbības ir vienādas:
$ cd ātrais sākums
(vai kā jūs nosaucāt mapi)
$ npm instalētSākums: $ npm
The npm instalēt solis būtībā dara to pašu, ko $ npm instalēt -g @ angular / cli soli instalācijas CLI versijā, izņemot to, ka tā instalē TypeScript un to dara nē instalējiet leņķa CLI, jo tas nav iekļauts atkarību sarakstā pakete.json. Faktiski, ja leņķa CLI jau ir instalēts, šis skripts būs atinstalēt to.
The npm sākums solis palaiž šo skriptu:
"start": "vienlaicīgi \" npm palaist uzbūvi: skatīties \ "\" npm palaist kalpot \ ""
Lai to paplašinātu, skripti build: watch and serve ir:
"build: watch": "tsc -p src / -w"
un
"serve": "lite-server -c = bs-config.json"
Vai es to esmu pieminējis tsc ir TypeScript kompilators? The -p opcija iestata projekta direktoriju apkopošanai un -w opcija saka skatīties ievades failus.
The npm sākums solis (vienlaikus darbinot abus skriptus) darīs būtībā to pašu, ko kalpo soli instalācijas CLI versijā, izņemot to, ka, visticamāk, tā izvēlēsies citu portu, kā arī tā automātiski ielādēs lapu, kuru tā apkalpo jūsu noklusējuma pārlūkprogrammā, un lapa izskatīsies kā attēls kreisajā pusē.
Kad esat pabeidzis spēlēt ar lietotni Angular QuickStart, vienkārši nospiediet Ctrl + C vai aizveriet termināla logu, lai nogalinātu procesu. To var atsākt, atgriežoties direktorijā un palaižot kalpo.
Nākamais (pēc izvēles) solis QuikStart sēklu instrukcijās ir tas, kas mani satrauc: Tas liek izdzēst nebūtiskos failus, izmantojot rm -rf MacOS vai del operētājsistēmā Windows. Ja jūs nolemjat to darīt, vismaz pirms dokumentācijas vietnes nokopētā skripta atlaišanas pārbaudiet, vai atrodaties pareizajā direktorijā. Lūdzu, neizmēģiniet to pēc tam, kad esat sācis pievienot failus projektam.
Neatkarīgi no tā, vai sekojāt CLI vai QuickStart sēklas instrukcijām, nākamais solis būs Angular projekta avota koda izpēte. Šajā nolūkā instalēsim redaktoru, kas apzinās leņķi.
2. Instalējiet Visual Studio kodu
Lokālo resursu lapā ir ieteikti trīs IDE: IntelliJ IDEA, Visual Studio kods un WebStorm. Es izmantoju visus trīs, bet šī uzdevuma vajadzībām Visual Studio Code ir labākā izvēle, jo tas ir bezmaksas un atvērts avots. Pārlūkojiet uz Visual Studio Code sākumlapu un lejupielādējiet pašreizējo stabilo versiju savai platformai, pēc tam instalējiet pakotni.
Kad Visual Studio kods ir instalēts, palaidiet to un atveriet direktoriju, kurā atrodas jūsu bāzes projekts. Manā Mac datorā ir izveidots CLI ģenerēts projekts ~ / darbs / mana lietotne un sēkla ir plkst ~ / work / quickstartmaster. Jūsu atrašanās vieta mainīsies atkarībā no tā, vai instalējāt CLI vai instalējāt sākotnējo versiju, un visām izvēlētajām izvēlēm attiecībā uz mērķa direktorijiem. Avota kokam vajadzētu izskatīties apmēram šādi:
Visual Studio kods atbalsta TypeScript no kastes, tāpēc nekas cits nav instalējams. Ja vēlaties instalēt citas valodas vēlāk, to ir viegli izdarīt panelī Paplašinājumi, ko var viegli parādīt, noklikšķinot uz apakšējās ikonas augšējā kreisajā stūrī. Meklēšanas lodziņā paneļa Paplašinājumi augšpusē ierakstiet vajadzīgās valodas vai rīka nosaukumu. Varat atgriezties File Explorer, augšējā kreisajā stūrī noklikšķinot uz augšējās ikonas.
