Persediaan asas teras dan struktur Komponen (Bagaimana untuk membuat aplikasi E-Dagang menggunakan Angina dan Firebase Cloud Firestore) - Bahagian 1

Angular adalah platform aplikasi web terbuka sumber terbuka TypeScript yang diketuai oleh Pasukan Angular di Google.

Angular JS dan Angular berbeza sama sekali. Sekiranya anda tidak mempunyai Idea tentang Janggut Angular (atau Angular 1.x) jangan risau saya juga tidak pernah bekerja dengannya. Angular 2 dan versi-versi terdahulu adalah lebih mudah daripada Angular 1.x, kita baik untuk pergi.

Apa yang anda perlukan:

  • Node.js

Periksa sama ada Node.js dipasang.

  • NPM

Periksa sama ada NPM (Pengurus Pakej Nod) dipasang

Semak versi Node.js dan NPM:

nod -v
npm -v
  • Pasang CLI Angular (Antara Muka Barisan Perintah):
npm i -g @ angular / cli

Pastikan anda mendapat versi terbarunya. Ketahui lebih lanjut mengenai Angular CLI di sini.

  • Asas JavaScript.
  • Asas-asas Bootstrap.

Sudut adalah rangka kerja yang dibina sepenuhnya dalam TypeScript. Menggunakan TypeScript dengan Angular menyediakan pengalaman lancar. Dokumentasi sudut tidak hanya menyokong TypeScript sebagai warganegara kelas pertama tetapi menggunakannya sebagai bahasa utama.

Tetapi jangan bimbang TypeScript sangat mirip dengan JavaScript. Jika anda sudah biasa dengan JavaScript, anda adalah emas.

Sekarang bahawa kami mempunyai persekitaran kami bersedia, mari kita meneruskan.

Mari kita mulakan

CLI sudut digunakan untuk menjana komponen, perkhidmatan, paip, laluan dan arahan.

untuk membuat jenis aplikasi sudut baru di bawah arahan:

ngCart baru - bermesyuarat

Di sini ngCart adalah nama aplikasi kami, perintah di atas akan membuat folder dengan nama ngCart dan membuat semua fail yang diperlukan untuk kami.

- Bendera peralihan digunakan untuk menghasilkan fail aplikasi-routing.module.ts yang akan mengandungi semua maklumat tentang laluan.

".Ts" adalah pelanjutan yang digunakan untuk fail TypeScript.

Ini adalah struktur fail yang kami dapati selepas berjalan di atas arahan

Jangan kecewa, saya tahu terdapat banyak fail. Tetapi kami kebanyakannya akan bekerja dalam direktori src / app /.

app.component.css akan mengandungi semua CSS untuk komponen aplikasinya.

app.component.html akan mengandungi semua HTML untuk komponen aplikasinya.

app.component.ts akan mengandungi semua logik yang berkaitan dengan komponen aplikasi.

app.module.ts akan menjaga semua pakej yang digunakan dalam aplikasi kami.

Untuk mencapai penampilan yang hebat, kami akan menggunakan Bootstrap 4.

Sertakan CDN Bootstrap untuk CSS dalam fail index.html sebelum

integrasi = "sha384-Gn5384xqQ1aoWXA + 058RXPx6Fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXm" crossorigin = "anonim" >

Termasuk Bootstrap CDN untuk JS dalam file index.html sebelum