Mulakan dengan Angular: Tutorial InfoWorld

Angular, penerus AngularJS, adalah platform pengembangan untuk membangun aplikasi mudah alih dan desktop menggunakan TypeScript dan / atau JavaScript dan bahasa lain. Angular popular untuk membina laman web dengan volume tinggi dan menyokong web, web mudah alih, mudah alih asli, dan aplikasi desktop asli.

Pasukan pengembangan teras sudut berpecah antara pekerja Google dan komuniti yang mantap; ia tidak akan hilang dalam masa terdekat. Selain kemampuannya yang luas, platform Angular mempunyai ekosistem luaran yang kuat: Beberapa IDE yang menonjol menyokong Angular, ia mempunyai empat perpustakaan data, terdapat setengah lusin alat berguna dan lebih dari selusin set komponen UI, dan terdapat puluhan Buku dan kursus sudut. Pada tahun 2015, ketika dianugerahkan AngularJS an Bossie Award, saya menjelaskan bahawa itu adalah kerangka kerja AJAX JavaScript-view-apa pun (MVW) yang memperluas HTML dengan markup untuk paparan dinamik dan pengikatan data dua hala. Angular sangat baik untuk mengembangkan aplikasi web satu halaman dan menghubungkan borang HTML ke model dan pengendali JavaScript. Angular baru ditulis dalam TypeScript dan bukannya JavaScript, yang mempunyai banyak faedah, seperti yang akan saya jelaskan.

Corak "model-pandangan-apa pun" yang terdengar pelik adalah percubaan untuk memasukkan pola model-pandangan-pengawal (MVC), model-pandangan-pandangan-model (MVVM), dan model-pandangan-penyampai (MVP) di bawah satu moniker. Perbezaan antara ketiga-tiga corak yang berkait rapat adalah pelbagai perkara yang suka dibahaskan oleh pengaturcara; pemaju Angular memutuskan untuk tidak ikut perbincangan.

Pada asasnya, Angular menyegerakkan data dari UI anda secara automatik (paparan dalam AngularJS dan templat di Angular 2 ke atas) dengan objek JavaScript (model) anda melalui pengikatan data dua hala. Untuk membantu anda menyusun aplikasi anda dengan lebih baik dan menjadikannya senang diuji, Angular mengajar penyemak imbas bagaimana melakukan suntikan kebergantungan dan pembalikan kawalan. Angular baru (versi 2 dan ke atas) menggantikan pandangan dan pengawal dengan komponen dan menggunakan konvensyen standard, yang menjadikannya lebih mudah difahami, dan membolehkan pembangun menumpukan perhatian untuk membangunkan modul dan kelas ECMAScript 6. Dengan kata lain, Angular 2 adalah penulisan semula AngularJS yang cuba menerapkan idea yang sama dengan cara yang lebih baik. Templat pandangan sudut, yang memiliki sintaks yang cukup sederhana, disusun ke dalam JavaScript yang dioptimumkan dengan baik untuk mesin JavaScript moden.Penghala komponen baru di Angular 2 dapat melakukan pemisahan kod (pemuatan malas) untuk mengurangkan jumlah kod yang dihantar untuk memberikan pandangan.

muat turun Bermula dengan Angular Muat turun tutorial Angular ini dalam format PDF yang mudah

Mengapa bersudut? Dan bilakah itu bukan pilihan yang baik?

Memilih kerangka kerja JavaScript untuk aplikasi web adalah proses yang melancarkan perang agama di kalangan pemaju. Saya bukan di sini untuk mengisytiharkan Angular, tetapi saya mahu anda mengetahui kelebihan dan kekurangannya. Sebaik-baiknya, anda harus memilih kerangka yang sesuai untuk aplikasi anda, dengan mempertimbangkan kemahiran dalam organisasi anda dan kerangka kerja yang anda gunakan dalam aplikasi lain. Secara umum Angular mempunyai perkakas yang baik dan sesuai untuk projek yang mempunyai trafik yang sangat besar. Angular, sebagai penulisan semula lengkap dari AngularJS, dirancang dari bawah untuk digunakan pada peranti mudah alih dan untuk prestasi tinggi. Seperti pendahulunya, ia mengikat data dengan mudah dan baik.

