Rilis terbaru oleh Google Angular Framework ini berisi banyak fitur menarik bersama dengan beberapa peningkatan pada fitur yang ada. Angular 8 telah tiba dengan banyak alur kerja dan daftar baru fitur kuat dan penting yang pengembang Angular akan menghargainya sebagai kerangka kerja inti seperti Angular Material Library dan bersama dengan antarmuka baris perintah. Google juga telah mengaktifkan Angular Console sebagai mitra peluncuran utama untuk menjalankan Angular Projects, mengintegrasikan Angular dengan Firebase dengan bantuan paket angular / fire, bersama dengan StackBlitz terintegrasi IDE dan nativeScript dukungan untuk membangun aplikasi mobile asli dengan Angular. Jadi, dengan cara yang sederhana, kita dapat mengatakan bahwa Angular 8 menyediakan sekelompok perpustakaan dan kerangka kerja generasi baru yang datang untuk mendukung pengembangan aplikasi web yang lebih produktif, fleksibel, dapat dipelihara dan dapat diuji.
Dalam panduan ini, kami mencoba untuk mencakup konsep inti pengembangan Angular dan sumber yang dapat Anda gunakan untuk meningkatkan keahlian Anda. Spesialis Fively bekerja dengan aplikasi Angular dan membuktikan manfaat dan pentingnya kerangka kerja pada tahun 2021. Jadi, jika Anda bertekad untuk belajar dan menggunakan Angular, panduan kami bisa menjadi awal yang baik. Kami berharap Anda banyak keberuntungan dan siap untuk menjawab pertanyaan apa pun mengingat posting blog ini.
Manfaat utama menggunakan Angular dalam aplikasi web adalah: -
- Angular memodifikasi dom halaman secara langsung alih-alih menambahkan kode HTML dalam yang lebih cepat.
- Pengikatan data tidak terjadi pada setiap kontrol atau perubahan nilai (tidak ada pendengar perubahan) tetapi pada titik-titik tertentu dari eksekusi kode JavaScript. Itu secara dramatis meningkatkan kinerja, karena pembaruan Model / Tampilan massal tunggal menggantikan ratusan peristiwa perubahan data yang mengalir.
- Tidak perlu menggunakan fungsi yang dapat diamati. Angular menganalisis dom halaman dan membangun binding berdasarkan atribut elemen angular-specific. Itu membutuhkan lebih sedikit tulisan, yang berarti kode lebih bersih, lebih mudah dipahami, dan memiliki lebih sedikit kesalahan.
- Fitur yang diperluas seperti injeksi dependensi, perutean, animasi, enkapsulasi tampilan, dan banyak lagi tersedia.
- Ini didukung oleh IntelliJ IDEA dan Visual Studio .NET IDEs.
- Hal ini didukung oleh Google dan komunitas pengembangan yang besar.
- Angular adalah solusi komprehensif untuk pengembangan front-end yang cepat. Tidak perlu plugin atau kerangka kerja lain.
- Angular adalah unit testing ready, dan itu adalah salah satu keuntungan yang paling menarik.
Panduan langkah demi langkah belajar Angular
Mengapa Angular dikenal sebagai Framework?
Jadi sebelum mulai membahas Angular, sebelum itu kita perlu memahami Apa itu Angular? Mengapa kita menyebut Angular sebagai Framework? Sesuai definisi kamus, kerangka kerja adalah struktur pendukung yang penting. Definisi kalimat tunggal ini dengan sangat baik meringkas Angular. Namun terlepas dari itu, Angular menyediakan ekosistem yang besar dan bermanfaat di mana kita dapat menemukan banyak alat dan utilitas baru, di mana kita dapat memecahkan masalah kita dan juga dapat mempertimbangkannya untuk struktur dan desain aplikasi baru. Jadi, jika kita ingin membuat hidup kita lebih sulit dan kompleks, maka kita perlu menulis dan mengembangkan kerangka kerja kita.
Jadi, dalam kehidupan nyata, tidak mungkin untuk mengembangkan kerangka kerja untuk diri kita sendiri. Itu sebabnya perlu menggunakan kerangka kerja yang ada yang mendukung ide dan persyaratan kami. Kerangka kerja yang baik dan stabil seperti Angular sudah diuji dan dipahami dengan baik oleh yang lain. Penggunaan kerangka kerja tidak jarang; Banyak programmer dari semua lingkungan pengkodean bergantung pada mereka. Pengembang aplikasi bisnis menggunakan kerangka kerja, seperti Microsoft Entity Framework, untuk meringankan rasa sakit mereka dan mempercepat pengembangan saat membangun aplikasi terkait database. Misalnya, pemrogram Java menggunakan kerangka kerja LibGDX untuk membantu mereka membuat game. Saya harap saya telah menjelaskan kepada Anda perlunya kerangka kerja dan, lebih khusus lagi, fakta bahwa AngularJS adalah pilihan yang bagus.
Apa yang baru di Angular 8?
Angular 8 secara resmi diumumkan hanya beberapa hari yang lalu yaitu pada 23 Mei 2019. Versi rilis baru bukanlah pembaruan besar yang kompleks. Tapi tetap saja, versi ini berisi banyak fitur termasuk beberapa fitur opt-in. Selain itu, versi ini berisi beberapa fitur baru dan juga peningkatan fitur versi sebelumnya. Beberapa fitur penting yang termasuk dalam versi Angular 8 adalah –
- Dukungan Typescript 3.4 atau di atas
- Dukungan Mesin Ivy Renderer
- Memperkenalkan alat build baru yang disebut Bazel sebagai fitur opt-in
- Memberikan opsi untuk pemuatan diferensial untuk pengoptimalan kinerja
- Perubahan dalam konsep pemuatan modul dinamis
- Memberikan dukungan untuk Web Worker
- Menyediakan Dukungan SVG template
Jika Anda ingin tahu lebih banyak tentang apa yang baru di Angular 8 maka Anda dapat merujuk artikel di bawah ini sebagai referensi -
Instal Prasyarat untuk Angular8
Jika kita ingin mengembangkan aplikasi di Angular 8, maka kita perlu mengkonfigurasi dan menginstal prasyarat di bawah ini untuk lingkungan Angular 8 -
- Node JS terbaru yaitu LTA 10.16 atau lebih tinggi
- Instal Typescript versi 3.4 atau lebih tinggi
- Perlu menginstal IDE apa pun seperti Visual Studio Code atau Microsoft Visual Studio 2015 atau lebih tinggi
- Juga, diperlukan untuk menginstal Angular CLI untuk menjalankan proyek sudut
Jika Anda masih membutuhkan detail lebih lanjut, berikut adalah turorial, Cara Menginstal Angular.
Apa itu TypeScript?
Seperti semua, kita tahu bahwa Angular 8 atau versi sebelumnya (hingga Angular 2.0) sangat tergantung pada bahasa Typescript. Jadi, perlu untuk memahami beberapa konsep dasar Typescript. Typescript pada dasarnya adalah bahasa scripting super-set JavaScript. Jadi, sesuai Google, definisi Typescript adalah -
TypeScript adalah bahasa pemrograman gratis dan open-source yang dikembangkan dan dikelola oleh Microsoft. Ini adalah superset syntactical ketat JavaScript dan menambahkan mengetik statis opsional ke bahasa. Anders Hejlsberg, arsitek utama C # dan pencipta Delphi dan Turbo Pascal, telah bekerja pada pengembangan TypeScript.
Typescript memberikan lebih banyak hak istimewa yang terkait dengan pemrograman deklaratif seperti antarmuka, kelas, modul, pengetikan statis melalui perpustakaan Javascript yang populer dan kode kepada pengembang. Typescript sepenuhnya didasarkan pada konsep OOPs. Sebenarnya, Typescript pada dasarnya bertindak sebagai transpiler. Meskipun kita dapat mengembangkan dan mengkompilasi kode dalam Typescript. Tapi itu sebenarnya transpiler. Karena kode yang ditulis dalam Typescript telah diubah menjadi bahasa lain seperti Javascript setelah kompilasi. Dan kemudian kode berbasis Javascript yang dikompilasi dijalankan di browser untuk aplikasi. Jadi, dalam kata sederhana, transpiler berarti pada dasarnya mengubah satu bahasa ke bahasa lain.
Beberapa Sintaks Dasar TypeScript
Pada bagian ini, kita akan menunjukkan beberapa sintaks dasar atau anotasi dalam Typescript dibandingkan dengan JavaScript.
| JavaScript | TypeScript |
| var num = 5; | var num : angka = 5; |
| var num = "Speros"; | var num : string = "Speros"; |
| var anydata = 123; | var anydata : any = 123; |
| daftar var = [1,2,3]; | daftar var : Array<number> = [1,2,3]; |
function square(num){ kembalikan num * num ; } | function square(num : number) : number { kembalikan num * num ; } |
Tabel di atas menunjukkan beberapa sintaks dasar yang terkait dengan deklarasi variabel atau deklarasi fungsi. Meskipun demikian, kita juga dapat membuat kelas apa pun dan fungsi atau objek terkaitnya dalam Typescript.
Buat Proyek Baru menggunakan Angular CLI
Jika kita ingin membuat proyek baru di Angular 8, kita dapat menggunakan Perintah CLI Angular untuk itu. Jadi, buat proyek baru menggunakan Angular CLI kita perlu melakukan langkah-langkah di bawah ini -
- Buka Command Prompt dan buat folder
- Sekarang jalankan perintah - ng AngularDemo baru
- Sekarang, Masukkan "N" untuk Apakah Anda ingin Menambahkan opsi Angular Routing (Karena harus Y ketika kami ingin menggunakan Routing dalam aplikasi kami).
- Pilih gaya stylesheet sebagai CSS lalu tekan enter
Sekarang, Angular CLI akan membuat file yang diperlukan untuk menjalankan Proyek Angular bersama dengan paket terkait yang akan diunduh di folder node_modules.
Tentang Struktur Folder Proyek
Selama pembuatan Angular Project, Angular CLI membuat folder baru sesuai nama proyek yaitu Angular8Demo. Jadi, sekarang buka proyek itu di editor kode apa pun seperti Visual Studio Code atau Microsoft Visual Studio. Folder proyek tersebut berisi struktur folder di bawah ini –
Proyek yang dibuat berisi folder berikut -
- e2e - Folder ini adalah untuk tujuan pengujian ujung ke ujung. Ini berisi file konfigurasi yang terkait dengan melakukan uji unit proyek.
- node_modules - Folder ini berisi paket yang diunduh sesuai konfigurasi.
- src - Folder ini berisi kode sumber yang sebenarnya. Ini berisi 3 subfolder sebagai -
- app - Folder aplikasi berisi file terkait proyek Angular seperti komponen, file HTML, dll.
- aset - Folder aset berisi file statis seperti gambar, stylesheet, file pustaka javascript kustom (jika diperlukan), dll.
- lingkungan - Folder Lingkungan berisi file terkait lingkungan yang diperlukan selama penyebaran atau pembuatan proyek.
Tentang File Konfigurasi Yang Berbeda
Ketika kita membuat proyek berbasis Angular menggunakan Angular CLI, maka setiap kali akan membuat 3 file konfigurasi yang berbeda yang membantu kita untuk mengkonfigurasi proyek bersama dengan dependensi terkait. File konfigurasi ini adalah –
tsconfig.json – Jika file tsconfig.json ada di dalam folder root proyek, itu berarti bahwa proyek tersebut pada dasarnya adalah proyek TypeScript. File tsconfig.json menentukan file root dan opsi kompiler yang diperlukan untuk mengkompilasi proyek. Contoh tsconfig.json seperti di bawah ini –
- {
- "compileOnSave": benar,
- "compilerOptions": {
- "baseUrl": "./",
- "outDir": "./dist/out-tsc",
- "sourceMap": benar,
- "deklarasi": salah,
- "modul": "esnext",
- "moduleResolution": "node",
- "emitDecoratorMetadata": true,
- "ExperimentalDecorators": benar,
- "importHelpers": benar,
- "target": "es2015",
- "typeRoots": [
- "node_modules/@types"
- ],
- "lib": [
- "es2018",
- "dom"
- ]
- }
- }
package.json – package.json pada dasarnya adalah file JSON yang berisi semua informasi yang terkait dengan paket yang diperlukan untuk proyek. Juga, dengan bantuan file konfigurasi ini, kita dapat mempertahankan Nama Proyek dan versi terkaitnya dengan menggunakan properti "nama" dan "versi". Juga, kami dapat memberikan definisi build proyek menggunakan file ini.
- {
- "nama": "angular8-demo",
- "versi": "0.0.0",
- "skrip": {
- "ng": "ng",
- "mulai": "ng melayani",
- "build": "ng build",
- "tes": "ng test",
- "lint": "ng lint",
- "e2e": "ng e2e"
- },
- "pribadi": benar,
- "dependensi": {
- "@angular/animasi": "~8.0.0",
- "@angular/umum": "~8.0.0",
- "@angular/kompiler": "~8.0.0",
- "@angular/inti": "~8.0.0",
- "@angular/bentuk": "~8.0.0",
- "@angular/platform-browser": "~8.0.0",
- "@angular/platform-browser-dynamic": "~8.0.0",
- "@angular/router": "~8.0.0",
- "rxjs": "~6.4.0",
- "tslib": "^1.9.0",
- "zona.js": "~0.9.1"
- },
- "devDependencies": {
- "@angular-devkit/build-angular": "~0.800.0",
- "@angular/cli": "~8.0.2",
- "@angular/compiler-cli": "~8.0.0",
- "@angular/layanan bahasa": "~8.0.0",
- "@types/node": "~8.9.4",
- "@types/melati": "~3.3.8",
- "@types/jasminewd2": "~2.0.3",
- "codelyzer": "^5.0.0",
- "jasmine-core": "~3.4.0",
- "jasmine-spec-reporter": "~4.2.1",
- "karma": "~4.1.0",
- "karma-chrome-launcher": "~2.2.0",
- "karma-coverage-istanbul-reporter": "~2.0.1",
- "karma-melati": "~2.0.1",
- "karma-melati-html-reporter": "^1.4.0",
- "protractor": "~5.4.0",
- "ts-node": "~7.0.0",
- "tslint": "~5.15.0",
- "typescript": "~3.4.3"
- }
- }
angular.json – file angular.json adalah file JSON berbasis Angular Application Environment yang berisi semua informasi yang terkait dengan project build dan deployment. Ini memberi tahu sistem file mana yang perlu diubah saat kita menggunakan perintah build or ng serve.
main.ts - File main.ts bertindak sebagai titik masuk utama aplikasi Angular kami. File ini bertanggung jawab atas operasi bootstrapper modul Angular kami. Ini berisi beberapa pernyataan penting yang terkait dengan modul dan beberapa konfigurasi pengaturan awal seperti
- enableProdMode – Opsi ini digunakan untuk menonaktifkan mode pengembangan Angular dan mengaktifkan mode Productions. Menonaktifkan mode Pengembangan mematikan pernyataan dan pemeriksaan terkait model lainnya dalam kerangka kerja.
- platformBrowserDynamic – Opsi ini diperlukan untuk bootstrap aplikasi Angular n browser.
- AppModule – Opsi ini menunjukkan modul mana yang bertindak sebagai modul root dalam aplikasi.
- lingkungan – Opsi ini menyimpan nilai konstanta lingkungan yang berbeda.
- import { enableProdMode } dari '@angular/core';
- import { platformBrowserDynamic } dari '@angular/platform-browser-dynamic';
- impor { AppModule } dari './app/app.module';
- impor { lingkungan } dari './environments/environment';
- jika (environment.production) {
- enableProdMode();
- }
- platformBrowserDynamic().bootstrapModule(AppModule)
- . catch(err => console.error(err));
Dalam setiap aplikasi Angular, setidaknya diperlukan satu file modul sudut. Aplikasi Angular mungkin berisi lebih dari satu modul Angular. Modul sudut adalah proses atau sistem untuk merakit beberapa elemen sudut, seperti komponen, arahan, pipa, layanan, dll sehingga elemen Angular ini dapat dikombinasikan sedemikian rupa sehingga semua elemen dapat dikaitkan satu sama lain dan akhirnya membuat aplikasi.
Dalam Angular, dekorator @NgModule digunakan untuk mendefinisikan kelas modul Angular. Terkadang, kelas ini disebut kelas NgModule. @NgModule selalu mengambil objek metadata, yang memberi tahu Angular cara mengkompilasi dan meluncurkan aplikasi di browser. Jadi, untuk mendefinisikan modul Angular, kita perlu mendefinisikan beberapa langkah sebagai berikut:
- Pertama, kita perlu mengimpor Angular BrowserModule ke dalam file modul Angular di awal. Kelas BrowserModule ini bertanggung jawab untuk menjalankan aplikasi di browser.
- Pada langkah berikutnya, kita perlu mendeklarasikan elemen Angular seperti komponen dalam modul Angular sehingga komponen atau elemen tersebut dapat dikaitkan dengan modul Angular.
Pada langkah terakhir, kita perlu menyebutkan satu komponen Angular sebagai komponen root untuk modul Angular. Komponen ini selalu dikenal sebagai komponen bootstrap. Jadi, satu modul Angular dapat berisi ratusan komponen. Namun dari komponen tersebut, salah satu komponen perlu menjadi komponen root atau bootstrap yang akan dieksekusi terlebih dahulu ketika modul Angular akan bootstrapped di browser.
- impor { BrowserModule } dari '@angular/platform-browser';
- impor { NgModule } dari '@angular/core';
- import { AppComponent } dari './app.component';
- @NgModule({
- deklarasi: [
- AppComponent
- ],
- impor: [
- BrowserModule
- ],
- penyedia: [],
- bootstrap: [AppComponent]
- })
- kelas ekspor AppModule { }
Demo 1: Program Pertama
Jadi, ketika kita membuat Proyek Angular menggunakan Angular CLI, itu membuat proyek baru bersama dengan modul dan file komponen default. File-file ini biasanya ada di dalam folder aplikasi. Jadi, pertama, cukup jalankan Angular Project menggunakan perintah ng serve dan output di bawah ini akan terlihat di browser.
Sekarang, kami membuat beberapa perubahan dalam file app.component.ts dan file app.component.html seperti di bawah ini -
Kode app.component.ts
- impor { Komponen } dari '@angular/core';
- @Component({
- pemilih: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- kelas ekspor AppComponent {
- judul = 'Selamat datang di Angular 8 Learning Series...';
- }
Kode app.component.html
- <!--Perin di bawah ini hanya placeholder dan dapat diganti.->
- <div style="text-align:center">
- <h1>
- Selamat datang di {{ judul }}!
- </h1>
- <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+ CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
- </div>
Sekarang, segarkan browser untuk memperbarui output.
Cara Menggunakan Panduan
Panduan ini terdiri dari dua bagian - teori dan praktik. Oleh karena itu, Anda dapat memulai dari awal dan melanjutkan atau memeriksa modul terpisah jika Anda merasa percaya diri dan ingin menghemat waktu.
Definisi dan Konsep Inti
Angular adalah kerangka javascript untuk membuat aplikasi web dan mobile. Kerangka kerja ini bersifat open-source dan dimaksudkan untuk mengatasi kesulitan yang muncul selama pengembangan aplikasi satu halaman dan lintas platform.
Arsitektur aplikasi angular mencakup delapan jenis blok inti yang kami jelaskan di bawah ini. Karena tujuan utama dari kerangka kerja ini adalah untuk membuat SPAs, bloknya khusus untuk itu. 95% dari kode berjalan di sisi klien, dan sisanya ada di sisi server.
Kerangka kerja ini menawarkan keuntungan berikut:
- menghemat waktu dan usaha saat mengembangkan solusi;
- praktik dan pola pengkodean lanjutan untuk desain;
- skalabilitas;
- mengubah masalah pembangunan yang kompleks menjadi tugas-tugas terpisah sederhana.
Sekarang mari kita lihat bagian-bagian penyusun kerangka kerja.
Modul
Modul adalah blok kode kohesif yang didedikasikan untuk domain aplikasi tertentu. Ini adalah fitur mendasar dari kerangka kerja. Aplikasi Angular harus berisi setidaknya satu modul, yang disebut modul root, yang bertanggung jawab untuk bootstrap. Namun, sebagian besar solusi memiliki lebih banyak modul fitur yang mengelola kemampuan tertentu.
Sebagai pengembang, Anda dapat membuat kombinasi modul yang berbeda dan menggunakannya kembali saat mengelola pengembangan produk yang kompleks. Modul Angular selalu dihiasi dengan awalan @NgModule untuk menggambarkan sifat-sifatnya. Properti yang paling penting adalah deklarasi (kelas tampilan), ekspor, impor, penyedia, dan bootstrap.
Komponen
Komponen bertanggung jawab untuk bagian layar yang disebut tampilan. Solusi Angular berisi komponen root, yang menghubungkan hierarki komponen dengan halaman model objek dokumen. Secara umum, komponen memiliki fungsi sebagai berikut:
- untuk mendukung logika domain;
- untuk mengimpor data yang diperlukan baik untuk komponen tersebut maupun pandangannya;
- untuk membuat koneksi dengan tampilan;
- untuk mengirimkan nilai ke komponen lain.
Awalan @Component mengidentifikasi kelas di bawah ini sebagai kelas komponen dan menentukan metadatanya yang memberi tahu Angular di mana mendapatkan bagian-bagian penyusun yang perlu dibuat dan menyajikan komponen dan pandangannya.
Template
Template adalah kombinasi dari html dan angular bentuk. Ini digunakan untuk menentukan tampilan komponen. Sebagai aturan, tampilan diatur secara hierarkis, dan template yang terkait dengan komponen mendefinisikan tampilan host komponen dan hierarki tampilan.
Metadata
Kami telah menyebutkan beberapa dekorator yang ditambahkan ke elemen Angular. Peran utama mereka adalah melampirkan metadata ke kelas untuk membuat Angular memahami cara menghadapinya. Oleh karena itu, metadata adalah elemen yang harus Anda tambahkan ke kelas untuk memandu perilaku kerangka kerja.
Pengikatan Data
Pengikatan data adalah mekanisme untuk menghubungkan bagian template dengan bagian-bagian komponen. DB secara signifikan menghemat waktu dan usaha karena mempersingkat jumlah baris kode yang akan ditulis.
Angular menyediakan empat bentuk DB:
- pengikatan interpolasi - anda mengikat nama properti ke templat tampilan untuk menampilkan properti komponen;
- pengikatan properti - anda mengatur properti ke nilai ekspresi templat pengikatan properti;
- ikatan peristiwa - anda mengidentifikasi peristiwa klik tombol sebagai target pengikatan;
- pengikatan data dua arah - anda menggabungkan pengikatan properti dan peristiwa dalam satu notasi
Arahan
Direktif memberikan instruksi ke Angular pada transformasi yang benar dari halaman model objek dokumen. Secara teknis setiap komponen adalah direktif dengan template. Dua jenis arahan lainnya adalah:
- direktif struktural mengubah struktur templat halaman model objek dokumen;
- direktif atribut memperbarui atribut elemen tertentu yang ada
Layanan
Layanan adalah kelas yang ditentukan pengguna yang terdiri dari fitur atau nilai apa pun yang dibutuhkan aplikasi Anda. Dianjurkan untuk menambahkan tujuan sempit ke layanan sehingga berkinerja baik. Komponen mengkonsumsi layanan dan memperkaya UI / UX solusi.
Injeksi Dependensi (DI)
Injeksi dependensi adalah cara untuk memberikan contoh baru dari kelas dengan dependensi yang akurat dan lengkap yang diperlukan. DI tidak mengambil data dari server tetapi mendelegasikan tugas ke layanan. Dengan demikian, komponen Angular baru disediakan dengan layanan yang mereka butuhkan dengan bantuan suntikan ketergantungan.
Sumber: angular.io
Versi Angular
Versi Angular stabil pertama dirilis pada tahun 2010 dan disebut AngularJS (versi 0.9.0, alias dragon-breath). Pada tahun 2016, produk ini benar-benar ditulis ulang dan diberi nama Angular 2. Itu tidak kompatibel dengan AngularJS sama sekali. Pembaruan lainnya diikuti:
- Sudut 4 - Maret 2017
- Sudut 5 - November 2017
- Sudut 6 - Mei 2018
- Sudut 7 - Oktober 2018
- Sudut 8 - Mei 2019
- 9 - Februari 2020
- 10 - Juni 2020
- Sudut 11 - November 2020
Versi terbaru ditandai dengan perubahan seperti TypeScript 4.0 dan Dukungan Webpack 5, pindah ke ESLint untuk mengevaluasi pola dalam kode, dan memperbarui dukungan penggantian modul panas.
Sumber Daya untuk Mempelajari Kerangka Kerja
Kami sarankan Anda mulai dengan mempelajari panduan dokumen dan gaya Angular. Luangkan beberapa jam untuk menyelidiki konsep inti dan beralih ke membuat aplikasi sampel. Buat aplikasi Tour of Heroes anda yang akan membantu agen kepegawaian untuk mengelola pahlawannya yang stabil.
Alat dan libs yang berguna:
- Amexio Canvas Web Based Drag and Drop IDE;
- Kode Studio Visual;
- Taman Bermain Sudut;
- Kerangka Pengujian Busur Derajat;
- UI-jar - Pengembangan Panduan Gaya Berbasis Tes;
- Tumpukan Data Apollo;
- Validator Formulir Reaktif RxWeb;
- Amexio - Ekstensi Sudut;
Kesimpulan
Angular adalah sisi klien berdasarkan kerangka kerja open-source yang dikelola oleh Google. Perpustakaan dapat terlebih dahulu membaca halaman HTML, yang menyediakan atribut tag kustom tambahan yang tertanam di dalamnya. Atribut tersebut ditafsirkan sebagai direktif yang menginstruksikan Angular Framework untuk mengikat bagian input atau output halaman ke model yang diwakili oleh variabel JavaScript standar. Nilai variabel JavaScript tersebut dapat diatur secara manual dalam kode atau diambil dari sumber daya JSON statis atau dinamis termasuk penyedia data sisi server seperti REST API atau lainnya
Tags:
PROGRAMMING