Membuat Komponen dalam Angular 2 dengan TypeScript dan ES5

mata teras

Angular 2.0 menggunakan TypeScript (superset JavaScript) untuk mengoptimumkan prestasi, meningkatkan kelajuan halaman dan automasi aliran kerja. TypeScript membolehkan pemaju menggunakan maklumat jenis untuk mencatatkan kod JavaScript, dengan itu membantu menangkap kesilapan dalam asas kod.
Angular 2.0 memperkenalkan konsep komponen, yang merupakan blok kod yang boleh diguna semula yang mengandungi pandangan dan logik. Komponen menggantikan arahan sebagai elemen utama rangka kerja, memastikan bahawa satu bahagian kod aplikasi tidak mengganggu bahagian lain kod.
Membuat komponen dalam sudut 2.0 menggunakan TypeScript melibatkan penentuan kelas komponen dan mengimport fungsi yang diperlukan dari sudut. Kemudian, menghiasi kelas dengan penghias @komponen dan mengeksportnya untuk digunakan di bahagian lain aplikasi.
Angular 2.0 juga menyokong ES5, yang merupakan versi JavaScript standard yang berjalan di kebanyakan pelayar. Untuk membuat komponen menggunakan ES5 dalam sudut 2.0, pemaju boleh menggunakan kaedah pada objek NG untuk menentukan komponen dan menambah fungsi. Kemudian anda boleh menjalankan kod secara langsung dalam penyemak imbas tanpa memerlukan pelayan.

Artikel ini dikaji semula oleh Stephan Max, Jeff Smith dan Ravi Kiran. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Sebagai pendekatan akhir tahun, pasukan sudut lebih dekat dari sebelumnya untuk melepaskan versi Stabil Angular 2.0. Ini akan membentuk semula cara aplikasi sudut dibangunkan, tetapi akan mempunyai hasil yang lebih baik. Dalam artikel ini, saya akan menunjukkan kepada anda beberapa konsep teras dalam sudut 2.0 dan cara menggunakannya. Khususnya, saya akan memandu anda melalui proses membina komponen Angular 2 dari awal hingga akhir. Pertama, kita akan mempelajari lebih lanjut mengenai cara melakukan ini dengan TypeScript, dan kemudian kita akan memindahkan komponen sudut supaya ia dapat dijalankan dengan ES5 tulen.

Kod untuk tutorial ini boleh didapati di pangkalan kod GitHub kami. Pangkalan kod mempunyai dua cawangan, satu untuk versi Typescript dan satu untuk versi ES5. Jika anda ingin mengklonkan cawangan tertentu, gunakan

. git clone <url> --branch <branch></branch></url>

Apakah komponen?

Penggunaan komponen dalam JavaScript telah meningkat dengan ketara sejak beberapa bulan yang lalu. Mereka digunakan dalam projek -projek seperti React, Knockout, Ember, dan banyak lagi, jadi tidak hairanlah bahawa Angular mengintegrasikannya ke dalam versi 2.0. Modulariti kod sentiasa menjadi tumpuan pasukan sudut, dan penggunaan komponen menyoroti ini kerana mereka membolehkan kami memecahkan kod ke dalam blok yang terkandung.

Jadi apa itu komponen? Ia pada dasarnya adalah sekeping kod yang boleh digunakan semula sepanjang aplikasi. Ia mengandungi dua bahagian: Lihat dan Logik. Dengan memanfaatkan perhatian pasukan pembangunan sudut kepada komponen, kita boleh mengambil kesempatan daripada beberapa ciri yang sangat kuat. Angular 2 menjadikannya sangat mudah untuk membuat aplikasi dinamik yang terdiri daripada komponen yang berbeza yang telah menggantikan arahan sebagai teras rangka kerja. Dalam Angular 2, arahan adalah komponen ringan yang hanya digunakan untuk menambah beberapa fungsi ke DOM. Sekarang, pemaju sudut tidak perlu bimbang tentang mengacaukan permohonan mereka kerana isu -isu konflik yang berkaitan dengan mengasingkan $ skop. Sebaliknya, menggunakan komponen adalah cara untuk memastikan bahawa satu bahagian kod aplikasi tidak mengganggu bahagian lain kod.

typescript

Angular 2.0 telah dibuat untuk menggunakan TypeScript, yang merupakan superset JavaScript. Pemaju sudut telah menghabiskan banyak masa menyelesaikan pelepasan ini. Mereka bekerja keras untuk mengoptimumkan prestasi, termasuk kelajuan halaman dan automasi aliran kerja. TypeScript adalah serupa dengan transcoder lain, yang membolehkan pemaju menulis kod yang mudah ditukar kepada JavaScript yang sah. Bahawa dikatakan, ia telah menjadi lebih popular sepanjang tahun lalu, jadi pasukan sudut memutuskan untuk menggunakannya untuk membuat rangka kerja.

Salah satu manfaat menggunakan TypeScript ialah sistem jenisnya, yang membolehkan pemaju mengulas JavaScript menggunakan maklumat jenis. Kod anotasi ini akan berjalan melalui pengkompil, yang membantu menangkap kesilapan yang sebaliknya bersembunyi di pangkalan kod yang menunggu penemuan pengguna. Sekarang mari kita lihat aplikasi praktikal TypeScript.

