Pamata leņķa iestatīšana un komponentu struktūra (Kā izveidot e-komercijas lietojumprogrammu, izmantojot leņķisko un Firebase Cloud Firestore) - 1. daļa

Angular ir TypeScript balstīta atvērtā pirmkoda tīmekļa lietojumprogrammu platforma, kuru vada Google Leņķiskā komanda.

Leņķiskais JS un leņķis ir pilnīgi atšķirīgi. Ja jums nav ideju par leņķisko JS (vai leņķisko 1.x), neuztraucieties, es arī nekad ar to nedarbojos. Leņķa 2 un iepriekšējās versijas ir diezgan vienkāršākas nekā 1. leņķa, mums ir labi iet.

Kas jums, iespējams, ir nepieciešams:

  • Node.js

Pārbaudiet, vai nav instalēts Node.js.

  • NPM

Pārbaudiet, vai ir instalēta NPM (Node Package Manager)

Pārbaudiet Node.js un NPM versiju:

mezgls -v
npm -v
  • Instalējiet leņķisko CLI (komandrindas interfeisu):
npm i -g @ leņķa / cli

Pārliecinieties, ka esat saņēmis jaunāko versiju. Uzziniet vairāk par leņķisko CLI šeit.

  • JavaScript pamati.
  • Bootstrap pamati.

Leņķiskais ir ietvars, kas pilnībā iebūvēts TypeScript. Izmantojot TypeScript ar leņķisko, tiek nodrošināta viengabalaina pieredze. Leņķiskā dokumentācija ne tikai atbalsta TypeScript kā pirmās klases pilsoni, bet arī izmanto to kā galveno valodu.

Bet neuztraucieties, Type Type ir diezgan līdzīgs JavaScript. Ja esat pazīstams ar JavaScript, jūs esat zeltainā krāsā.

Tagad, kad mums ir sagatavota vide, turpināsim.

Sāksim

Leņķisko CLI izmanto komponentu, pakalpojumu, cauruļu, maršrutu un direktīvu ģenerēšanai.

lai izveidotu jaunu leņķisko lietojumprogrammas tipu zemāk:

ng new ngCart - maršruts

Šeit ngCart ir mūsu lietojumprogrammu nosaukums, virs komanda izveidos mapi ar nosaukumu ngCart un izveidos visus mums nepieciešamos failus.

- maršrutēšanas karodziņu izmanto, lai ģenerētu failu app-routing.module.ts, kurā būs visa informācija par maršrutiem.

“.Ts” ir paplašinājums, ko izmanto TypeScript failiem.

Šī ir faila struktūra, ko iegūstam, palaižot virs komandas

Neuztraucieties, es zinu, ka ir daudz failu. Bet mēs galvenokārt strādāsim src / app / direktorijā.

app.component.css saturēs visu lietotnes komponenta CSS.

app.component.html saturēs visu lietotnes komponenta HTML.

app.component.ts saturēs visu loģiku, kas saistīta ar lietotnes komponentu.

app.module.ts parūpēsies par visām pakotnēm, kuras tiek izmantotas mūsu lietotnē.

Lai iegūtu lielisku izskatu, mēs izmantosim Bootstrap 4.

Pirms failā index.html iekļaujiet CSS sāknēšanas CDN

 

Tagad nokļūstiet savas lietojumprogrammas saknes direktorijā un ierakstiet komandu zemāk, lai palaistu savu lietotni.

ng s -o

Karodziņš “- o” pārlūkā atver mūsu lietotni.

Pamata pieteikums gatavs

Ja redzat, ka kaut kas līdzīgs ir atvērts jūsu pārlūkprogrammā, tad apsveicam, ka tikko izveidojāt leņķisko programmu.

Bet tas nav tas, ko mēs vēlamies.

Tātad, izgatavosim dažus projektam nepieciešamos komponentus.

Mūsu komponentu struktūra ir parādīta attēlā zemāk

Detaļu struktūra

Izpildiet zemāk esošās komandas, lai ģenerētu komponentus.

Pārliecinieties, ka atrodaties savas programmas saknes (/ ngCart) mapē

n g g Admin

Šī komanda ģenerēs 4 failus un atjauninās failu “app.module.ts”

ng g c sastāvdaļa

Lai ģenerētu apakškomponentus, iekļūstiet vecāku komponentu mapē un izpildiet komandas, kā parādīts zemāk.

Tagad mēs izveidosim arī mapi “/ pakalpojumi”, kurā mēs izveidosim “groza serviss”, izmantojot komandu zemāk.

n g pakalpojumu grozs

