Cara Memasang Angular pada Windows: Panduan untuk CLI Angular, Node.js, dan Alat Binaan

Pengaturcaraan

Dalam tutorial ini, kita akan belajar cara memasang Angular CLI di Windows dan menggunakannya untuk membuat projek Angular.

Apa itu CLI Sudut?

Angular CLI adalah alat rasmi untuk memulakan dan bekerja dengan projek Angular. Ini menjimatkan anda dari kerumitan konfigurasi yang kompleks dan membina alat seperti TypeScript, Webpack, dan sebagainya.

Setelah memasang Angular CLI, anda perlu menjalankan satu arahan untuk menghasilkan projek dan yang lain untuk menggunakannya menggunakan pelayan pembangunan tempatan untuk bermain dengan aplikasi anda.

Seperti kebanyakan alat frontend moden hari ini, Angular CLI dibina di atas Node.js.

Node.js adalah teknologi pelayan yang membolehkan anda menjalankan JavaScript di pelayan dan membina aplikasi web di sisi pelayan. Walau bagaimanapun, Angular adalah teknologi bahagian depan, jadi walaupun anda perlu memasang Node.js pada mesin pengembangan anda, ia hanya untuk menjalankan CLI.

Sebaik sahaja anda membuat aplikasi untuk pengeluaran, anda tidak akan memerlukan Node.js kerana kumpulan akhir hanyalah HTML, CSS, dan JavaScript statik yang dapat dilayani oleh pelayan atau CDN mana pun.

Walaupun begitu, jika anda membina aplikasi web tumpukan penuh dengan Angular, anda mungkin memerlukan Node.js untuk membuat bahagian hujung belakang jika anda ingin menggunakan JavaScript untuk bahagian depan dan hujung belakang.

Lihat stack MEAN - ini adalah seni bina yang merangkumi MongoDB, Express (pelayan web dan rangka kerja REST API yang dibina di atas Node.js) dan Angular. Anda boleh membaca artikel ini jika anda mahu tutorial langkah demi langkah untuk memulakan.

Dalam kes ini, Node.js digunakan untuk membina bahagian belakang aplikasi anda dan boleh diganti dengan teknologi sisi pelayan yang anda mahukan seperti PHP, Ruby, atau Python. Tetapi Angular tidak bergantung pada Node.js kecuali alat CLInya dan untuk memasang pakej dari npm.

NPM bermaksud Pengurus Pakej Node. Ini adalah pendaftaran untuk hosting pakej Node. Dalam tahun-tahun kebelakangan ini juga digunakan untuk menerbitkan pakej dan perpustakaan depan seperti Angular, React, Vue.js dan juga Bootstrap.

Nota : anda boleh memuat turun Buku Angular 8 kami : Bina aplikasi web pertama anda dengan Angular 8 secara percuma.

Memasang CLI Angular pada Windows

Pertama, anda perlu memasang Node dan npm pada mesin pengembangan anda. Terdapat banyak cara untuk melakukannya, seperti:

  • menggunakan NVM (Node Version Manager) untuk memasang dan bekerja dengan pelbagai versi nod dalam sistem anda
  • menggunakan pengurus pakej rasmi sistem operasi anda
  • memasangnya dari laman web rasmi.

Mari bersederhana dan gunakan laman web rasmi. Cukup lawati halaman muat turun dan ambil binari untuk Windows, kemudian ikuti wizard persediaan.

Anda boleh memastikan Node dipasang pada sistem anda dengan menjalankan perintah berikut dalam command prompt yang harus memaparkan versi Node yang dipasang:

$ node -v

Seterusnya, jalankan arahan berikut untuk memasang Angular CLI:

$ npm install @angular/cli

Setelah arahan selesai berjaya, anda harus memasang Angular CLI.

Panduan Pantas untuk CLI Sudut

Setelah memasang Angular CLI, anda boleh menjalankan banyak arahan. Mari mulakan dengan memeriksa versi CLI yang dipasang:

$ ng version

Perintah kedua yang mungkin perlu anda jalankan adalah helpperintah untuk mendapatkan bantuan penggunaan lengkap:

$ ng help

CLI memberikan arahan berikut:

add: Menambah sokongan untuk perpustakaan luaran ke projek anda.

build (b): Menyusun aplikasi Angular ke dalam direktori output yang disebut   dist/  di jalur output yang diberikan. Mesti dilaksanakan dari dalam direktori ruang kerja.

config: Mengambil atau menetapkan nilai konfigurasi sudut.

doc (d): Membuka dokumentasi Angular rasmi (angular.io) dalam penyemak imbas, dan mencari kata kunci tertentu.

e2e (e): Membangun dan melayani aplikasi Angular, kemudian menjalankan ujian ujung ke hujung menggunakan Protractor.

generate (g): Menghasilkan dan / atau mengubah fail berdasarkan skema.

help: Menyenaraikan arahan yang ada dan keterangan ringkasnya.

lint (l): Menjalankan alat linting pada kod aplikasi Sudut dalam folder projek tertentu.

new (n): Membuat ruang kerja baru dan aplikasi Angular awal.

