Teknik AngularJS

Mulai Bekerja dengan AngularJS

AngularJS adalah framework Javascript MVC yang dibuat oleh Google untuk membangun aplikasi web yang dirancang dengan baik dan mudah dikelola.

AngularJS mengambil pendekatan lain. Ini mencoba untuk meminimalkan ketidakcocokan impedansi antara HTML sentris dokumen dan aplikasi apa yang dibutuhkan dengan membuat konstruksi HTML baru. AngularJS mengajarkan sintaks baru browser melalui sebuah konstruksi yang kita sebut arahan. Contohnya meliputi:

Pengikatan data, seperti pada {{}}.
Struktur kontrol DOM untuk mengulang, menunjukkan dan menyembunyikan fragmen DOM.
Dukungan untuk bentuk dan form validasi.
Melampirkan perilaku baru ke elemen DOM, seperti penanganan acara DOM.
Pengelompokan HTML menjadi komponen yang dapat digunakan kembali.

Mengapa AngularJS?

AngularJS adalah kerangka kerja MVC yang mendefinisikan banyak konsep untuk mengatur aplikasi web dengan benar. Aplikasi kita didefinisikan dengan modul yang bisa saling bergantung satu sama lain. Ini meningkatkan HTML dengan melampirkan arahan ke halaman Anda dengan atribut baru atau tag dan ekspresi untuk menentukan template yang sangat kuat secara langsung di HTML Anda. Ini juga merangkum perilaku aplikasi Anda di dalam pengendali yang diinstruksikan berkat suntikan ketergantungan. Berkat penggunaan injeksi ketergantungan, AngularJS membantu Anda menyusun dan menguji kode Javascript Anda dengan sangat mudah. Akhirnya, kode utilitas dapat dengan mudah dikenalkan menjadi layanan yang dapat disuntikkan ke pengendali Anda. Sekarang mari kita lihat lebih dekat semua fitur itu.

Fitur 1: Two Way Data-Binding

Pikirkan model Anda sebagai sumber tunggal kebenaran untuk aplikasi Anda. Model Anda adalah ke mana Anda pergi untuk membaca atau memperbarui apapun dalam aplikasi Anda.

Pengikatan data mungkin adalah fitur yang paling keren dan paling berguna di AngularJS. Ini akan menyelamatkan Anda dari menulis sejumlah besar kode boilerplate. Aplikasi web yang khas mungkin berisi hingga 80% basis kode, yang didedikasikan untuk melintasi, memanipulasi, dan mendengarkan DOM. Pengikatan data membuat kode ini hilang, jadi kita bisa fokus pada aplikasi kita.

Pikirkan model Anda sebagai sumber tunggal kebenaran untuk aplikasi Anda. Model Anda adalah ke mana Anda pergi untuk membaca atau memperbarui apapun dalam aplikasi Anda. Arahan pengikat data memberikan proyeksi model Anda ke tampilan aplikasi. Proyeksi ini mulus, dan terjadi tanpa usaha dari Anda.

Secara tradisional, ketika model berubah, pengembang bertanggung jawab memanipulasi elemen dan atribut DOM secara manual untuk mencerminkan perubahan ini. Ini adalah jalan dua arah. Dalam satu arah, perubahan model mendorong perubahan pada elemen DOM. Di sisi lain, perubahan elemen DOM mengharuskan perubahan pada model. Hal ini semakin diperumit oleh interaksi pengguna, karena pengembang kemudian bertanggung jawab untuk menafsirkan interaksi, menggabungkannya menjadi model, dan memperbarui tampilan. Ini adalah proses yang sangat manual dan tidak praktis, yang menjadi sulit dikendalikan, karena aplikasi tumbuh dalam ukuran dan kompleksitas.

Pasti ada cara yang lebih baik! Pengambilan data two-way AngularJS menangani sinkronisasi antara DOM dan model, dan sebaliknya.

Berikut adalah contoh sederhana, yang menunjukkan bagaimana cara mengikat nilai input ke sebuah

elemen.

Nama:

Masukkan nama di sini

Hallo nama kamu}}!

