Mulailah dengan Angular: Tutorial InfoWorld

Angular, penerus AngularJS, adalah platform pengembangan untuk membangun aplikasi seluler dan desktop menggunakan TypeScript dan / atau JavaScript dan bahasa lain. Angular populer untuk membangun situs web bervolume tinggi dan mendukung web, web seluler, seluler asli, dan aplikasi desktop asli.

Tim pengembangan inti Angular terbagi antara karyawan Google dan komunitas yang kuat; itu tidak akan hilang dalam waktu dekat. Selain kemampuannya yang luas, platform Angular memiliki ekosistem eksternal yang kuat: Beberapa IDE terkemuka mendukung Angular, memiliki empat pustaka data, ada setengah lusin alat yang berguna dan lebih dari selusin set komponen UI, dan ada lusinan Buku dan kursus sudut. Pada tahun 2015, ketika dianugerahi AngularJS a Bossie Award, saya menjelaskan bahwa itu adalah kerangka kerja AJAX JavaScript model-view-anything (MVW) yang memperluas HTML dengan markup untuk tampilan dinamis dan pengikatan data dua arah. Angular sangat bagus untuk mengembangkan aplikasi web satu halaman dan menautkan formulir HTML ke model dan pengontrol JavaScript. Angular baru ditulis dalam TypeScript daripada JavaScript, yang memiliki banyak manfaat, seperti yang akan saya jelaskan.

Pola "model-view-anything" yang terdengar aneh adalah upaya untuk menyertakan pola model-view-controller (MVC), model-view-view-model (MVVM), dan model-view-presenter (MVP) di bawah satu pola julukan. Perbedaan antara ketiga pola yang terkait erat ini adalah hal-hal yang suka diperdebatkan oleh programmer dengan sengit; pengembang Angular memutuskan untuk keluar dari diskusi.

Pada dasarnya, Angular secara otomatis menyinkronkan data dari UI Anda (tampilan di AngularJS dan template di Angular 2 dan di atasnya) dengan objek JavaScript Anda (model) melalui pengikatan data dua arah. Untuk membantu Anda menyusun aplikasi Anda lebih baik dan membuatnya mudah untuk diuji, Angular mengajarkan browser cara melakukan injeksi ketergantungan dan inversi kontrol. Angular baru (versi 2 dan lebih tinggi) menggantikan pandangan dan pengontrol dengan komponen dan mengadopsi konvensi standar, yang membuatnya lebih mudah untuk dipahami, dan memungkinkan pengembang untuk berkonsentrasi pada pengembangan modul dan kelas ECMAScript 6. Dengan kata lain, Angular 2 adalah total penulisan ulang AngularJS yang mencoba menerapkan ide yang sama dengan cara yang lebih baik. Template tampilan sudut, yang memiliki sintaks yang cukup sederhana, dikompilasi ke dalam JavaScript yang dioptimalkan dengan baik untuk mesin JavaScript modern.Router komponen baru di Angular 2 dapat melakukan pemisahan kode (pemuatan lambat) untuk mengurangi jumlah kode yang dikirim untuk merender tampilan.

download Memulai Angular Unduh tutorial Angular ini dalam format PDF yang praktis

Mengapa Angular? Dan kapan itu bukan pilihan yang baik?

Memilih kerangka kerja JavaScript untuk aplikasi web adalah jenis proses yang memicu perang agama di antara pengembang. Saya di sini bukan untuk menyebarkan ajaran Angular, tetapi saya ingin Anda mengetahui kelebihan dan kekurangannya. Idealnya, Anda harus memilih kerangka kerja yang sesuai untuk aplikasi Anda, dengan mempertimbangkan keterampilan dalam organisasi Anda dan kerangka kerja yang Anda gunakan di aplikasi lain. Secara umum Angular memiliki perkakas yang baik dan cocok untuk proyek yang sangat besar dengan lalu lintas tinggi. Angular, sebagai penulisan ulang lengkap dari AngularJS, dirancang dari awal untuk digunakan pada perangkat seluler dan untuk kinerja tinggi. Seperti pendahulunya, ia melakukan pengikatan data dengan mudah dan baik.

