Angular 7.0 – Apa yang Baru di Avatar barunya?

Diterbitkan: 2018-12-29

Kekuatan sebuah bangunan terletak pada pilar betonnya. Begitu juga kerangka kerja untuk aplikasi web. Kerangka kerja perangkat lunak menyediakan cara standar untuk merancang, membangun, dan menyebarkan aplikasi. Di dunia platform Java, kerangka kerja Javascript adalah kata kunci yang paling banyak diucapkan sampai Angular menjadi penting.
Sekarang, mari kita lihat beberapa fitur menonjol dari Angular.

  • Angular adalah kerangka kerja Javascript open source yang berubah menjadi apa yang disebut 'TypeScript' sekarang.
  • Pembuatan dan pengembangan kode lebih cepat dibandingkan dengan kode JS (Javascript).
  • Command line prompt (CLI) memiliki perintah untuk membangun aplikasi lebih cepat.
  • Kode diatur dengan baik karena menggunakan komponen sehingga meningkatkan produktivitas
  • Direktif adalah fungsi dinamis yang menangani variabel, pernyataan if, dan loop dalam HTML
  • Angular bersifat lintas platform sehingga tidak bergantung pada browser dan sistem operasi
  • Angular CLI hadir dengan alat pengujian yang berguna untuk pengujian unit

Pelajari kursus rekayasa perangkat lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Daftar isi

AngularJS – Pendahulu dari Angular

AngularJS adalah produk pertama dalam seri Angular yang diperkenalkan oleh Google pada tahun 2009. Ini adalah sisi klien atau kerangka kerja front-end. Artinya, kode berjalan di browser pengguna dan bukan di server web. AngularJS ditulis murni dalam Javascript. Ini dikembangkan untuk memisahkan logika aplikasi, namun, itu adalah satu-satunya cara yang cukup berhasil dan diaspal untuk Angular dengan avatar 7.0 saat ini.
Apakah AngularJS Pilihan Tepat Untuk Pengembangan Aplikasi Seluler Anda Selanjutnya?

Kerangka kerja Angular 7.0

Mari kita pahami secara singkat blok bangunan Angular:

  1. Modul : Pada dasarnya memecah layar inti aplikasi secara logis. Misalnya, jika ada halaman keranjang belanja, seseorang mungkin ingin memiliki modul keranjang belanja.
  2. Komponen : Ini adalah bagian dari UI dan merupakan 'kelas' seperti dalam pemrograman berorientasi objek. Ini adalah blok bangunan dasar dari Antarmuka Pengguna (UI). Kelas komponen berisi logika inti untuk halaman.
     Komponen terdiri dari:

    1. Template : Template ditulis dalam HTML atau bisa berupa file HTML. Itu dapat memiliki properti dinamis seperti variabel dan penggunaan 'jika kondisi' dimungkinkan dengan arahan.
    2. Kelas : Adalah kode untuk aplikasi. Kode ditulis dalam TypeScript. TypeScript adalah superset dari Javascript. TypeScript adalah bahasa tipe 'statis' di mana variabel dideklarasikan dengan tipe yang ditentukan. Oleh karena itu kesalahan ditangkap pada kompilasi program daripada ditangkap saat runtime. Kelas sudut dapat ditulis dalam Javascript juga. Komponen memiliki properti data dan metode.
    3. Metadata : Untuk mengidentifikasi bahwa kelas adalah komponen Angular, gunakan Metadata. Metadata dapat dilampirkan ke TypeScript menggunakan deklarasi dekorator.
       Mari kita berjalan melalui komponen sederhana di Angular.

       Impor {komponen} dari ''@angular/core'' ; Di sini paket komponen diimpor dari perpustakaan inti Angular.
@component ({ (ini adalah deklarasi dekorator)
Selector : 'myapplication' …(.ini adalah tag HTML khusus yang kami gunakan untuk menyisipkan komponen.)
Template: '<h1> Halo {(name)}</h1> (nama adalah variabel)
})
export class AppComponent{ (Ini adalah kelas komponen dan 'nama' adalah properti di dalam kelas)
nama = 'Kerangka sudut';
}
<tubuh>
<myapplication>Memuat komponen aplikasi sampel di sini..</myapplication>
</tubuh>
    4. Data binding : Proses yang memungkinkan komunikasi antara komponen dan tampilan. Jadi data dilewatkan dari komponen ke tampilan dan sebaliknya. Ada empat jenis pengikatan data. Dalam Interpolasi dan pengikatan properti, data dikirim dari komponen ke tampilan dan dalam pengikatan peristiwa, data dikirim ke komponen dari tampilan atau templat. Dalam pengikatan dua arah, data berjalan dua arah.
    5. Service : Ini adalah kelas yang ditulis untuk kode yang dapat digunakan kembali, yaitu kode yang dapat diakses dari beberapa komponen. Kelas-kelas ini mengirim data dan fungsionalitas ke seluruh komponen. Kelas layanan juga bisa mendapatkan data dari database atau file js/JSON. Ketika seseorang menggunakan kelas Layanan, kode terlihat terorganisir dan terfragmentasi.
    6. Directive : Menyesuaikan atribut HTML untuk memperluas kekuatan HTML adalah direktif. ngIf, ngFor, ngModel adalah arahan. ngModel bertanggung jawab untuk, mengikat tampilan ke dalam model, yang disyaratkan oleh arahan lain seperti input, textarea, atau Select.
       Berikut adalah sepotong kode yang menunjukkan cara kerja ngmodel.

       <div ng-app="" ng-init="firstName='John'">