Ini sangat mudah diatur, dan hampir ajaib ...

Fitur 2: Template

Penting untuk disadari bahwa bagaimanapun juga, AngularJS memanipulasi template sebagai string. Ini semua DOM browser.

Di AngularJS, template hanya biasa-HTML biasa. Kosa kata HTML diperluas, berisi petunjuk bagaimana model diproyeksikan ke tampilan.

Template HTML diurai oleh browser ke DOM. DOM kemudian menjadi masukan ke kompiler AngularJS. AngularJS melintasi template DOM untuk memberi instruksi, yang disebut arahan. Secara kolektif, arahan bertanggung jawab untuk menyiapkan pengikatan data untuk tampilan aplikasi Anda.

Penting untuk disadari bahwa bagaimanapun juga AngularJS memanipulasi template sebagai string. Masukan ke AngularJS adalah DOM browser dan bukan string HTML. Bindings data adalah transformasi DOM, bukan gabungan string atau perubahan HTML dalam. Menggunakan DOM sebagai input, bukan string, adalah diferensiasi terbesar yang dimiliki AngularJS dari kerangka kerja saudaranya. Menggunakan DOM adalah apa yang memungkinkan Anda untuk memperluas kosa kata petunjuk dan membuat arahan Anda sendiri, atau bahkan membuat mereka menjadi komponen yang dapat digunakan kembali!

Salah satu keuntungan terbesar dari pendekatan ini adalah menciptakan alur kerja yang ketat antara desainer dan pengembang. Desainer dapat menandai HTML mereka sebagaimana biasanya, dan kemudian pengembang mengambil tongkat dan kait dalam fungsionalitas, melalui bindings dengan sedikit usaha.

Berikut adalah contoh di mana saya menggunakan perintah ng-repeat untuk melompati gambar array dan mengisi apa dasarnya template img.

fungsi AlbumCtrl ($ scope) {
scope.images = [
{"thumbnail": "img / image_01.png", "description": "Image 01 description"},
{"thumbnail": "img / image_02.png", "description": "Image 02 description"},
{"thumbnail":"img / image_03.png", "description": "Image 03 description"},
{"thumbnail": "img / image_04.png", "description": "Image 04 description"},
{"thumbnail": "img / image_05.png", "description": "Image 05 description"}
];
}

{{uraian gambar; kesan}}

Hal ini juga layak disebut, sebagai catatan, bahwa AngularJS tidak memaksa Anda untuk mempelajari sintaks baru atau mengekstrak template Anda dari aplikasi Anda.

Fitur 3: MVC

AngularJS menggabungkan prinsip-prinsip dasar di balik pola desain perangkat lunak MVC asli ke dalam bagaimana ia membangun aplikasi web sisi klien.

Pola MVC atau Model-View-Controller berarti banyak hal yang berbeda bagi orang yang berbeda. AngularJS tidak menerapkan MVC dalam pengertian tradisional, namun lebih mirip dengan MVVM (Model-View-ViewModel).

Model

Modelnya hanyalah data dalam aplikasi. Modelnya hanyalah objek JavaScript biasa. Tidak perlu mewarisi dari kelas kerangka kerja, membungkusnya dengan objek proxy, atau menggunakan metode pengambil / penyetel khusus untuk mengaksesnya. Fakta bahwa kita berurusan dengan vanila JavaScript adalah fitur yang sangat bagus, yang mengurangi aplikasi boilerplate.

ViewModel
Viewmodel adalah objek yang menyediakan data dan metode khusus untuk mempertahankan tampilan tertentu.

Viewmodel adalah objek $ scope yang hidup dalam aplikasi AngularJS. $ scope hanyalah objek JavaScript sederhana dengan API kecil yang dirancang untuk mendeteksi dan menyiarkan perubahan ke keadaannya.

Pengendali
Pengontrol bertanggung jawab untuk menetapkan keadaan awal dan menambah $ scope dengan metode untuk mengendalikan perilaku. Perlu dicatat bahwa pengendali tidak menyimpan keadaan dan tidak berinteraksi dengan layanan jarak jauh.