Di bawah, saya mengekstrak contoh dari artikel TJ Van Toll "The Rise of Typescript". Dalam fungsi ini, kita melihat bahawa parameter ketinggian dan lebar mestilah jenis angka. : number sebelum badan fungsi menentukan jenis pulangan, yang juga jenis angka. Oleh itu, mana-mana kandungan bukan angka yang diserahkan kepada fungsi ini akan menyebabkan pengkompil membuang kesilapan pada masa penyusunan.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Pengisytiharan taip membantu kami mendokumenkan API dan menjadikan kod kami lebih mudah untuk dikekalkan dari masa ke masa.

Pemasangan

Proses menyusun jenis ke dalam JavaScript sangat mudah. Mula -mula dapatkan pakej TypeScript dari NPM:

npm install -g typescript

Setelah pemasangan selesai, menyusun jenis ke dalam JavaScript adalah semudah menjalankan arahan berikut dari baris arahan (fail typescript disimpan dengan lanjutan .ts):

tsc <filename.ts>

Sekarang, mari kita lihat bagaimana Angular 2 dapat memanfaatkan kuasa TypeScript untuk membuat komponen tersuai dengan mudah. Kod untuk contoh pertama kami boleh didapati di cawangan TypeScript asas kod GitHub kami.

Buat komponen dalam TypeScript

Kerana TypeScript adalah superset JavaScript, mana -mana JavaScript yang sah boleh berfungsi dengan betul dalam fail .ts. Dengan menggunakan TypeScript, pemaju boleh melanjutkan kod JavaScript mereka untuk memanfaatkan ciri ES6 terkini. Dalam contoh ini, kami akan menggunakan kelas.

Di bawah, saya membuat komponen menggunakan kod TypeScript. Saya mula -mula mengimport sudut menggunakan sintaks import ES6. Dalam contoh ini, kami akan menentukan komponen dan pandangan komponen itu. Setelah selesai, kita akan memerlukan fungsi Bootstrap Angular untuk membuat sudut menjalankan kod. Dalam kod ini kita akan melihat simbol @, yang digunakan untuk memberitahu Angular apa yang kita cuba bina.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Kerana Angular 2 dibina di atas TypeScript, rangka kerja ini mengiktiraf anotasi @komponen kami dan mengetahui bahawa kami cuba membuat komponen baru. Di samping itu, ia memberitahu Angular bahawa apabila ia melihat <user-name></user-name> dalam HTML kami, kami ingin memberi instantiasi komponen.

Seperti yang disebutkan di atas, komponen mengandungi dua bahagian:

• Lihat
• Logistik

Oleh kerana komponen ditakrifkan, kita kini perlu membuat pandangan dan logik.

Selepas komponen kami, kami boleh menambah beberapa kod TypeScript untuk menentukan pandangan kami. Mari kita lihat kesinambungan kod di atas dan lihat sendiri betapa mudahnya Angular membuat pandangan menambahkan kepada komponen tersuai:

npm install -g typescript

Sekarang, apabila saya menambah <user-name></user-name> ke fail index.html saya, templat ini disuntik ke dalam DOM. Bahawa dikatakan, bahagian logik komponen kami kosong kerana kelas UserComponent kami tidak mengandungi sebarang kod.

Dalam contoh di atas, saya hanya mempunyai satu kelas kosong. Tetapi sekarang, saya akan membuat pemboleh ubah nama dan kemudian menjadikan pemboleh ubah nama ini dalam pandangan kami menggunakan ungkapan:

tsc <filename.ts>

anda juga akan melihat fungsi bootstrap yang saya sebutkan tadi. Walaupun mereka berkongsi nama, fungsi ini digunakan untuk memulakan atau boot aplikasi sudut kami dan tidak berkaitan dengan kerangka Bootstrap Twitter. Jika kita lupa untuk lulus komponen kita ke dalam fungsi ini, Angular tidak akan tahu untuk memuatkan komponen kita.

Saya juga ingin perhatikan dengan cepat bahawa aplikasi kami mesti menggunakan beberapa jenis pelayan untuk dipaparkan dengan betul. Jika anda mengaksesnya secara langsung, System.js tidak akan dapat memuatkan modul utama kami, yang mengandungi kod kami.

Sekarang, pengguna menggunakan repositori contoh ini boleh dijalankan

dalam direktori root. Selepas menjalankan arahan ini, kita dapat melihat kesan sebenar komponen kami dengan melawat node app.js https://www.php.cn/link/f74d6ef882234fd34400a296b1da6149 . Mudah -mudahan ini menggambarkan betapa mudahnya sudut menjadikan logik menambah komponen!

memindahkan komponen kami ke ES5