<p>Masukkan nama di kotak masukan:</p>
<p>Nama: <input type="text" ng-model="firstName"></p>
<p>Anda menulis: {{ firstName }}</p>
</div>

      Jadi, firstName diinisialisasi ke 'John' dan ketika seseorang memasukkan nilai baru di kotak teks, firstName akan menahan nama baru yang dimasukkan.

    7. Dependency injection (DI) : Kelas membutuhkan objek untuk melakukan fungsi tertentu. Alih-alih membuat objek setiap kali di kelas, kelas menerima objek (dependensi) dari sumber eksternal. Dalam kerangka DI berikut adalah langkah-langkah yang perlu diikuti:
      1. Buat Kelas Layanan mis. Data karyawan
      2. Daftarkan kelas layanan ini dengan Injector. Injector adalah wadah yang menampung semua kelas ketergantungan
      3. Deklarasikan kelas Employeedata sebagai dependensi di kelas yang membutuhkannya, mis. Kelas Daftar Karyawan
Apa yang Dilakukan Pengembang Perangkat Lunak?

Versi Angular

Setelah AngularJS, Angular 2 dirilis yang merupakan penulisan ulang lengkap AngularJS. Komponen ditambahkan dari Angular 2. Angular 2 tidak kompatibel ke belakang. Angular terdiri dari sekelompok paket dan paket Router di Angular 3 tidak sinkron. Oleh karena itu tim Angular pindah ke Angular 4 yang dirilis dengan semua koreksi dan fitur dengan kompatibilitas ke belakang ke Angular 2. Selanjutnya Angular 5, Angular 6 dirilis dan versi terbaru sekarang adalah Angular 7 .

Apa yang baru di Angular 7.0?

  1. CLI Prompts : Perubahan pada prompt baris perintah Angular adalah bahwa CLI meminta pengguna, untuk memilih fitur saat menjalankan perintah umum. Fitur seperti Perutean sudut atau format lembar gaya dan banyak lagi dapat dipilih oleh pengguna. Di versi Angular sebelumnya, Anda harus mengingat dan mengetik opsi pada prompt.
  2. Kinerja Aplikasi :
    1. Kesalahan Umum:
       Dalam versi ini, tim sudut menganalisis dan menghapus beberapa kesalahan umum yang dibuat oleh pengembang seperti polyfill 'reflect-metadata' disertakan dalam produksi yang sebenarnya hanya diperlukan dalam pengembangan.
    2. Bundel-Anggaran:
       Untuk meningkatkan kinerja aplikasi, Anggaran Bundel default didefinisikan di angular.JSON. Pengembang sekarang akan diperingatkan jika ukuran bundel aplikasi melebihi batas 5MB dan ketika bundel awal melebihi 2MB. Nilai-nilai ini dapat dimodifikasi dalam file JSON sesuai kebutuhan.
  3. Bahan Sudut & CDK: Kit pengembangan komponen sudut (CDK) dibuat dari Bahan Sudut (UI untuk perpustakaan). Dua fitur baru yang ditambahkan di CDK adalah
    1. Pengguliran Virtual:
       Untuk memuat hanya bagian yang terlihat di layar, paket <cdk-virtual-scroll-viewport> menyediakan pembantu untuk arahan yang bereaksi terhadap peristiwa gulir. Jadi, itu hanya akan membuat item yang bisa muat di layar. Ketika pengguna menggulir daftar maka DOM akan memuat dan membongkar elemen secara dinamis berdasarkan ukuran tampilan.
    2. Seret dan Jatuhkan dukungan:
       Modul @angular/cdk/drag-drop membantu fitur drag and drop gratis dari suatu elemen, menyusun ulang item dalam daftar, memindahkan item dalam daftar, dan seterusnya. Ini dilakukan dengan bantuan arahan cdkDropList dan cdkDrag.
  4. Angular 7.0 telah memperbarui dependensinya untuk mendukung TypeScript 3.1, RxJS 6.3 dan Node 10 .
  5. Peningkatan aksesibilitas Pilihan: 'Pilihan' asli memiliki beberapa keunggulan kinerja, aksesibilitas, dan kegunaan sehingga menggunakan elemen pilih asli di dalam 'bidang bentuk-mat' adalah fitur baru di Angular 7.0.
  6. Elemen sudut: Perubahan kecil tetapi baru di Angular 7
     “ Elemen Sudut sekarang mendukung proyeksi konten menggunakan standar web untuk elemen khusus .” — Inilah yang dikatakan Stephen Fluin, Angular.
  7. Bekerja dengan mitra: Tim Angular telah bekerja untuk bermitra dengan proyek komunitas yang telah diluncurkan baru-baru ini salah satunya adalah Konsol Angular. Konsol Sudut adalah antarmuka pengguna untuk Angular CLI. Ini bagus untuk pemula dan ahli karena jauh lebih mudah daripada petunjuknya. Ada versi UI yang berbeda untuk Windows dan Mac OS .
Panduan Pemula untuk Arsitektur MVC di Java

Sebagian besar perubahan di Angular 7.0 adalah pada peningkatan kinerja dan perbaikan bug. Oleh karena itu, ini adalah versi teraman hingga saat ini dan migrasi dari versi sebelumnya sangatlah mudah. Ivy adalah mesin rendering baru yang akan datang yang sedang dikerjakan oleh tim Angular. Sampai saat itu, mari kita tunggu dan lihat. Terus Belajar !

Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan perangkat lunak tumpukan penuh, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak – Spesialisasi dalam Pengembangan Full Stack yang dirancang untuk profesional yang bekerja dan menawarkan 500+ jam pelatihan yang ketat, 9+ proyek dan tugas, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.

Menjadi Pengembang Tumpukan Penuh

Terapkan untuk Sertifikasi PG terkait Pekerjaan upGrad dalam Rekayasa Perangkat Lunak