Pandangan
Tampilannya adalah HTML yang ada setelah AngularJS telah mengurai dan menyusun HTML untuk menyertakan markup dan binding yang diberikan.

Divisi ini menciptakan fondasi yang kokoh bagi arsitek aplikasi Anda. The $ scope memiliki referensi ke data, controller mendefinisikan perilaku, dan tampilan menangani tata letak dan menyerahkan interaksi ke controller untuk meresponsnya dengan tepat.

Fitur 4: Ketergantungan Injeksi

AngularJS memiliki subsistem injeksi dependensi built-in yang membantu pengembang dengan membuat aplikasi lebih mudah dikembangkan, dipahami, dan diuji.

Ketergantungan Injeksi (DI) memungkinkan Anda untuk meminta ketergantungan Anda, daripada harus mencari mereka atau membuat mereka sendiri. Anggap saja itu sebagai cara untuk mengatakan "Hei aku butuh X ', dan DI bertanggung jawab untuk menciptakan dan menyediakannya untukmu.

Untuk mendapatkan akses ke layanan AngularJS inti, ini hanya masalah menambahkan layanan itu sebagai parameter; AngularJS akan mendeteksi bahwa Anda memerlukan layanan tersebut dan memberikan sebuah contoh untuk Anda.

fungsi EditCtrl ($ scope, $ location, $ routeParams) {
// Sesuatu yang pintar disini ...
}
Anda juga dapat menentukan layanan kustom Anda sendiri dan membuat mereka tersedia untuk injeksi juga.

sudut.
modul ('MyServiceModule', []).
pabrik ('beri tahu', ['$ window', fungsi (menang) {
fungsi kembali (msg) {
win.alert (msg);
};
}]);

fungsi myController (scope, notifyService) {
scope.callNotify = function (msg) {
notifyService (msg);
};
}

myController. $ menyuntikkan = ['$ scope', 'notify'];

Fitur 5: Petunjuk

Petunjuk adalah fitur favorit pribadi saya dari AngularJS. Pernahkah Anda berharap bahwa browser Anda akan melakukan trik baru untuk Anda? Nah, sekarang bisa! Ini adalah salah satu bagian favorit saya dari AngularJS. Hal ini juga mungkin merupakan aspek yang paling menantang dari AngularJS.

Arahan dapat digunakan untuk membuat tag HTML khusus yang berfungsi sebagai widget khusus baru. Mereka juga dapat digunakan untuk "menghias" elemen dengan perilaku dan memanipulasi atribut DOM dengan cara yang menarik.

Berikut adalah contoh sederhana dari sebuah arahan yang mendengarkan sebuah acara dan mengupdate $ scope-nya.

myModule.directive ('myComponent', function (mySharedService) {
kembali {
membatasi: 'E',
controller: function ($ scope, $ attrs, mySharedService) {
$ scope $ on ('handleBroadcast', function () {
$ scope.message = 'Directive:' + mySharedService.message;
});
},
ganti: benar,
template: '
'
};
});

Kemudian, Anda bisa menggunakan perintah khusus ini, seperti biasa.

Membuat aplikasi Anda sebagai komposisi komponen diskrit membuatnya sangat mudah untuk menambahkan, memperbarui atau menghapus fungsionalitas sesuai kebutuhan.

kita akan membahas di sini tentang bagaimana mengatur perpustakaan AngularJS untuk digunakan dalam pengembangan aplikasi web. Kami juga akan mempelajari struktur direktori dan isinya secara singkat.

Bila Anda membuka link https://angularjs.org/, Anda akan melihat ada dua pilihan untuk mendownload perpustakaan AngularJS -

AngularJS Download
Lihat di GitHub - Klik tombol ini untuk membuka GitHub dan mendapatkan semua skrip terbaru.

Download AngularJS 1 - Atau klik tombol ini, layar seperti di bawah ini akan terlihat -

AngularJS Download
Layar ini memberikan berbagai pilihan penggunaan Angular JS sebagai berikut -

Mengunduh dan hosting file secara lokal