Angular menggunakan corak komponen web, tetapi bukan Komponen Web. Bukan Polimer, yang mencipta Komponen Web sebenar, walaupun anda boleh menggunakan Komponen Web Polimer dalam aplikasi Sudut jika anda mahu. Angular menggunakan corak inversi kawalan (IoC) dan suntikan ketergantungan (DI), dan memperbaiki beberapa masalah dengan pelaksanaan AngularJS ini.

Sudut menggunakan arahan dan komponen yang menggabungkan logik dengan markup HTML. Satu aliran pemikiran mengatakan bahawa mencampuradukkan logik dengan persembahan adalah dosa besar. Mazhab pemikiran lain mengatakan bahawa mempunyai semua program yang dinyatakan di satu tempat menjadikannya lebih mudah untuk dikembangkan dan difahami. Itulah masalah yang harus anda putuskan sendiri, kerana saya mempunyai pelbagai soalan untuk mendapatkan projek yang berbeza.

Angular mempunyai beberapa masalah dokumentasi, masalah keserasian kebelakang yang kerap, dan banyak konsep untuk dipelajari oleh pembangun baru. Sebaliknya, Angular mempunyai ekosistem besar yang mengisi jurang dalam dokumentasi Angular dengan tutorial, video, dan buku web pihak ketiga.

Mengenai TypeScript

Angular diimplementasikan dalam TypeScript, superset JavaScript bertipe bebek yang bergerak ke JavaScript. Secara umum, aplikasi TypeScript lebih mudah dijaga pada skala produksi daripada JavaScript. Proses mudah untuk menentukan sama ada jenis anda betul pada waktu penyusunan menghilangkan banyak kesalahan ralat JavaScript, dan mengetahui jenisnya membolehkan penyunting, alat, dan IDE lebih bermanfaat dengan penyelesaian kod, penyesuaian semula, dan pemeriksaan kod.

Saya kebetulan menjadi peminat TypeScript. Saya merasa jauh lebih produktif untuk mengerjakan projek TypeScript yang besar daripada bekerja pada projek JavaScript yang besar. Dengan JavaScript, saya tidak pernah tahu sama ada bug mengintai kod yang menunggu untuk menggigit saya, tidak kira seberapa kerap saya menjalankan JSHint. Dengan TypeScript, sekurang-kurangnya apabila saya menambahkan jenis, kelas, modul, dan antara muka pilihan, saya merasa lebih selamat.

Mulakan: Pasang Kod Angular, TypeScript, dan Visual Studio

Dengan itu, mari kita pasang perisian dan mulakan.

Pasang Node.js dan NPM

Sebelum anda melakukan perkara lain, anda perlu memasang Node.js dan NPM, pengurus pakej Node, kerana mereka mendasari banyak pemasangan dan perkakas Angular. Untuk mengetahui sama ada ia dipasang, dan jika demikian, versi mana yang dipasang, pergi ke konsol atau prompt terminal dan ketik dua arahan berikut:

$ simpul -v $ npm -v

Pada komputer saya, versi Node.js yang dilaporkan adalah v6.9.5 dan versi NPM adalah 3.10.10. Itulah versi sokongan jangka panjang ketika ini, seperti yang saya tahu dari melihat //nodejs.org/. Sekiranya versi anda terkini, anda boleh melangkau ke bahagian seterusnya. Sekiranya arahan tidak dijumpai atau versi kedaluwarsa, anda harus memasang versi semasa. Versi saya terkini kerana saya baru memasang semula Node, seperti yang ditunjukkan dalam tangkapan skrin di bawah. Memasang Node.js dan NPM adalah masalah melayari ke nodejs.org, menekan butang LTS hijau, dan mengikuti arahan.

Setelah menyelesaikan pemasangan, periksa semula versi untuk memastikan versi tersebut benar-benar dikemas kini. Saya tahu pengulangan cek terdengar paranoid, tetapi pengaturcara yang baik memerlukan dos paranoia yang sihat untuk mengelakkan pepijat, dan pemasangan yang digugurkan tidak jarang berlaku.

1. Pasang Sudut

