„AngularJS“, „AngularJS“ įpėdinė, yra kūrimo platforma, skirta kurti mobilias ir darbalaukio programas naudojant „TypeScript“ ir (arba) „JavaScript“ ir kitas kalbas. „Angular“ yra populiarus kuriant didelės apimties svetaines ir palaiko žiniatinklio, mobiliojo žiniatinklio, vietinių mobiliųjų ir vietinių darbalaukio programas.
„Angular core“ kūrimo komanda yra padalinta tarp „Google“ darbuotojų ir tvirtos bendruomenės; tai greitai neišnyks. Be plačių savo galimybių, „Angular“ platforma turi stiprią išorinę ekosistemą: kelios žinomos IDE palaiko „Angular“, turi keturias duomenų bibliotekas, yra pusšimtis naudingų įrankių ir daugiau nei dešimtys vartotojo sąsajos komponentų rinkinių ir dešimtys Kampinės knygos ir kursai. 2015 m., Kai suteikiau „AngularJS“ „Bossie“ apdovanojimą, paaiškinau, kad tai yra „JavaScript-AJAX“ modelio-su viskuo (MVW) sistema, pratęsianti HTML žymint dinaminius rodinius ir dvipusius duomenų įrišimus. „Angular“ yra ypač naudinga kuriant vieno puslapio žiniatinklio programas ir susiejant HTML formas su modeliais ir „JavaScript“ valdikliais. Naujasis „Angular“ yra parašytas „TypeScript“, o ne „JavaScript“, o tai, kaip paaiškinsiu, turi daug privalumų.
Keistai skambantis „model-view-whatside“ modelis yra bandymas įtraukti modelio-view-controller (MVC), model-view-view-model (MVVM) ir model-view-presenter (MVP) modelius. moniker. Šių trijų glaudžiai susijusių modelių skirtumai yra tokie dalykai, dėl kurių programuotojai mėgsta aršiai ginčytis; „Angular“ kūrėjai nusprendė atsisakyti diskusijos.
Iš esmės „Angular“ automatiškai sinchronizuoja duomenis iš jūsų vartotojo sąsajos („AngularJS“ rodiniai ir „Angular 2“ ir aukštesnės versijos šablonai) su jūsų „JavaScript“ objektais (modeliu) per dvipusį duomenų įrišimą. Norėdami padėti geriau struktūrizuoti savo programą ir palengvinti jos testavimą, „Angular“ moko naršyklę, kaip atlikti priklausomybės įvedimą ir valdymo inversiją. Naujasis „Angular“ (2 ir naujesnė versija) rodinius ir valdiklius pakeičia komponentais ir priima standartines konvencijas, o tai leidžia lengviau suprasti ir leidžia kūrėjams susitelkti kuriant „ECMAScript 6“ modulius ir klases. Kitaip tariant, „Angular 2“ yra visiškas „AngularJS“ perrašymas, kuris bando tas pačias idėjas įgyvendinti geriau. Kampinio vaizdo šablonai, turintys gana paprastą sintaksę, yra sukomponuoti į „JavaScript“, kuris yra gerai optimizuotas šiuolaikiniams „JavaScript“ varikliams. Naujas „Angular 2“ komponentinis maršrutizatorius gali padalyti kodą (tingiai įkelti), kad sumažintų pateikto kodo kiekį, kad būtų pateiktas rodinys.
atsisiųskite „Pradėkite nuo kampinio“ Atsisiųskite šią „Angular“ mokymo programą patogiu PDF formatuKodėl kampinis? O kada tai nėra geras pasirinkimas?
„JavaScript“ sistemos pasirinkimas žiniatinklio programai yra toks procesas, kuris sukuria religinius karus tarp kūrėjų. Aš čia ne tam, kad pasikalbėčiau apie „Angular“, bet noriu, kad žinotumėte jo privalumus ir trūkumus. Idealiu atveju turėtumėte pasirinkti programą, kuri tinka jūsų programai, atsižvelgiant į jūsų organizacijos įgūdžius ir sistemas, kurias naudojate kitose programose. Apskritai „Angular“ turi gerą įrankį ir tinka tikrai dideliems, didelio srauto projektams. „AngularJS“ visiškai perrašytas „Angular“ buvo suprojektuotas nuo pat pradžių naudoti mobiliuosiuose įrenginiuose ir užtikrinti aukštą našumą. Kaip ir jo pirmtakas, jis lengvai ir gerai susieja duomenis.
„Angular“ naudoja žiniatinklio komponento modelį, bet ne žiniatinklio komponentus per se. Tai nėra „Polymer“, kuris sukuria tikrus interneto komponentus, nors, jei norite, galite naudoti „Polymer Web Components“ kampinėse programose. „Angular“ naudoja valdymo inversijos (IoC) ir priklausomybės injekcijos (DI) modelius ir išsprendžia kai kurias problemas, susijusias su „AngularJS“ įgyvendinimu.
„Angular“ naudoja direktyvas ir komponentus, kurie maišo logiką su HTML žymėjimu. Vienoje minties mokykloje sakoma, kad logikos maišymas su pateikimu yra kardinali nuodėmė. Kita minties mokykla sako, kad viską, ką programa atlieka, deklaruojama vienoje vietoje, lengviau kurti ir suprasti. Tai klausimas, kurį turėsite nuspręsti patys, nes aš atsidūriau skirtingose klausimo pusėse skirtingiems projektams.
„Angular“ tikrai turi tam tikrų problemų dėl dokumentacijos, dažnai kyla problemų dėl suderinamumo atgal ir daugybė koncepcijų, kurias gali išmokti naujas kūrėjas. Kita vertus, „Angular“ turi didžiulę ekosistemą, kuri užpildo „Angular“ dokumentacijos spragas trečiųjų šalių žiniatinklio pamokomis, vaizdo įrašais ir knygomis.
Apie „TypeScript“
„Angular“ yra įdiegta „TypeScript“, ančių tipo „JavaScript“ superset, kuris perkeliamas į „JavaScript“. Apskritai „TypeScript“ programas lengviau išlaikyti gamybos mastu nei „JavaScript“. Paprastas procesas nustatant, ar jūsų tipai yra teisingi kompiliavimo metu, pašalina didelę įprastų „JavaScript“ klaidų klasę, o žinant tipus redaktoriai, įrankiai ir IDE gali būti naudingesni užbaigiant kodą, pertvarkant ir tikrinant kodą.
Aš esu didelis „TypeScript“ gerbėjas. Manau, kad daug produktyviau dirbti su dideliu „TypeScript“ projektu, nei dirbti su dideliu „JavaScript“ projektu. Naudodamas „JavaScript“, aš tikrai niekada nežinau, ar klaidos slypi kode, laukiančiose man įkandimo, nesvarbu, kaip dažnai aš paleidžiu „JSHint“. Naudodamas „TypeScript“, bent jau pridėjęs pasirinktinius tipus, klases, modulius ir sąsajas, jaučiuosi kur kas saugiau.
Pradėkite: įdiekite „Angular“, „TypeScript“ ir „Visual Studio“ kodus
Tai pasakę, įdiekime programinę įrangą ir pradėkime.
Įdiekite „Node.js“ ir „NPM“
Prieš ką nors darant, turite įdiegti „Node.js“ ir „NPM“, „Node“ paketų tvarkytuvę, nes jie yra didžioji dalis „Angular“ diegimo ir įrankių. Norėdami sužinoti, ar jie įdiegti, ir jei taip, kokios versijos yra įdiegtos, eikite į konsolės arba terminalo eilutę ir įveskite šias dvi komandas:
$ node -v $ npm -v
Mano kompiuteryje nurodyta „Node.js“ versija yra v6.9.5, o „NPM“ versija - 3.10.10. Šiuo metu tai yra dabartinės ilgalaikio palaikymo versijos, kaip galiu pasakyti žiūrėdamas į //nodejs.org/. Jei jūsų versijos yra dabartinės, galite pereiti į kitą skyrių. Jei kurios nors komandos nerandate arba kuri nors versija yra pasenusi, turėtumėte įdiegti dabartines versijas. Mano versijos yra dabartinės, nes neseniai įdiegiau „Node“ iš naujo, kaip parodyta toliau pateiktoje ekrano kopijoje. Diegiant „Node.js“ ir „NPM“ reikia naršyti „nodejs.org“, paspausti žalią „LTS“ mygtuką ir sekti instrukcijas.
Baigę diegti, dar kartą patikrinkite versijas ir įsitikinkite, kad jos tikrai atnaujintos. Žinau, kad pakartojus patikrinimą skamba paranojiškai, tačiau geram programuotojui reikia sveikos paranojos dozės, kad būtų išvengta klaidų, o nutrauktos instaliacijos nėra retos.
1. Įdiekite kampinį
Yra du būdai, kaip įdiegti ir naudoti „Angular“. Pirmiausia jums parodysiu komandinės eilutės sąsajos (CLI) metodą dėl kelių priežasčių. Pirmasis yra tai, kad jis geriau tinka man būdui dirbti. Antrasis yra tas, kad CLI sukuria išsamesnę starterio programą nei „QuickStart“ sėkla. Trečiasis dalykas - atrodo, kad „QuickStart“ sėklos instrukcijų valymo žingsnis gali sugadinti sumaištį, jei bus naudojamas netinkamu laiku arba netinkamame kataloge.
Naršykite adresu //angular.io/ ir spustelėkite vieną iš trijų mygtukų Pradėti. Jie visi eina į tą pačią vietą - „Angular QuickStart“.
Perskaitykite tą puslapį ir nedvejodami išbandykite „QuickStart“ pavyzdį „Plunker“ naudodami nuorodą po pirmojo kodo bloko. Kai manote, kad galite laikytis @Komponentas dekoratoriaus funkcija ir kampinės interpoliacijos surišimo išraiška {{vardas}}, spustelėkite kairėje esančią nuorodą CLI QuickStart. Nesijaudinkite per daug dėl to, kaip įgyvendinama dekoratoriaus funkcija ir interpoliacijos įrišimas: mes tai priimsime.
1a. Įdiekite ir išbandykite „Angular-CL“
Vykdysime instrukcijas, kad sukurtume CLI kūrimo aplinką. Pirmasis žingsnis yra įdiegti „Angular“ ir jo CLI visame pasaulyje npm:
$ npm įdiegti -g @ angular / cli
Atidžiai stebėdami diegimą pamatysite daugybę būtinų sąlygų ir įrankių, įdiegtų prieš „Angular“ ir jo CLI. Jei yra įspėjimų, nesijaudinkite dėl jų. Jei yra klaidų, gali tekti jas ištaisyti; Aš pats mačiau tik įspėjimus. Anglišką CLI saugu įdiegti, kai tik norite.
Kitas žingsnis - sukurti naują projektą su „Angular CLI“. Aš įdėjau savo aplanką į katalogą „Work“, esantį mano namų vartotojo aplanke.
$ cd veikia $ ng naujos mano programos
Kaip pažymėta instrukcijose, naujos „Angular“ programos sugeneravimas užtruks kelias minutes. Tai tinkamas laikas išgerti puodelio arbatos ar kavos.
Ekrano kopijoje pamatysite, kad dar kartą patikrinau „TypeScript“ versiją (tsc -v) po „Angular CLI“ diegimo. Taip, tai buvo šiek tiek paranojika. Ir taip, tai gera idėja ir jums. Jei dar neįdiegėte „TypeScript“, pasirūpinkime tuo dabar:
$ npm įdiegti –g mašinraštis
Mes beveik ten. Tada eikite į naują katalogą ir aptarnaukite programą.
Pateikti „$ cd my app“
Kaip jums pasakys serveris, jis klausosi 4200 prievado. Taigi atidarykite naršyklės skirtuką // localhost: 4200 ir pamatysite paveikslėlį kairėje.
Puslapio CLI „QuickStart“ likutis nurodo pakeisti pavadinimo ypatybę ir jos CSS. Nesivaržykite tai daryti su kuo nors programavimas redaktorius (ne teksto redaktorius!) Atsitiktinai įdiegėte arba palaukite, kol vėliau įdiegsite „Visual Studio Code“. Naršyklės langas bus automatiškai atnaujinamas kiekvieną kartą išsaugant, kai serveris stebi kodą ir atnaujina pakeitimus.
Kai baigsite darbą su serveriu, terminalo lange paspauskite „Control-C“, kad užmuštumėte procesą.
1b. Įdėkite „Angular QuickStart“ sėklą
Tik atlikite šį veiksmą, jei praleidote 1a veiksmą. Jei tai padarysite tiek žingsnių, šis diegimas bus klaidingas CLI diegimo dalis, ir jūs turėsite perdaryti tai, jei norite jį naudoti dar kartą. „QuickStart“ sėklos diegimo instrukcijose siūlomos dvi galimybės pradėti procesą: sėklos atsisiuntimas ir išpakavimas arba sėklos klonavimas taip:
$ git clone //github.com/angular/quickstart.git quickstart
Nesvarbu, kurią kodo gavimo parinktį pasirinksite, tolesni veiksmai yra tokie patys:
$ cd greitas paleidimas
(ar kaip pavadinote aplanką)
$ npm įdiegti$ npm pradžia
npm įdiegti žingsnis daro iš esmės tą patį, ką ir $ npm įdiegti -g @ angular / cli žingsnis diegimo CLI versijoje, išskyrus tai, kad jis įdiegia „TypeScript“ ir tai daro ne įdiekite kampinį CLI, nes tai nėra priklausomybių sąraše paketas.json. Tiesą sakant, jei kampinis CLI jau yra įdiegtas, šis scenarijus bus pašalinti tai.
npm pradžia žingsnis paleidžia šį scenarijų:
"start": "vienu metu \" npm paleisti build: žiūrėti \ "\" npm paleisti rodyti \ ""
Norėdami tai išplėsti, „build: watch and serve“ scenarijai yra šie:
"build: watch": "tsc -p src / -w"
ir
"serve": "lite-server -c = bs-config.json"
Ar aš tai minėjau tsc yra „TypeScript“ kompiliatorius? -p Parinktis nustato projekto katalogą, kad būtų sudarytas, ir -w parinktis sako žiūrėti įvesties failus.
npm pradžia žingsnis (vienu metu paleisdami du scenarijus) iš esmės atliks tą patį, ką ir tarnauti žingsnis diegimo CLI versijoje, išskyrus tai, kad greičiausiai jis pasirinks kitą prievadą, be to, jis automatiškai įkels jūsų teikiamą puslapį į numatytąją naršyklę, o puslapis atrodys kaip kairėje esantis vaizdas.
Baigę žaisti su „Angular QuickStart“ programa, tiesiog paspauskite „Ctrl“ + C arba uždarykite terminalo langą, kad užmuštumėte procesą. Galite vėl jį paleisti, grįžę į katalogą ir paleisdami tarnauti.
Kitas (pasirinktinis) „QuikStart“ pradinių instrukcijų žingsnis yra tas, kuris mane jaudina: liepia ištrinti neesminius failus naudojant rm -rf „MacOS“ arba del sistemoje „Windows“. Jei nuspręsite tai padaryti, prieš paleisdami scenarijų, kurį nukopijavote iš dokumentacijos svetainės, dar kartą patikrinkite, ar esate teisingame kataloge. Nebandykite to išbandyti, kai pradėsite pridėti failus prie projekto.
Nesvarbu, ar laikėtės CLI, ar „QuickStart“ pradinės instrukcijos, kitas žingsnis bus ištirti „Angular“ projekto šaltinio kodą. Tuo tikslu įdiekime redagavimo priemonę, kuri supranta kampą.
2. Įdiekite „Visual Studio“ kodą
„Angular resources“ puslapyje rekomenduojamos trys IDE: „IntelliJ IDEA“, „Visual Studio Code“ ir „WebStorm“. Aš naudoju visus tris, tačiau šio pratimo tikslams „Visual Studio Code“ yra geriausias pasirinkimas, nes jis yra nemokamas ir atviro kodo. Naršykite į „Visual Studio Code“ pagrindinį puslapį ir atsisiųskite dabartinę stabilią savo platformos versiją, tada įdiekite paketą.
Įdiegę „Visual Studio Code“, paleiskite jį ir atidarykite katalogą, kuriame yra jūsų pagrindinis projektas. Mano „Mac“ sistemoje CLI sukurtas projektas yra ~ / work / my-app ir sėkla yra ~ / darbas / greito paleidimo vadovas. Jūsų vieta skirsis priklausomai nuo to, ar įdiegėte CLI, ar pradinį diegimą, ir nuo pasirinkimų, kuriuos pasirinkote dėl jų tikslinių katalogų. Šaltinio medis turėtų atrodyti maždaug taip:
„Visual Studio Code“ palaiko „TypeScript“ iš dėžutės, todėl nieko kito neįmanoma įdiegti. Jei norite vėliau įdiegti kitas kalbas, tai lengva padaryti „Plėtinių“ skydelyje, kurį galite lengvai parodyti spustelėdami apatinę piktogramą viršuje kairėje. Į paieškos laukelį, esantį skydelio Plėtiniai viršuje, įveskite norimos kalbos ar įrankio pavadinimą. Galite grįžti į „File Explorer“ spustelėdami viršutinę kairiosios piktogramą.
