Routing AngularJS
Dalam bab ini kami akan memperkenalkan perutean AngularJS kepada Anda.
Routing AngularJS memungkinkan kita untuk mengakses konten yang berbeda melalui URL yang berbeda.
AngularJS dapat mewujudkan aplikasi web halaman tunggal (SPA) untuk multi-views.
Biasanya URL kami adalah http://runoob.com/first/page, tetapi dalam satu halaman aplikasi web, AngularJS diimplementasikan melalui tag #+, misalnya:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Ketika kami mengklik salah satu tautan di atas, alamat yang kami minta ke server adalah sama (http://runoob.com/). Karena konten setelah nomor # akan diabaikan oleh browser saat memintanya ke server. Jadi kita perlu menerapkan fungsi konten setelah nomor # pada klien. Routing AngularJS membantu kita membedakan halaman logis yang berbeda dan mengikat halaman yang berbeda dengan pengontrol yang sesuai melalui tag #+.
Pada gambar di atas, kita dapat melihat bahwa dua URL dibuat: /Showorders dan /AddNeworder. Setiap URL memiliki tampilan dan pengontrol yang sesuai.
Selanjutnya, mari kita lihat contoh sederhana:
<html> <head> <meta charset = "UTF-8"> <itement> Contoh perutean AngularJS- Tutorial Novice </iteme> </head> <body ng-app = 'routingDemoapp'> <h2> aplikasi routing AngularJS </h2> <ul> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <Li> <Li> <a hRef = "#/" href = "#/komputer"> Komputer </a> </li> <li> <a href = "#/printer"> cetak </a> </li> <li> <a href = "#/blabla"> </a> </li> </ul> <v ng-view> </div> </a> </li> </ul> <Div ng-view> </div> </dr> src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.jse.jse.js" </scriple> </script> </crips> </script> </.scripe> </.scripe ”</script> </scripe> </script> </.spripe> scripping> </cripe> </scripter> </.scripe/scripter> </.scripe/script> </13/angular-route.js” ” angular.module ('routingDemoapp', ['ngroute']) .config (['$ routeProvider', function ($ routeProvider) {$ routeProvider .when ('/', {template: 'ini adalah homepage'}). Komputer ('/'/{Template: 'This is the HomePage'}) .when ('/computers', {Template: 'This is the HomePage'}) .when ('/computers', {Template: 'This is the HomePage'}) .WHEN ('/Computers' .shen ('/printers', {template: 'Ini adalah halaman printer'}) .otherwise ({redirectto: '/'}); </script> </body> </html>Hasil Menjalankan:
Aplikasi Routing AngularJS
Analisis contoh:
1. Muat file JS yang mengimplementasikan perutean: Angular-route.js.
2. Ini berisi modul NGROUTE sebagai modul ketergantungan dari modul aplikasi utama.
Angular.Module ('RoutingDemoApp', ['ngroute'])
3. Gunakan arahan NGVIEW.
<Div ng-view> </div>
Konten HTML dalam DIV ini akan berubah sesuai dengan perubahan rute.
Konfigurasikan $ RouteProvider, AngularJS $ RouteProvider digunakan untuk menentukan aturan perutean.
Module.config (['$ routeProvider', function ($ routeProvider) {$ routeProvider. WHEN ('/', {template: 'ini adalah beranda'}) .when ('/cetakan', {template: 'ini adalah halaman klasifikasi komputer'}). when ('/cetakan', ini adalah halaman klasifikasi komputer '}). .otherwise ({redirectto: '/'});}]);Fungsi konfigurasi modul AngularJS digunakan untuk mengonfigurasi aturan perutean. Dengan menggunakan configAPI, kami meminta $ routeProvider disuntikkan ke fungsi konfigurasi kami dan untuk menentukan aturan perutean kami menggunakan $ routeProvider.whenapi.
$ routeProvider memberi kita fungsi When (Path, Object) & sebaliknya (objek) mendefinisikan semua rute secara berurutan, dan fungsi berisi dua parameter:
Parameter pertama adalah aturan URL atau URL reguler.
Parameter kedua adalah objek konfigurasi perutean.
Objek Pengaturan Routing
Routing AngularJS juga dapat diimplementasikan melalui templat yang berbeda.
Parameter pertama dari $ routeProvider. Ketika fungsi adalah aturan URL atau URL reguler, dan parameter kedua adalah objek konfigurasi routing.
Aturan Sintaks untuk Objek Konfigurasi Routing adalah sebagai berikut:
$ routeProvider.when (url, {template: string, templateUrl: string, controller: string, function atau array, controlleras: string, redirectto: string, function, resolve: objek <key, function>});Deskripsi Parameter:
templat:
Jika kita hanya perlu memasukkan konten HTML sederhana ke dalam NG-View, gunakan parameter ini:
.shen ('/computers', {template: 'Ini adalah halaman klasifikasi komputer'})
TemplateUrl:
Jika kita hanya perlu memasukkan file template HTML di NG-View, gunakan parameter ini:
$ routeProvider.when ('/computer', {templateUrl: 'view/computers.html',});Kode di atas akan mendapatkan konten file view/computers.html dari server dan memasukkannya ke dalam ng-view.
Pengontrol:
Jenis fungsi, string atau array, fungsi pengontrol yang dieksekusi pada template saat ini menghasilkan ruang lingkup baru.
Controlleras:
Jenis String, tentukan alias untuk pengontrol.
Redirectto:
Alamat pengalihan.
menyelesaikan:
Menentukan modul lain yang bergantung pada pengontrol saat ini.
Contoh
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </script> <script type = "text/javascript"> angular.module ('Ngrouteexample', ['Ngroute']). $ route;}). Controller ('Tentang Kontrol', fungsi ($ scope) {$ scope. $ route = $ route;}). config (function ($ routeProvider) {$ routeProvider. when ('/home', {templateUrl: 'embedded.home.html', {{{{{{{{{homec (home) TemplateUrl: 'embedded.about.html', controller: 'tentang Controller'}). </h1> </script> <script type="text/ng-template" id="embedded.about.html"> <h1> About </h1> </script> <div> <div id="navigation"> <a href="#/home">Home</a> <a href="#/about">About</a> </div> <div ng-view=""> </div> </div> </div> </body> </html>Hasil Menjalankan:
Homeabout
Rumah
Di atas adalah kumpulan informasi tentang perutean AngularJS. Saya berharap bahwa siswa yang dapat membantu pemrograman AngularJS.