Memperkenalkan CLI Sudut

Dalam siaran ini, kita akan belajar tentang Angular CLI dan kita akan melihat bagaimana untuk menggunakannya untuk memulakan projek Angular yang baru.

Apakah CLI Angular?

CLI sudut adalah alat rasmi untuk memulakan dan bekerja dengan projek Sudut. Ia menyelamatkan anda dari kerumitan konfigurasi yang kompleks dan membina alat seperti TypeScript, Webpack, dan sebagainya.

Selepas memasang Angular CLI, anda perlu menjalankan satu perintah untuk menghasilkan projek dan yang lain untuk melayaninya menggunakan pelayan pembangunan tempatan untuk bermain dengan aplikasi anda.

Seperti kebanyakan alat frontend terkini 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 sisi pelayan. Walau bagaimanapun, Angular adalah teknologi front end, jadi walaupun anda perlu memasang Node.js pada mesin pembangunan anda, ia hanya untuk menjalankan CLI.

Sebaik sahaja anda membina aplikasi anda untuk pengeluaran anda tidak akan memerlukan Node.js kerana bundle akhir hanya HTML statik, CSS, dan JavaScript yang boleh disampaikan oleh mana-mana pelayan atau CDN.

Bahawa dikatakan, jika anda sedang membina aplikasi web penuh dengan Angular, anda mungkin perlu Node.js untuk membuat bahagian akhir belakang jika anda ingin menggunakan JavaScript untuk hujung depan dan hujung belakang.

Semak susunan MEAN - ia merupakan seni bina yang merangkumi MongoDB, Express (pelayan web dan REST API rangka kerja yang dibina di atas Node.js) dan Angular. Anda boleh membaca artikel ini jika anda ingin tutorial langkah demi langkah untuk bermula.

Dalam kes ini, Node.js digunakan untuk membina bahagian akhir belakang apl anda dan boleh digantikan dengan mana-mana teknologi sisi pelayan yang anda mahu seperti PHP, Ruby, atau Python. Tetapi sudut tidak bergantung kepada Node.js kecuali alat CLI dan untuk memasang pakej dari npm.

NPM bermaksud Pengurus Pakej Node. Ia merupakan pendaftaran untuk pakej pakej Node. Dalam beberapa tahun kebelakangan ini juga digunakan untuk menerbitkan pakej akhir dan perpustakaan seperti Angular, React, Vue.js dan juga Bootstrap.

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

Memasang CLI Sudut

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

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

Biarkan ia mudah dan gunakan laman web rasmi. Cuma lawati laman muat turun dan ambil binari untuk Windows, kemudian ikuti panduan penyediaan.

Anda boleh memastikan Node dipasang pada sistem anda dengan menjalankan perintah berikut dalam arahan arahan yang seharusnya memaparkan versi Node yang dipasang:

$ nod -v

Seterusnya, jalankan arahan berikut untuk memasang Angular CLI:

$ npm memasang @ angular / cli

Pada masa penulisan ini, Angular 8.3 akan dipasang.

Jika anda ingin memasang Angular 9, tambahkan tag seterusnya seperti berikut:

$ npm memasang @ angular / cli @ seterusnya

Selepas perintah selesai berjaya, anda perlu memasang CLI Sudut.

Panduan Cepat untuk CLI Sudut

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

$ ng versi

Perintah kedua yang mungkin perlu anda jalankan ialah arahan bantuan untuk mendapatkan bantuan penggunaan lengkap:

$ a help

CLI menyediakan arahan berikut:

tambah: Menambah sokongan untuk perpustakaan luaran untuk projek anda.

membina (b): Kompilasi aplikasi Angular ke dalam direktori keluaran yang dinamakan dist / pada jalan output yang diberikan. Mesti dilaksanakan dari dalam direktori ruang kerja.

config: Mendapatkan semula atau tetapkan nilai konfigurasi sudut.

doc (d): Buka dokumentasi Angular rasmi (angular.io) dalam pelayar, dan cari kata kunci yang diberikan.

e2e (e): Membina dan menghidangkan aplikasi Sudut, kemudian menjalankan ujian hujung ke hujung menggunakan Protractor.