Angular menggunakan pola komponen web, tetapi bukan Komponen Web itu sendiri. Ini bukan Polimer, yang membuat Komponen Web nyata, meskipun Anda dapat menggunakan Komponen Web Polimer dalam aplikasi Angular jika diinginkan. Angular memang menggunakan pola inversi kontrol (IoC) dan injeksi ketergantungan (DI), dan memperbaiki beberapa masalah dengan implementasi AngularJS ini.

Angular menggunakan arahan dan komponen yang menggabungkan logika dengan markup HTML. Sebuah aliran pemikiran mengatakan bahwa mencampurkan logika dengan presentasi adalah dosa utama. Aliran pemikiran lain mengatakan bahwa menyatakan semua program di satu tempat membuatnya lebih mudah untuk dikembangkan dan dipahami. Itu adalah masalah yang harus Anda putuskan sendiri, karena saya telah menemukan diri saya di sisi yang berbeda dari pertanyaan untuk proyek yang berbeda.

Angular memang memiliki beberapa masalah dokumentasi, masalah kompatibilitas ke belakang yang sering terjadi, dan banyak konsep untuk dipelajari oleh pengembang baru. Di sisi lain, Angular memiliki ekosistem yang sangat besar yang mengisi celah dalam dokumentasi Angular dengan tutorial web, video, dan buku pihak ketiga.

Tentang TypeScript

Angular diimplementasikan dalam TypeScript, superset JavaScript yang diketik bebek yang berpindah ke JavaScript. Secara umum, aplikasi TypeScript lebih mudah dikelola pada skala produksi daripada JavaScript. Proses sederhana untuk menentukan apakah jenis Anda benar pada waktu kompilasi menghilangkan kelas besar kesalahan JavaScript umum, dan mengetahui jenisnya memungkinkan editor, alat, dan IDE untuk lebih membantu dalam penyelesaian kode, pemfaktoran ulang, dan pemeriksaan kode.

Saya kebetulan penggemar berat TypeScript. Saya merasa jauh lebih produktif untuk mengerjakan proyek TypeScript besar daripada mengerjakan proyek JavaScript besar. Dengan JavaScript, saya benar-benar tidak pernah tahu apakah ada bug yang bersembunyi di kode yang menunggu untuk menggigit saya, tidak peduli seberapa sering saya menjalankan JSHint. Dengan TypeScript, setidaknya ketika saya menambahkan tipe opsional, kelas, modul, dan antarmuka, saya merasa jauh lebih aman.

Memulai: Instal Angular, TypeScript, dan Visual Studio Code

Karena itu, mari instal perangkat lunak dan mulai.

Instal Node.js dan NPM

Sebelum Anda melakukan hal lain, Anda perlu menginstal Node.js dan NPM, manajer paket Node, karena keduanya mendasari banyak instalasi dan perkakas Angular. Untuk mengetahui apakah mereka diinstal, dan jika demikian, versi mana yang diinstal, buka prompt konsol atau terminal dan ketik dua perintah berikut:

$ node -v $ npm -v

Di komputer saya, versi Node.js yang dilaporkan adalah v6.9.5 dan versi NPM adalah 3.10.10. Itu adalah versi dukungan jangka panjang saat ini, seperti yang saya tahu dari melihat //nodejs.org/. Jika versi Anda saat ini, Anda dapat langsung ke bagian berikutnya. Jika salah satu perintah tidak ditemukan atau salah satu versi kedaluwarsa, Anda harus menginstal versi saat ini. Versi saya saat ini karena saya baru saja menginstal ulang Node, seperti yang ditunjukkan pada gambar di bawah. Menginstal Node.js dan NPM adalah masalah menjelajah ke nodejs.org, menekan tombol LTS hijau, dan mengikuti instruksinya.

Setelah Anda menyelesaikan penginstalan, periksa kembali versi untuk memastikannya benar-benar diperbarui. Saya tahu mengulangi pemeriksaan terdengar paranoid, tetapi programmer yang baik membutuhkan dosis paranoia yang sehat untuk menghindari bug, dan instalasi yang dibatalkan tidak jarang.