Terdapat dua cara untuk memasang dan menggunakan Angular. Saya akan menunjukkan kepada anda kaedah antara muka baris perintah (CLI) terlebih dahulu, kerana beberapa sebab. Yang pertama adalah bahawa ia lebih sesuai dengan cara saya suka bekerja. Yang kedua ialah CLI menghasilkan aplikasi starter yang lebih lengkap daripada seed QuickStart. Yang ketiga adalah bahawa langkah pembersihan dalam arahan benih QuickStart sepertinya mungkin menimbulkan malapetaka jika digunakan pada waktu yang salah atau di direktori yang salah.

Semak imbas ke //angular.io/ dan klik salah satu daripada tiga butang Bermula. Mereka semua pergi ke tempat yang sama, QuickStart Angular.

Sila baca halaman tersebut dan jangan ragu untuk mencuba contoh QuickStart di Plunker melalui pautan selepas blok kod pertama. Setelah anda fikir anda boleh mengikuti @Componentfungsi penghias dan ungkapan pengikatan interpolasi Angular {{name}}, klik pada pautan CLI QuickStart di sebelah kiri. Jangan terlalu risau bagaimana fungsi penghias dan pengikatan interpolasi dilaksanakan: Kita akan sampai ke sana.

1a. Pasang dan uji Angular-CL

Kami akan mengikuti arahan untuk mengatur persekitaran pembangunan CLI. Langkah pertama ialah memasang Angular dan CLInya secara global dengan npm:

$ npm pasang -g @ angular / cli

Sekiranya anda memerhatikan dengan teliti semasa pemasangan berjalan, anda akan melihat banyak prasyarat dan alat yang dipasang sebelum Angular dan CLInya. Sekiranya ada amaran, jangan risau. Sekiranya terdapat kesilapan, anda mungkin perlu memperbaikinya; Saya hanya melihat amaran. Selamat memasang semula CLI Angular bila-bila masa yang anda mahukan.

Langkah seterusnya adalah membuat projek baru dengan Angular CLI. Saya meletakkan saya di dalam direktori yang disebut Work di bawah folder pengguna rumah saya.

$ cd berfungsi $ ng aplikasi baru saya

Seperti nota arahan, menghasilkan aplikasi Angular baru memerlukan beberapa minit. Ini adalah masa yang tepat untuk membuat secawan teh atau kopi.

Anda akan melihat dalam tangkapan skrin bahawa saya memeriksa versi TypeScript saya ( tsc -v) selepas pemasangan CLI Angular. Ya, sedikit paranoid. Dan ya, ini adalah idea yang baik untuk anda lakukan juga. Sekiranya anda belum memasang TypeScript, mari selesaikan sekarang:

$ npm pasang –g naskhah

Kami hampir sampai. Seterusnya, masuk ke direktori baru dan layan aplikasi.

$ cd my-app $ ng melayani

Seperti yang diberitahu oleh pelayan, ia sedang mendengar di port 4200. Oleh itu, buka tab penyemak imbas ke // localhost: 4200 dan anda akan melihat gambar di sebelah kiri.

Baki halaman CLI QuickStart memerintahkan anda untuk menukar hak milik dan CSSnya. Jangan ragu untuk melakukannya dengan apa sahaja penyunting pengaturcaraan ( bukan pemproses kata!) Yang anda telah pasang, atau tunggu sehingga anda memasang Kod Visual Studio kemudian. Tetingkap penyemak imbas akan dikemas kini secara automatik setiap kali anda menyimpan, kerana pelayan melihat kod dan kemas kini mengenai perubahan.

Apabila anda selesai menggunakan pelayan, tekan Control-C di tetingkap terminal untuk mematikan prosesnya.

1b. Pasang benih QuickStart Angular

Hanya melakukan langkah ini jika anda mempunyai 1a Langkah dilangkau. Sekiranya anda melakukan kedua-dua langkah tersebut, pemasangan ini akan menjadi sebahagian daripada pemasangan CLI, dan anda perlu mengulanginya jika anda mahu menggunakannya lagi. Petunjuk untuk memasang benih QuickStart menawarkan dua pilihan untuk memulakan proses: memuat turun benih dan membuka zipnya, atau mengklon benih, sebagai berikut:

