Peruskulma-asennus ja komponenttirakenne (Kuinka luoda verkkokauppasovellus käyttämällä kulma- ja Firebase-pilvipalvelua) - osa 1

Angular on TypeScript-pohjainen avoimen lähdekoodin käyttöliittymäverkkosovellusalusta, jota johtaa Googlen Angular Team.

Kulma JS ja Kulma ovat täysin erilaisia. Jos sinulla ei ole ideoita Angular JS: stä (tai Angular 1.x), älä huolestu, en myöskään koskaan työskennellyt sen kanssa. Kulma 2 ja entiset versiot ovat melko yksinkertaisia ​​kuin kulma 1.x, meillä on hyvä mennä.

Mitä todennäköisesti tarvitset:

  • Node.js

Tarkista, onko Node.js asennettu.

  • NPM

Tarkista, onko NPM (Node Package Manager) asennettu

Tarkista Node.js ja NPM-versio:

solmu -v
npm-v
  • Asenna kulmikas CLI (komentoriviliitäntä):
npm i -g @ kulma / cli

Varmista, että saat uusimman version. Lisätietoja kulma-CLI: stä täältä.

  • JavaScriptin perusteet.
  • Bootstrap-perusteet.

Kulma on kokonaan TypeScriptiin rakennettu kehys. TypeScriptin käyttö kulmikkaan kanssa tarjoaa saumattoman kokemuksen. Kulma-dokumentaatio ei vain tue TypeScriptiä ensimmäisen luokan kansalaisena, vaan käyttää sitä pääkielenään.

Mutta älä huolestu, TypeScript on melko samanlainen kuin JavaScript. Jos tunnet JavaScriptin, olet kultainen.

Nyt kun ympäristömme on valmis, jatkakaamme.

Aloitetaan

Kulma-CLI: tä käytetään komponenttien, palvelujen, putkien, reittien ja direktiivien luomiseen.

luoda uusi kulmainen sovellustyyppi alla olevaan komentoon:

ng new ngCart - reititys

Tässä ngCart on sovelluksemme nimi, yllä oleva komento luo kansion nimellä ngCart ja tekee kaikki tarvittavat tiedostot meille.

- reitityslippua käytetään sovellus-routing.module.ts-tiedoston luomiseen, joka sisältää kaikki tiedot reiteistä.

.Ts on laajennus, jota käytetään TypeScript-tiedostoissa.

Tämä on tiedostorakenne, jonka saamme suoritettuaan yllä olevan komennon

Älä huijaa, tiedän, että tiedostoja on paljon. Mutta työskentelemme enimmäkseen src / app / hakemistossa.

app.component.css sisältää kaikki sovelluskomponentin CSS: t.

app.component.html sisältää kaikki sovelluskomponentin HTML-koodit.

app.component.ts sisältää kaikki sovelluskomponenttiin liittyvät logiikat.

app.module.ts huolehtii kaikista sovelluksessamme käytetyistä paketeista.

Hyvän ilmeen saavuttamiseksi käytämme Bootstrap 4: ää.

Lisää CSS: n Bootstrap CDN index.html-tiedostoon ennen

Lisää JS: n Bootstrap CDN index.html-tiedostoon ennen