Tagad ģenerējiet UserComponent, kā parādīts attēlā zemāk.

Tagad mēs esam pabeiguši komponentu ģenerēšanu, importēsim tos failā “app.module.ts”. Kā redzam, leņķiskā CLI jau mums importē visas sastāvdaļas, tāpēc mums ir jāimportē tikai pakalpojumi.

Un neaizmirstiet pakalpojumu sniedzēju masīvā iekļaut pakalpojumu nosaukumus.

Tagad izveidosim dažus maršrutus, tāpēc mums ir jāatjaunina vietne “app-routing.module.ts”. Vienkārši nokopējiet visus komponentu importēšanas pārskatus no faila “app.module.ts” failā “app-routing.module.ts”.

importējiet vietni {AppComponent} no './app.component';
importējiet vietni {AdminComponent} no './admin/admin.component';
importējiet vietni {AdminProductsComponent} no './admin/admin-products/admin-products.component';
importēt vietni {AdminUsersComponent} no './admin/admin-users/admin-users.component';
importējiet {ProductsComponent} no './products/products.component';
importējiet {CartComponent} no './products/cart/cart.component';
importēt vietni {UserComponent} no './user/user.component';
importējiet vietni {SignInComponent} no './user/sign-in/sign-in.component';
importēt {SignUpComponent} no './user/sign-up/sign-up.component';

Ielīmējiet zem koda pirms atslēgvārda “@NgModule”.

const maršruti: Maršruti = [
{ceļš: '', sastāvdaļa: UserComponent},
 {ceļš: “lietotājs”, sastāvdaļa: UserComponent,
     bērni: [
       {ceļš: '', komponents: SignInComponent},
       {ceļš: 'pierakstīšanās', sastāvdaļa: SignInComponent},
       {ceļš: “reģistrēšanās”, sastāvdaļa: SignUpComponent}
     ]
 },
 {ceļš: “produkti”, sastāvdaļa: ProductsComponent,
  bērni: [
       {ceļš: 'grozs', komponents: CartComponent}]
 },
 {ceļš: “admin”, sastāvdaļa: AdminComponent,
  bērni: [
       {ceļš: “produkti”, sastāvdaļa: AdminProductsComponent},
       {ceļš: 'lietotāji', komponents: AdminUsersComponent}
     ]
 }
];

Virs kods ir diezgan vienkāršs, jūs varat iegūt ideju par maršrutiem.

Šeit vecāku komponenti ir UserComponent, ProductsComponent un AdminComponent.

Tātad rediģējiet failus user.component.html, products.component.html un admin.component.html un pievienojiet zemāk kodu.

 

Rediģējiet arī app.component.html, izdzēsiet visu kodu un ielīmējiet zemāk esošo kodu.

 

Tagad beidzot mēs esam pabeiguši visu iestatīšanu, kas mums nepieciešama, lai izveidotu pieteikumu.

Tāpēc mēģināsim apmeklēt dažus maršrutus, izmantojot mūsu lietojumprogrammu.

vienkārši ierakstiet zemāk komandu CMD vai terminālī.

ng s -o

Atvērsies pārlūka logs, un jūs iegūsit kaut ko līdzīgu.

Izmēģiniet visus iespējamos maršrutus, piemēram, zemāk.

/ lietotājs/ lietotājs / pierakstīšanās/ lietotājs / reģistrēšanās/ admin/ admin / produkti/ admin / lietotāji/ produkti/ grozs

Tas ir tas;) šai daļai nākamajā daļā mēs veidosim savu lietojumprogrammu, izmantojot sāknēšanas programmu 4. Līdz tam brīdim izveidosim jūsu lietojumprogrammu un darbosimies.

Leņķiski ir vieglāk, nekā jūs domājat. Leņķa ir viena no labākajām JavaScript bibliotēkām, un tai ir liels atbalsts un jauka kopiena. Tam ir arī rīki, kas padara darbu ar Leņķi ātru un ērtu, piemēram, tas, kuru mēs izmantojām Leņķa CLI.

Kopīgojiet šo ziņu ar tiem, kuri cīnās ar 2. leņķi, un palīdziet viņiem sākt darbu, tas viņiem būs lielisks palīgs.

Laimīgu kodēšanu.

Paldies par jūsu interesi Ļaujiet man uzzināt jūsu domas. Es vienmēr priecājos saņemt atsauksmes. Un arī komentējiet, ja jums ir kādi vaicājumi.

Šeit ir saite uz 2. leņķa kursu:

  • iemācīties Angular2 (kursu)

Sekojiet man Instagram (@_whatifi) Man patīk arī veidot burvju video.