menjana (g): Menjana dan / atau mengubah suai fail berdasarkan skematik.

tolong: Senarai arahan yang ada dan huraian singkat mereka.

lint (l): Menjalankan alat linting pada kod aplikasi sudut dalam folder projek yang diberikan.

baru (n): Mencipta ruang kerja baru dan aplikasi Sudut awal.

jalankan: Menjalankan sasaran tersuai yang ditakrifkan dalam projek anda.

berkhidmat: Membangun dan menghidang aplikasi anda, membina semula pada perubahan fail.

ujian (t): Menjalankan ujian unit dalam projek.

kemas kini: Kemas kini aplikasi anda dan kebergantungannya. Lihat https://update.angular.io/

versi (v): Keluaran Angka CLI sudut.

xi18n: Ekstrak mesej i18n dari kod sumber.

Menjana Projek

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

$ a frontend baru

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

Seperti yang dinyatakan sebelum ini, CLI akan bertanya kepada anda. Adakah anda ingin menambah routing sudut? dan anda boleh menjawab dengan memasukkan y (Ya) atau n (Tidak), yang merupakan pilihan lalai. Ia juga akan bertanya kepada anda tentang format lembaran gaya yang anda mahu gunakan (seperti CSS). Pilih pilihan anda dan tekan Enter untuk meneruskan.

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

  • / e2e /: mengandungi ujian tamat laman web (end-to-end)
  • / node_modules /: Semua perpustakaan pihak ke-3 dipasang ke folder ini menggunakan pemasangan npm
  • / src /: mengandungi kod sumber aplikasi. Kebanyakan kerja akan dilakukan di sini
  • / aplikasi /: mengandungi modul dan komponen
  • / aset /: mengandungi aset statik seperti imej, ikon dan gaya
  • / persekitaran /: mengandungi persekitaran (pengeluaran dan pembangunan) fail konfigurasi tertentu
  • 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 bootstrapped
  • polyfills.ts: polyfills yang diperlukan oleh sudut
  • styles.css: fail stylesheet global untuk projek ini
  • 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 dependensi)
  • README.md: fail markdown yang mengandungi deskripsi projek
  • tsconfig.json: fail konfigurasi untuk TypeScript
  • tslint.json: fail konfigurasi untuk TSlint (alat analisis statik)

Melayan Projek anda

CLI sudut menyediakan rantaian alat lengkap untuk membangunkan aplikasi front-end pada mesin tempatan anda. Oleh itu, anda tidak perlu memasang pelayan tempatan untuk menyampaikan projek anda - anda boleh menggunakan arahan ng melayani dari terminal anda untuk melayani projek anda secara tempatan.

Pertama, arahkan ke dalam folder projek anda dan jalankan arahan berikut:

$ cd frontend $ ng melayani

Anda kini boleh menavigasi ke http: // localhost: 4200 / alamat untuk mula bermain dengan aplikasi akhir hadapan anda. Halaman ini secara automatik akan hidup semula jika anda menukar sebarang fail sumber.

Menjana Artifak Angular

Angular CLI menyediakan suatu perintah menjana yang membantu pemaju menjana artifak Sudut asas seperti modul, komponen, arahan, paip dan perkhidmatan:

$ ng menjana komponen komponen saya

komponen saya adalah nama komponen. CLI Angular secara automatik akan menambah rujukan kepada komponen, arahan dan paip dalam fail src / app.module.ts.

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

$ ng g komponen saya-modul / komponen saya

modul saya ialah nama modul yang ada.

Kesimpulannya

Dalam siaran ini, kami telah melihat cara memasang CLI Angular pada mesin pembangunan kami dan kami menggunakannya untuk memulakan projek Angular baharu dari awal.

Kami juga telah melihat pelbagai perintah yang boleh anda gunakan sepanjang pembangunan projek anda untuk menghasilkan artifak Sudut seperti modul, komponen, dan perkhidmatan.

Anda boleh menjangkau atau mengikuti penulis melalui laman web peribadi, Twitter, LinkedIn dan Github.