Bagi mereka yang ingin menggunakan ES5 untuk memanfaatkan kuasa 2.0, pasukan Angular 2 telah mencipta versi rangka kerja yang boleh dimasukkan ke dalam laman web. Ini perlu kerana ES5 tidak mempunyai sistem modul, jadi kita memerlukan beberapa jenis bundle yang dilaksanakan sendiri. Jika anda melihat kod untuk contoh pertama, anda akan melihat bahawa saya perlu menambah tiga tag skrip yang berbeza kepada aplikasi. Dalam contoh ini, kita hanya perlu menambah skrip berikut.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Dengan skrip ini, pemaju boleh menggunakan pengetahuan mereka tentang ES5 tanpa bimbang tentang mengorbankan keupayaan rangka kerja. Mari lihat bagaimana membina komponen sudut menggunakan ES5. Kod untuk contoh ini boleh didapati di cawangan ES5 asas kod GitHub kami. Iaitu, mari kita mulakan!

Untuk mencipta komponen menggunakan ES5 dan bukannya TypeScript, saya akan menggunakan beberapa pendekatan yang berbeza. Ini pada dasarnya sama seperti apa yang saya lakukan dalam contoh di atas, tetapi kami akan menggunakan pautan kaedah pada objek NG dan bukannya menggunakan simbol @. Ini ditunjukkan dalam kod berikut:

npm install -g typescript

Sekarang kita boleh terus menambah ciri -ciri kepada komponen kami yang akan dipaparkan apabila aplikasi kami membaca pemilih <user-name></user-name>.

mari kita gunakan kaedah paparan dan kelas. Dalam kaedah pandangan kami, kami hanya perlu lulus dalam rentetan templat yang kami gunakan sebelum ini. Oleh kerana kelas tidak disokong dalam ES5, kami akan mensimulasikan penggunaan kami dalam kaedah kelas dengan membuat pembina mudah yang akan mengandungi atribut nama kami.

tsc <filename.ts>

tetapi kita kehilangan sesuatu. Dalam contoh TypeScript kami, kami menggunakan fungsi bootstrap untuk memulakan kod sudut kami. Inilah cara melakukan perkara yang sama dalam ES5:

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

Ini harus diletakkan di bawah kod aplikasi tersuai kami. Ini akan menyebabkan sudut boot aplikasi kami dan memuatkan komponen selepas beban halaman. Tidak seperti contoh terdahulu kami (memerlukan pelayan), halaman ini boleh dilihat secara langsung dalam penyemak imbas.

Seperti yang anda lihat, pasukan sudut menyediakan penyelesaian yang jelas untuk pengguna yang ingin membina 2.0 aplikasi dengan ES5. Jika anda berminat dengan ini, saya sangat mengesyorkan bahawa anda menyemak Perpustakaan A.JS, yang membolehkan pemaju membina aplikasi sudut dalam ES5 menggunakan sintaks seperti Typescript.

Kesimpulan

Harap ini memberi anda pandangan yang mendalam pada pelbagai aspek sudut yang akan muncul dalam versi seterusnya rangka kerja. Sekiranya anda ingin membina aplikasi lengkap dengan Angular 2 dan Typescript (dalam hal ini papan mesej), maka saya cadangkan anda menyemak artikel ini: Bermula dengan Angular 2 dengan TypeScript.

Saya juga ingin mengetahui pengalaman anda dengan Angular 2. Adakah anda telah mencubanya? Adakah anda telah membina sesuatu yang ingin anda kongsi? Tolong beritahu saya dalam komen.

Soalan Lazim untuk membuat komponen dalam sudut 2 menggunakan TypeScript dan ES5

Bagaimana untuk membuat komponen dalam sudut 2 menggunakan TypeScript?

Membuat komponen dalam sudut 2 menggunakan TypeScript melibatkan beberapa langkah. Pertama, anda perlu mengimport simbol komponen dari perpustakaan teras sudut. Anda kemudian menentukan kelas komponen dan menghiasnya dengan penghias @komponen. Penghias memberitahu Angular bahawa kelas adalah komponen dan menyediakan metadata seperti pemilih dan templat. Akhirnya, anda mengeksport kelas komponen supaya anda boleh menggunakannya di bahagian lain aplikasi. Berikut adalah contoh asas:

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Apakah perbezaan antara TypeScript dan ES5 dalam Angular 2?

TypeScript dan ES5 adalah kedua -dua bahasa yang anda boleh gunakan untuk menulis aplikasi Angular 2, tetapi mereka mempunyai beberapa perbezaan utama. TypeScript adalah superset statik JavaScript yang menambah jenis dan ciri -ciri lain kepada bahasa. Ia adalah bahasa pilihan untuk Angular 2 kerana ia menjadikan kod itu lebih mantap dan lebih mudah untuk dikekalkan. Sebaliknya, ES5 adalah versi JavaScript standard yang berjalan di kebanyakan pelayar. Aplikasi Angular 2 boleh ditulis menggunakan ES5, tetapi anda akan terlepas beberapa manfaat TypeScript.

(Soalan Lazim yang lain berkaitan dengan sudut dan bertindak balas, dan tidak sepadan dengan topik asal, jadi mereka ditinggalkan.)

Atas ialah kandungan terperinci Membuat Komponen dalam Angular 2 dengan TypeScript dan ES5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!