Ada dua pilihan berbeda warisan dan terbaru. Nama itu sendiri bersifat deskriptif. legacy memiliki versi kurang dari 1.2.x dan yang terbaru memiliki versi 1.5.x.

Kita juga bisa pergi dengan versi minified, uncompressed atau zipped.

Akses CDN - Anda juga memiliki akses ke CDN. CDN akan memberi Anda akses ke seluruh dunia ke pusat data regional yang dalam hal ini, host Google. Ini berarti dengan menggunakan CDN memindahkan tanggung jawab untuk hosting file dari server Anda sendiri ke rangkaian yang eksternal. Ini juga menawarkan keuntungan jika pengunjung ke halaman web Anda telah mendownload salinan AngularJS dari CDN yang sama, tidak perlu diunduh ulang.

Coba angularJS 2 yang baru - Klik tombol ini untuk mendownload versi Angular JS beta 2. Versi ini sangat cepat, mobile didukung dan fleksibel dibandingkan dengan warisan dan

terbaru dari AngularJS 1

Kami menggunakan versi CDN dari perpustakaan selama tutorial ini.

Contoh
Sekarang mari kita tuliskan contoh sederhana menggunakan perpustakaan AngularJS. Mari kita buat file HTML myfirstexample.HTML seperti di bawah ini -

Selamat datang {{helloTo.title}} ke dunia Tutorialspoint!

Bagian berikut menjelaskan kode di atas secara rinci -

Sertakan AngularJS

Kami telah menyertakan file JavaScript AngularJS di halaman HTML sehingga kami dapat menggunakan AngularJS -

Jika Anda ingin memperbarui versi Angular JS terbaru, gunakan sumber skrip berikut atau lihat versi AngularJS terbaru di situs resmi mereka. Arahkan ke aplikasi AngularJS Selanjutnya, kami memberi tahu bagian HTML apa yang berisi aplikasi AngularJS. Ini dilakukan dengan menambahkan atribut ng-app ke elemen HTML akar aplikasi AngularJS. Anda bisa menambahkannya ke elemen HTML atau elemen tubuh seperti gambar di bawah ini -

Melihat
Pandangan adalah bagian ini -

Selamat datang {{helloTo.title}} ke dunia Tutorialspoint!

ng-controller memberitahu AngularJS kontroler apa yang akan digunakan dengan tampilan ini. helloTo.title memberitahu AngularJS untuk menulis nilai "model" yang dinamai helloTo.title ke HTML pada saat ini.
lokasi

Pengontrol
Bagian pengontrolnya adalah -

Kode ini mendaftarkan fungsi controller bernama HelloController pada modul sudut yang bernama myapp. Kami akan mempelajari lebih lanjut tentang modul dan kontroler di bab masing-masing. Fungsi kontroler terdaftar dalam sudut melalui pemanggilan fungsi angular.module (...) .controller (...).

Parameter $ scope yang dilewatkan ke fungsi controller adalah modelnya. Fungsi kontroler menambahkan objek helloTo JavaScript, dan pada objek itu ia menambahkan bidang judul.

Eksekusi
Simpan kode di atas sebagai myfirstexample.HTML dan buka di browser manapun. Anda akan melihat sebuah output seperti di bawah ini -

Selamat Datang AngularJS ke dunia Tutorialspoint!
Saat halaman dimuat di browser, berikut hal-hal terjadi -

Dokumen HTML dimuat ke browser, dan dievaluasi oleh browser. Berkas JavaScript AngularJS dimuat, objek global sudut dibuat. Selanjutnya, JavaScript yang register fungsi controller dijalankan.

Selanjutnya AngularJS memindai melalui HTML untuk mencari aplikasi dan tampilan AngularJS. Begitu tampilan berada, ia menghubungkan tampilan tersebut ke fungsi pengontrol yang sesuai.

Selanjutnya, AngularJS menjalankan fungsi kontroler. Ini kemudian menampilkan pandangan dengan data dari model yang dihuni oleh controller. Halaman ini sekarang sudah siap.

Sumber artikel: http://EzineArticles.com/expert/Olivia_Ava/2442003



Pasal Sumber: http://EzineArticles.com/9753297