run: Menjalankan sasaran khusus yang ditentukan dalam projek anda.

serve (s): Membangun dan melayani aplikasi anda, membina semula perubahan fail.

test (t): Menjalankan ujian unit dalam projek.

update: Mengemas kini aplikasi anda dan kebergantungannya. Lihat //update.angular.io/

version (v): Output versi CLI Angular.

xi18n: Mengekstrak mesej i18n dari kod sumber.

Menjana Projek

Anda boleh menggunakan Angular CLI untuk menghasilkan projek Angular anda dengan cepat dengan menjalankan arahan berikut di antara muka baris perintah anda:

$ ng new frontend

Catatan: frontend adalah nama projek. Anda tentu saja boleh memilih mana-mana nama yang sah untuk projek anda. Oleh kerana kami akan membuat aplikasi tumpukan penuh, saya menggunakan  frontend sebagai nama untuk aplikasi front-end.

Seperti yang telah disebutkan sebelumnya, CLI akan bertanya kepada anda Adakah anda ingin menambahkan routing sudut? , dan anda boleh menjawab dengan memasukkan y(Ya) atau n(Tidak), yang merupakan pilihan lalai. Ia juga akan bertanya kepada anda mengenai format helaian gaya yang ingin anda gunakan (seperti CSS). Pilih pilihan anda dan tekan   Enter  untuk meneruskan.

Struktur projek bersudut 8

Selepas itu, projek anda akan dibuat dengan struktur direktori dan sekumpulan konfigurasi dan fail kod. Ini kebanyakannya dalam format TypeScript dan JSON. Mari lihat peranan setiap fail:

  • /e2e/: mengandungi ujian akhir-ke-akhir (mensimulasikan tingkah laku pengguna) laman web
  • /node_modules/: Semua perpustakaan pihak ketiga dipasang ke folder ini menggunakan  npm install
  • /src/: mengandungi kod sumber aplikasi. Sebilangan besar kerja akan dilakukan di sini
  • /app/: mengandungi modul dan komponen
  • /assets/: mengandungi aset statik seperti gambar, ikon dan gaya
  • /environments/: mengandungi fail konfigurasi khusus persekitaran (pengeluaran dan pengembangan)
  • browserslist: diperlukan oleh autoprefixer untuk sokongan CSS
  • favicon.ico: favicon
  • index.html: fail HTML utama
  • karma.conf.js: fail konfigurasi untuk Karma (alat ujian)
  • main.ts: fail permulaan utama dari mana AppModule diikat boot
  • polyfills.ts: polyfills yang diperlukan oleh Angular
  • styles.css: fail lembaran gaya global untuk projek tersebut
  • test.ts: ini adalah fail konfigurasi untuk Karma
  • tsconfig.*.json: fail konfigurasi untuk TypeScript
  • angular.json: mengandungi konfigurasi untuk CLI
  • package.json: mengandungi maklumat asas projek (nama, keterangan dan pergantungan)
  • README.md: fail penurunan harga yang mengandungi keterangan projek
  • tsconfig.json: fail konfigurasi untuk TypeScript
  • tslint.json: fail konfigurasi untuk TSlint (alat analisis statik)

Melayan Projek anda

CLI bersudut menyediakan rantai alat lengkap untuk mengembangkan aplikasi front-end pada mesin tempatan anda. Oleh itu, anda tidak perlu memasang pelayan tempatan untuk melayani projek anda - anda boleh menggunakan   ng serveperintah dari terminal anda untuk melayani projek anda secara tempatan.

Mula-mula menavigasi ke dalam folder projek anda dan jalankan arahan berikut:

$ cd frontend $ ng serve

Anda kini boleh menavigasi ke // localhost: 4200 / address untuk mula bermain dengan aplikasi depan anda. Halaman akan dimuat semula secara automatik jika anda menukar fail sumber.

Menjana Artifak Sudut

Angular CLI memberikan ng generatearahan yang membantu pembangun menghasilkan artifak sudut asas seperti modul, komponen, arahan, paip dan perkhidmatan:

$ ng generate component my-component

my-componentadalah nama komponen. Angular CLI secara automatik akan menambahkan rujukan ke components, directivesdan pipesdalam src/app.module.tsfail.

Sekiranya anda ingin menambahkan komponen, arahan atau paip anda ke modul lain (selain modul aplikasi utama, app.module.ts), anda hanya boleh awalan nama komponen dengan nama modul dan garis miring:

$ ng g component my-module/my-component

my-module adalah nama modul yang ada.

Kesimpulannya

Dalam tutorial ini, kami telah melihat cara memasang Angular CLI pada mesin Windows kami dan kami menggunakannya untuk memulakan projek Angular baru dari awal.

Kami juga telah melihat pelbagai arahan yang dapat anda gunakan sepanjang pengembangan projek anda untuk menghasilkan artifak sudut seperti modul, komponen, dan perkhidmatan.

Lihat tutorial Angular kami yang lain.

Anda boleh menghubungi atau mengikuti pengarang melalui laman web peribadinya, Twitter, LinkedIn dan Github.