1. Pasang Angular

Ada dua cara untuk menginstal dan menggunakan Angular. Saya akan menunjukkan kepada Anda metode antarmuka baris perintah (CLI) terlebih dahulu, karena beberapa alasan. Yang pertama adalah bahwa ini lebih cocok dengan cara saya bekerja. Yang kedua adalah CLI menghasilkan aplikasi starter yang lebih lengkap daripada seed QuickStart. Yang ketiga adalah bahwa langkah pembersihan dalam instruksi benih QuickStart sepertinya mungkin mendatangkan malapetaka jika digunakan pada waktu yang salah atau di direktori yang salah.

Jelajahi //angular.io/ dan klik salah satu dari tiga tombol Memulai. Semuanya menuju ke tempat yang sama, Angular QuickStart.

Silakan baca halaman itu lagi, dan silakan mencoba contoh QuickStart di Plunker melalui tautan setelah blok kode pertama. Setelah Anda merasa dapat mengikuti @Componentfungsi dekorator dan ekspresi penjilidan interpolasi sudut {{name}}, klik tautan CLI QuickStart di sebelah kiri. Jangan terlalu khawatir tentang bagaimana fungsi dekorator dan pengikatan interpolasi diimplementasikan: Kita akan membahasnya.

1a. Instal dan uji Angular-CL

Kami akan mengikuti petunjuk untuk menyiapkan lingkungan pengembangan CLI. Langkah pertama adalah menginstal Angular dan CLI-nya secara global dengan npm:

$ npm instal -g @ angular / cli

Jika Anda memperhatikan dengan cermat saat penginstalan berlangsung, Anda akan melihat banyak prasyarat dan alat yang diinstal sebelum Angular dan CLI-nya. Jika ada peringatan, jangan khawatir. Jika ada kesalahan, Anda mungkin harus memperbaikinya; Saya sendiri hanya melihat peringatan. Aman untuk menginstal ulang CLI Angular kapan pun Anda mau.

Langkah selanjutnya adalah membuat proyek baru dengan Angular CLI. Saya meletakkan milik saya di dalam direktori bernama Work di bawah folder pengguna rumah saya.

$ cd bekerja $ ng aplikasi-saya baru

Sebagai catatan instruksi, membuat aplikasi Angular baru membutuhkan waktu beberapa menit. Ini saat yang tepat untuk menyeduh secangkir teh atau kopi yang enak.

Anda akan melihat di tangkapan layar bahwa saya memeriksa ulang versi TypeScript saya ( tsc -v) setelah instalasi CLI Angular. Ya, itu sedikit paranoid. Dan ya, ada baiknya Anda melakukannya juga. Jika Anda belum menginstal TypeScript, mari kita urus sekarang:

$ npm install –g skrip ketikan

Kami hampir sampai. Selanjutnya, masuk ke direktori baru dan sajikan aplikasi.

$ cd aplikasi-saya $ ng serve

Karena server akan memberi tahu Anda, itu mendengarkan pada port 4200. Jadi buka tab browser ke // localhost: 4200 dan Anda akan melihat gambar di sebelah kiri.

Keseimbangan halaman CLI QuickStart menginstruksikan Anda untuk mengubah properti judul dan CSS-nya. Jangan ragu untuk melakukannya dengan editor pemrograman apa pun ( bukan pengolah kata!) Yang kebetulan Anda instal, atau tunggu hingga Anda menginstal Visual Studio Code nanti. Jendela browser akan diperbarui secara otomatis setiap kali Anda menyimpan, karena server memperhatikan kode dan memperbarui perubahan.

Setelah Anda selesai dengan server, tekan Control-C di jendela terminal untuk menghentikan proses.

1b. Instal seed Angular QuickStart

Hanya melakukan langkah ini jika Anda memiliki dilewati Langkah 1a. Jika Anda melakukan kedua langkah tersebut, penginstalan ini akan mengganggu sebagian dari penginstalan CLI, dan Anda harus mengulanginya jika ingin menggunakannya lagi. Petunjuk untuk menginstal benih QuickStart menawarkan dua opsi untuk memulai proses: mengunduh benih dan membuka ritsletingnya, atau sebagai alternatif mengkloning benih, sebagai berikut:

