Dalam bab ini, kita akan membahas cara mengatur perpustakaan AngularJS untuk digunakan dalam pengembangan aplikasi web. Kami juga akan memeriksa secara singkat struktur direktori dan isinya.
Ketika Anda membuka tautan https://angularjs.org/, Anda akan melihat bahwa ada dua opsi untuk mengunduh perpustakaan AngularJS:
Unduh GitHub - Klik tombol ini untuk pergi ke GitHub dan mendapatkan semua skrip terbaru.
Unduh - atau klik tombol ini dan Anda akan melihat:
Layar ini memberikan berbagai opsi untuk menggunakan sudut JS sebagai berikut:
Unduh dan file localhost
Ada dua opsi berbeda: Lama dan Terbaru. Nama itu sendiri adalah penjelasan diri. Versi lama sudah lebih rendah dari versi 1.2.x dan yang terbaru adalah versi 1.3.x.
Kami juga dapat menggunakan versi yang lebih banyak, tidak terkompresi atau terkompresi.
Akses CDN: Anda juga dapat menggunakan CDN. CDN akan memberikan akses ke dunia, dalam hal ini Google host pusat data regional. Ini berarti menggunakan CDN untuk tanggung jawab host seluler untuk file dari servernya sendiri ke berbagai faktor eksternal. Ini juga memberikan keuntungan bahwa jika pengunjung, halaman Anda telah mengunduh salinan AngularJS dari CDN yang sama, itu tidak harus diturunkan kembali.
Gunakan pustaka versi CDN dalam tutorial ini.
contoh
Sekarang mari kita tulis contoh sederhana menggunakan perpustakaan AngularJS. Buat file html myfirstexample.html sebagai berikut:
<! Doctype html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> </script> </head> <body ng-app = "My" my "> </script> </head> <body ng-apapp =" My "My" My "> </script> </head> <body ng-apapp =" My "My" My "> </script> </head> <body ng-app =" My "My" my "> </script> </head> <body NG-APP =" My "My" My "MYPROL"> </script> </ekomun <H2> Selamat datang {{Helloto.Title}} ke dunia yiibai! </h2> </div> <script> Angular.module ("myapp", []) .controller ("HelloController", fungsi ($ scope) {$ scope.helloto = {} "($" scope. </script> </body> </html>Bab berikut menjelaskan kode di atas secara detail:
Termasuk AngularJS
Kami sudah memasukkan halaman HTML dalam file JavaScript AngularJS, sehingga kami dapat menggunakan AngularJS:
<Head> <skrip src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </head>
Lihat versi terbaru AngularJS di situs web resminya.
Arahkan ke aplikasi AngularJS
Selanjutnya, mari kita beri tahu saya bahwa bagian HTML berisi aplikasi AngularJS. Ini dapat dilakukan dengan menempatkan atribut NG-APP ke dalam elemen HTML pada akar aplikasi AngularJS. Ini dapat ditambahkan ke elemen HTML atau elemen tubuh sebagai berikut:
<body ng-app = "myapp"> </body>
melihat
Bagian ini dari tampilan:
<Div ng-controller = "HelloController"> <H2> Selamat datang {{Helloto.Title}} ke dunia yiibai! </h2> </div>NG-Controller memberi tahu AngularJS apa pengontrol dan pandangan. Helloto.Title memberitahu AngularJS untuk menulis nilai "model" HTML yang disebut Helloto.Title dalam posisi ini.
Pengontrol
Bagian pengontrol adalah:
<script> angular.module ("myapp", []) .controller ("hellocontroller", function ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = "angularjs";}); </skrip>Kode ini pertama kali mendaftarkan fungsi bernama MyApp Angle Module Controller di HelloController. Kami akan belajar lebih banyak tentang modul dan pengontrol di bab masing -masing. Fungsi pengontrol terdaftar pada sudut melalui angular.module (...). Panggilan fungsi controller (...).
Model parameter $ SCOPE diteruskan ke fungsi pengontrol. Fungsi pengontrol menambahkan objek JavaScript Helloto, yang memiliki bidang judul ditambahkan ke dalamnya.
melaksanakan
Simpan kode di atas sebagai myfirstexample.htmlll buka di browser apa pun. Anda akan melihat output berikut:
Ketika halaman dimuat di browser, peristiwa berikut terjadi:
Dokumen HTML dimuat ke dalam browser dan dihitung oleh browser. File JavaScript AngularJS dimuat dan objek global sudut dibuat. Selanjutnya, fungsi pengontrol pendaftaran di JavaScript dieksekusi.
Pindai AngularJS melalui HTML untuk menemukan aplikasi dan tampilan AngularJS. Setelah tampilan ditemukan, ia menghubungkan tampilan ke fungsi pengontrol yang sesuai.
Selanjutnya, AngularJS menjalankan fungsi kontrol. Kemudian membuat tampilan data dengan model pengontrol berpenduduk. Halaman sekarang siap.