„Angular 9“ pradedantiesiems - kaip įdiegti savo pirmąją programą naudojant kampinį CLI

„Angular“ yra vienas iš populiariausių „Google“ sukurtų ir sukurtų „JavaScript“ rėmų. Per pastaruosius porą metų „ReactJS“ sulaukė didelio susidomėjimo ir tapo populiariausia šiuolaikine JS biblioteka pramonėje. Bet tai nereiškia, kad kampinis nebėra svarbus.

Priešingai, „Angular“ yra antra populiariausia sistema po „React“ pagal „Google Trends“ (visame pasaulyje):

Kaip „front end“ kūrėjas, aš dirbau su „Angular“. Dabar norėčiau aptarti keletą svarbių „Angular“ bruožų savo būsimuose straipsniuose:

  • 1 dalis: Kaip įdiegti savo pirmąją programą su kampiniu CLI (šiuo metu esate čia)
  • 2 dalis. Kampiniai komponentai ir stygų interpoliacija
  • 3 dalis. Kampinės direktyvos ir vamzdžiai
  • 4 dalis. Vienpusis duomenų susiejimas kampu
  • 5 dalis. Kampinis dviejų krypčių duomenų susiejimas naudojant „ngModel“

Pirmoje mano „Kampinio pradedantiesiems“ serijos dalyje sužinosite, kas yra kampinis ir kampinis CLI ir kaip įdiegti pirmąją kampinę programą naudojant CLI.

Būtinos sąlygos

Prieš pradedant mokytis „Angular“, rekomenduoju susipažinti su šiomis kalbomis, jei dar nesate:

  • HTML, CSS
  • „JavaScript“ / ES6
  • „TypeScript“

Jei norite, galite žiūrėti mokymo vaizdo įrašą žemiau:

Kas yra kampinis?

„Angular“ yra „Google“ sukurta ir prižiūrima „JavaScript“ sistema, skirta kurti „front-end“ programas. Pirmiausia leiskite man paaiškinti, kas yra sistema ...

Kas yra sistema?

„Framework“ yra visas paketas su savo funkcijomis ir bibliotekomis. „Framework“ turi savo taisykles, jūs neturite daug lankstumo, o projektas priklauso nuo jūsų naudojamo pagrindo. Kampinis yra karkaso pavyzdys.

„Angular“ išleido 2016 m., Tačiau prieš „Angular“ buvo „AngularJS“. Vienas iš dažniausiai užduodamų klausimų apie „Angular“ yra tas, kad kuo skiriasi „AngularJS“ ir „Angular“?

KampinisJS vs kampinis

Šios 2 „Angular“ versijos klaidina daugelį kūrėjų. „AngularJS“ ir „Angular“ yra visiškai skirtingos sistemos. Kampinės versijos (pvz., 1, 1.2, 1.5 ir kt.) Vadinamos kampiniu JS, o pradedant nuo 2 ir naujesnės versijos - kampinėmis.

  • Kampinis JS → versijos nuo 1.x
  • Kampinis → 2 ir naujesnė versija

Taigi „AngularJ2“ versija yra visiškai perrašyta „AngularJS“ sistema, o naujesnės versijos (pvz., 4,5,6 ir pan.) Yra nedideli 2 kampinės versijos pakeitimai.

Šioje straipsnių serijoje mokysitės „Angular 2+“.

Kas yra kampinis CLI?

CLI reiškia komandų eilutės sąsają. „Angular“ turi savo oficialų CLI, kuris mums padeda daug dalykų tobulinant.

Kampinis CLI naudojamas automatizuoti operacijas „Angular“ projektuose, o ne daryti juos rankiniu būdu. CLI palaiko mus, kūrėjus, vykdant „Angular“ projektą nuo pradžios iki pabaigos.

Pavyzdžiui, kampinis CLI gali būti naudojamas:

  • Konfigūracijos, aplinkos sąranka
  • Pastato komponentai, paslaugos, maršrutų sistema
  • Pradėti, išbandyti ir įgyvendinti projektą
  • Trečiųjų šalių bibliotekų (pvz., „Bootstrap“, „Sass“ ir kt.) Diegimas

ir daug daugiau. Dabar pažiūrėkime, kaip įdiegti pirmąją „Angular App“, naudojant CLI žingsnis po žingsnio.

1 veiksmas: įdiekite NPM („Node Package Manager“)

Visų pirma mums reikės „Node js“. NPM (mazgų paketų tvarkyklė, yra mazgo js dalis) yra įrankis, skirtas įdiegti trečiųjų šalių bibliotekas ir priklausomybes nuo mūsų projekto. Jei dar neturite, galite atsisiųsti ir įdiegti čia. Aš taip pat paaiškinau tai žingsnis po žingsnio vaizdo įraše.

2 žingsnis: įdiekite kampinį CLI

Jei turite įdiegtą js mazgą, kitas žingsnis yra pats kampinio CLI diegimas jūsų kompiuteryje:

npm install -g @angular/cli

g reiškia visuotinę instaliaciją . Jei vėliau naudosite -g, CLI galite naudoti bet kuriame „Angular“ projekte savo kompiuteryje.

Patarimas : ng vNorėdami patikrinti savo kampinę versiją, įveskite komandinės eilutės sąsają (arba terminalą).

3 žingsnis: sukurkite naują kampinį projektą

Baigę diegimą, galite naudoti „Angular CLI“ ir sukurti naują „Angular“ projektą naudodami šią komandą:

ng new my-first-app

Ši komanda sukuria naują „Angular“ projektą (pavadintą „mano pirmoji programa“, galite naudoti bet kokį pavadinimą) su visomis būtinomis priklausomybėmis ir failais. Jums nereikia nieko jaudintis, nes CLI tai daro automatiškai už jus.

4 žingsnis: paleiskite programą

Įdiegus CLI ir sukūrus naują „Angular“ programą, paskutinis žingsnis yra projekto pradžia. Norėdami tai padaryti, turime naudoti šią komandą:

ng serve -- open

Vėliava „atidaryti“ automatiškai atidaro jūsų vietinės naršyklės langą.

„Angular“ palaiko tiesioginį serverį , todėl galite pamatyti pakeitimus savo vietiniame tinkle neatnaujinę naršyklės puslapio. Norėdami gauti daugiau informacijos ir atnaujinimus, patikrinkite ir oficialius dokumentus.

Išvada

Taigi pirmoje dalyje pateikėme „Angular“ įvadą, kas yra CLI ir kaip įdiegti pirmąją „Angular“ programą. Antrame įraše sužinosite apie kampinius komponentus ir stygų interpoliaciją. Sekite naujienas :)

Jei norite sužinoti daugiau apie interneto plėtrą, nesivaržykite sekti mane „Youtube“ !

Ačiū, kad skaitėte!