Panduan memulai $ git clone //github.com/angular/quickstart.git

Opsi mana pun yang Anda pilih untuk mendapatkan kode, langkah selanjutnya adalah sama:

$ cd panduan memulai

(atau apa pun yang Anda beri nama folder tersebut)

$ npm instal

$ npm mulai

The npm installlangkah tidak dasarnya hal yang sama seperti $ npm install -g @angular/clilangkah dalam versi CLI dari instalasi, kecuali bahwa hal itu install naskah dan itu tidak menginstal sudut CLI, karena itu tidak pada daftar ketergantungan package.json. Bahkan jika CLI Angular sudah diinstal, skrip ini akan menghapusnya .

The npm startlangkah menjalankan script ini:

"start": "secara bersamaan \" npm run build: watch \ "\" npm run serve \ ""

Untuk mengembangkannya, skrip build: watch and serve adalah:

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

dan

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

Sudahkah saya menyebutkan bahwa itu tscadalah kompiler TypeScript? The -ppilihan menetapkan direktori proyek untuk mengkompilasi, dan -wpilihan kata menonton file masukan.

The npm startLangkah (menjalankan dua skrip secara bersamaan) akan melakukan dasarnya hal yang sama seperti ng servelangkah dalam versi CLI dari instalasi, kecuali bahwa kemungkinan untuk memilih port yang berbeda, ditambah maka secara otomatis akan memuat halaman itu melayani di default Anda browser, dan halaman akan terlihat seperti gambar di kiri.

Saat Anda selesai bermain dengan aplikasi Angular QuickStart, cukup tekan Ctrl + C atau tutup jendela terminal untuk menghentikan proses. Anda dapat memulainya lagi dengan kembali ke direktori dan menjalankannya ng serve.

Langkah (opsional) berikutnya dalam instruksi seed QuikStart adalah yang membuat saya gugup: Ini memberitahu Anda untuk menghapus file yang tidak penting yang digunakan rm -rfdi MacOS atau deldi Windows. Jika Anda memutuskan untuk melakukan itu, setidaknya periksa kembali apakah Anda berada di direktori yang benar sebelum menjalankan skrip yang Anda salin dari situs dokumentasi. Harap jangan mencobanya setelah Anda mulai menambahkan file ke proyek.

Tidak peduli apakah Anda mengikuti instruksi seed CLI atau QuickStart, langkah Anda selanjutnya adalah menjelajahi kode sumber proyek Angular. Untuk itu, mari instal editor yang sadar-Angular.

2. Instal Kode Visual Studio

Halaman sumber Angular merekomendasikan tiga IDE: IntelliJ IDEA, Visual Studio Code, dan WebStorm. Saya menggunakan ketiganya, tetapi untuk keperluan latihan ini Visual Studio Code adalah pilihan terbaik karena gratis dan open source. Jelajahi ke halaman muka Visual Studio Code dan unduh versi stabil saat ini untuk platform Anda, kemudian instal paket.

Setelah Visual Studio Code diinstal, jalankan dan buka direktori yang menampung proyek dasar Anda. Di Mac saya, proyek yang dihasilkan CLI sudah aktif ~/work/my-appdan seed ada di ~/work/quickstartmaster. Lokasi Anda akan bervariasi tergantung pada apakah Anda melakukan pemasangan CLI atau pemasangan seed, dan pilihan apa pun yang Anda buat tentang direktori target mereka. Pohon sumber akan terlihat seperti ini:

Visual Studio Code mendukung TypeScript di luar kotak, jadi tidak ada lagi yang harus diinstal. Jika Anda ingin menginstal bahasa lain nanti, Anda dapat melakukannya dengan mudah di panel Ekstensi, dengan mudah ditunjukkan dengan mengklik ikon bawah di kiri atas. Ketik nama bahasa atau alat yang Anda inginkan ke dalam kotak pencarian di bagian atas panel Ekstensi. Anda dapat kembali ke File Explorer dengan mengklik ikon atas di kiri atas.