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
Mari pertama -tama lihat metode properti objek konfigurasi $ routeProvider:
Routing mengatur resolusi objek:
$routeProvider.when(url(routing name), { template: string(template prompt string), templateUrl: string(template path URL), controller: string, function or array (create the controller in the current template and generate a new $scope scope), controllerAs: string(controller alias), redirectTo: string, function(redirect address), resolve: object<key, function> (modul bahwa rute saat ini tergantung pada)});Langkah Umum untuk Menerapkan Routing:
Langkah 1: Impor Modul NGROUTE
<type skrip = "Text/JavaScript" src = "js/angular-route.min.js"> </script>
Langkah 2: Gunakan NGROUTE di Modul Aplikasi
angular.module ("routeApp", ["ngroute"])
Langkah 3: Gunakan perintah NG-View
<Div ng-view ng-controller = 'defaultctrl'> </div>
Langkah 4: Konfigurasikan $ RouteProvider Routing Rules
.... config (['$ routeProvider', function ($ routeProvider) {$ routeProvider .when ('/home', {templateUrl: 'home.tpl.html', controller: 'homectrl',}) .when ('/computer', {templateurl: 'computer',} ('/computer', {templateurl: 'computer.html' (','/computer. 'phone.html',}) .shen ('/lainnya', {templateUrl: 'Other.tpl.html', controller: 'Otherctrl',})}]) ...Langkah 5: Gunakan routing melalui hyperlinks
<ul> <li> <a href = "#/home"> home </a> </li> <li> <a href = "#/komputer"> komputer </a> </li> <li> <a href = "#/phone"> Ponsel </a> </li> <li> <a href = "#/lainnya"> </a> </li> <li> <a href = "#/lainnya"> </a> </a> </li> <a href = "#/lain"> lain> </a> </li> <li> <a href = "#/lainnya"> Other </a> </a> </li> <a href = "#/lainnya"> Other </a> </A>
Kasus Lengkap:
1 halaman rute.html
<html> <head> <meta charset = "utf-8"> <itement> instance routing angularjs </iteme> <tautan rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> </head> <lo body ng-app = 'routeApp'> <uL.css "> </head> <body ng-app = 'routeApp'> <css"> </head> <lo Body ng-app = 'routeApp'> href = "#/home"> home </a> </li> <li> <a href = "#/komputer"> komputer </a> </li> <li> <a href = "#/phone"> mobile </a> </li> <a href = "#/lainnya"> </a> </li> </Uluew = "#/lainnya"> </a> </Li> </ULV = "#/Other"> </a> </Li> </ULView = "#/Other" ng-controller = 'defaultctrl'> </div> <script type = "text/javascript" src = "js/jQuery.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap.min.min.js"> </script> script> scrip = " src = "js/angular.min.js"> </script> <script type = "text/javascript" src = "js/angular-mell-min.min.js"> </script> <script type = "text/ng-template" id = "home.tpl.html"> <h1> {home {home.tpl.tpl.tml "> </h1 {home {home {home. type = "text/ng-template" id = "Other.tpl.html"> <h1> {{data}} </h1> </script> <script type = "text/javascript"> routeprule ("routeprov", "ngroute"]. .when ('/home', {templateUrl: 'home.tpl.html', controller: 'homectrl',}) .when ('/computer', {templateUrl: 'computer.html',}) .when ('/phone', {templateUrl: 'phone.html', {{', {{', {{{', 'Other.tpl.html', controller: 'Otherctrl',})}]) .controller ('defaultctrl', function ($ scope) {$ scope.computers = [{{id: 0, nama: "ACR", Kategori: "Test", Price: 1.25}, {id: 1, name: "Acr", Category: "Test", Price: 1.25}, {ID: 1, NAME: " ID: 2, Nama: "Apple", Kategori: "Tes", Harga: 4.25}]; $ scope.phones = [{id: 0, nama: "Samsung", Kategori: "Tes", Harga: 1.25}, {ID: 1, "Glory", Kategori: "Test", Harga: 2.45 {"ID:" ID: " }];}) .controller ("homectrl", function ($ scope, $ route) {$ scope. $ route = $ route; $ scope.data = "home home";}) .controller ("OtherCtrl", function ($ scope, $ route) {$ scope. $ route = $ route; $ clipt. </html>2.Computer.html halaman
<div> <ableb> <Thead> <tr> <t th> </t th> <th> kategori </th> <TH> harga </t> <t th> {{data}} </t th> </tr> </thead> <t item.name {ttr-repeat = "di komputer"> <T tdbody> <td> {{item.category}} </td> <td> {{item.price | Mata uang}} </td> <td> <tombol ng-klik = "deleteProduct (item)"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editeCreateProduct (item)"> Edit </a> </a-click = "editePrice (item)"> edit </a> </a> </a-click = " </tr> </tbody> </boable> <viv> <tombol ng-click = "EditorCreateProduct ()"> Tambahkan </a> </div> </div>3.Phone.html halaman
<div> <ablew> <Thead> <tr> <Th> nama </t th> <th> kategori </th> <Th> harga </t> <tm <td> {{item.category}} </td> <td> {{item.price | Mata uang}} </td> <td> <tombol ng-klik = "deleteProduct (item)"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editeCreateProduct (item)"> Edit </a> </a-click = "editePrice (item)"> edit </a> </a> </a-click = " </tr> </tbody> </boable> <viv> <tombol ng-click = "EditorCreateProduct ()"> Tambahkan </a> </div> </div>Klik Halaman Beranda
Klik "Komputer"
Klik "Mobile"
Klik lainnya
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.