penghalaan AngularJS


Dalam bab ini kami akan memperkenalkan penghalaan AngularJS kepada anda.

Penghalaan AngularJS membolehkan kami mengakses kandungan yang berbeza melalui URL yang berbeza.

Aplikasi web (SPA) halaman tunggal berbilang paparan boleh dilaksanakan melalui AngularJS.

Biasanya URL kami adalah dalam bentuk http://php.cn/first/page, tetapi dalam aplikasi web satu halaman AngularJS dilaksanakan melalui # + tag , Contohnya: 

http://php.cn/#/first
http://php.cn/#/second
http://php.cn/#/third

Apabila kami mengklik mana-mana pautan di atas, alamat yang diminta daripada pelayan adalah sama (http://php.cn/). Kerana kandungan selepas tanda # akan diabaikan oleh penyemak imbas apabila meminta pelayan. Jadi kita perlu melaksanakan fungsi kandungan selepas nombor # di sebelah pelanggan. Penghalaan AngularJS menggunakan # + tanda untuk membantu kami membezakan halaman logik yang berbeza dan mengikat halaman yang berbeza dengan pengawal yang sepadan.

angular-routing.png

Dalam grafik di atas, kita dapat melihat bahawa dua URL dicipta: /ShowOrders dan /AddNewOrder. Setiap URL mempunyai paparan dan pengawal yang sepadan.

Seterusnya mari kita lihat contoh mudah:

Instance

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS 路由实例 - 菜鸟教程</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
         
        <div ng-view></div>
        <script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
        <script src="//cdn.bootcss.com/angular.js/1.3.13/angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
     
     
    </body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Contoh analisis:

  • 1. Muatkan fail js yang melaksanakan penghalaan: angular-route.js.

  • 2. Mengandungi modul ngRoute sebagai modul bergantung kepada modul aplikasi utama. 

    angular.module('routingDemoApp',['ngRoute'])

  • 3. 

    <div ng-view></div>

    Kandungan HTML dalam div ini akan berubah mengikut perubahan penghalaan.

  • Konfigurasikan $routeProvider.AngularJS $routeProvider digunakan untuk menentukan peraturan penghalaan. 

    module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
}]);

    Fungsi konfigurasi modul AngularJS digunakan untuk mengkonfigurasi peraturan penghalaan. Dengan menggunakan configAPI, kami meminta $routeProvider disuntik ke dalam fungsi konfigurasi kami dan menggunakan $routeProvider.whenAPI untuk menentukan peraturan penghalaan kami.

    $routeProvider memberikan kami fungsi bila(laluan,objek) & sebaliknya(objek) untuk mentakrifkan semua laluan mengikut urutan Fungsi ini mengandungi dua parameter:

    • Parameter pertama ialah peraturan biasa URL atau URL.

    • Parameter kedua ialah objek konfigurasi penghalaan.

    Objek tetapan laluan

    Penghalaan AngularJS juga boleh dilaksanakan melalui templat yang berbeza.

  • Parameter pertama fungsi $routeProvider.when ialah peraturan biasa URL atau URL dan parameter kedua ialah objek konfigurasi penghalaan.


    • Peraturan sintaks objek konfigurasi penghalaan adalah seperti berikut: 

    $routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

    Penerangan parameter:

    • templat:

      Jika kita hanya perlu memasukkan kandungan HTML ringkas dalam ng-view, gunakan parameter ini: 

      .when('/computers',{template:'这是电脑分类页面'})


    • templateUrl:

      Jika kita hanya perlu memasukkan fail templat HTML dalam ng-view, kemudian gunakan parameter ini: 

      $routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

      Di atas Kod akan mendapat kandungan fail views/computers.html daripada pelayan dan memasukkannya ke dalam ng-view.


    • pengawal:

      fungsi, rentetan atau jenis tatasusunan, dalam semasa Fungsi pengawal yang dilaksanakan pada templat menjana skop baharu.


    • controllerAs:

      jenis rentetan, nyatakan alias untuk pengawal .


    • lencongkanKe:

      Alamat diubah hala.


    • selesaikan:

      Nyatakan modul lain yang bergantung pada pengawal semasa .


    • Instance

      <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'])
.controller('HomeController', function ($scope) { $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </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>
</body>
</html>

      Instance berjalan»

      Klik butang "Jalankan Instance" untuk melihat contoh dalam talian