$ git clone //github.com/angular/quickstart.git memulakan

Apa sahaja pilihan yang anda pilih untuk mendapatkan kod, langkah seterusnya adalah sama:

$ cd memulakan

(atau apa sahaja yang anda namakan foldernya)

pemasangan $ npm

permulaan $ npm

The npm installlangkah tidak dasarnya perkara yang sama seperti $ npm install -g @angular/clilangkah dalam versi CLI pemasangan, kecuali bahawa ia memasang naskah yg dicetak dan ia tidak memasang sudut CLI, kerana itu tiada dalam senarai kebergantungan dalam package.json. Sebenarnya jika CLI Angular sudah dipasang, skrip ini akan menyahpasangnya .

The npm startlangkah menjalankan skrip ini:

"start": "serentak \" npm run build: watch \ "\" npm run serve \ ""

Untuk memperluasnya, skrip build: tonton dan tayangkan adalah:

"build: watch": "tsc -p src / -w"

dan

"serve": "lite-server -c = bs-config.json"

Adakah saya telah menyebut bahawa tscpenyusun TypeScript? The -ppilihan menetapkan direktori projek untuk menyusun, dan -wpilihan kata untuk menonton fail input.

The npm startlangkah (menjalankan dua skrip serentak) akan dilakukan pada dasarnya perkara yang sama sebagai ng servelangkah dalam versi CLI pemasangan, kecuali bahawa ia adalah mungkin pilih port yang berbeza, ditambah ia secara automatik akan memuatkan halaman ia berkhidmat dalam lalai anda penyemak imbas, dan halaman akan kelihatan seperti gambar di sebelah kiri.

Setelah selesai bermain dengan aplikasi QuickStart Angular anda, tekan Ctrl + C atau tutup tetingkap terminal untuk mematikan prosesnya. Anda boleh memulakannya semula dengan kembali ke direktori dan berjalan ng serve.

Langkah seterusnya (pilihan) dalam arahan QuikStart adalah langkah yang membuat saya gugup: Ia memberitahu anda untuk menghapus fail yang tidak penting menggunakan rm -rfMacOS atau delWindows. Sekiranya anda memutuskan untuk melakukannya, sekurang-kurangnya periksa semula bahawa anda berada di direktori yang betul sebelum melepaskan skrip yang anda salin dari laman dokumentasi. Jangan mencubanya setelah anda mula menambahkan fail ke projek.

Tidak kira sama ada anda mengikuti arahan benih CLI atau QuickStart, langkah seterusnya adalah meneroka kod sumber projek Angular. Untuk itu, mari kita pasang penyunting yang peka dengan sudut.

2. Pasang Kod Visual Studio

Halaman sumber Angular mengesyorkan tiga IDE: IntelliJ IDEA, Visual Studio Code, dan WebStorm. Saya menggunakan ketiga-tiganya, tetapi untuk tujuan latihan ini Visual Studio Code adalah pilihan terbaik kerana percuma dan sumber terbuka. Semak imbas ke halaman utama Visual Studio Code dan muat turun versi stabil semasa untuk platform anda, kemudian pasang pakej.

Setelah Kod Visual Studio dipasang, jalankan dan buka direktori yang menyimpan projek asas anda. Pada Mac saya, projek yang dihasilkan CLI sudah siap ~/work/my-appdan benihnya sudah siap ~/work/quickstartmaster. Lokasi anda akan berbeza-beza bergantung pada sama ada anda melakukan pemasangan CLI atau pemasangan benih, dan pilihan yang anda buat mengenai direktori sasaran mereka. Pokok sumber harus kelihatan seperti ini:

Visual Studio Code menyokong TypeScript di luar kotak, jadi tidak ada yang lain untuk dipasang. Sekiranya anda ingin memasang bahasa lain kemudian, mudah untuk melakukannya di panel Sambungan, ditunjukkan dengan mudah dengan mengklik ikon bawah di kiri atas. Taipkan nama bahasa atau alat yang anda mahukan ke dalam kotak carian di bahagian atas panel Sambungan. Anda boleh kembali ke Penjelajah Fail dengan mengklik ikon atas di kiri atas.