【揭秘AngularJS路由的藝術】輕鬆掌握頁面跳轉與數據共享技巧

最佳答案

引言

AngularJS作為一款風行的JavaScript框架，在單頁面利用（SPA）的開辟中扮演側重要角色。其中，AngularJS的路由機制是實現頁面跳轉跟數據共享的關鍵。本文將深刻探究AngularJS路由的藝術，幫助開辟者輕鬆控制頁面跳轉與數據共享技能。

AngularJS路由基本

1. 路由簡介

AngularJS路由機制是由ngRoute模塊供給，它容許我們將視圖剖析成規劃跟模板視圖，根據URL變更靜態地將模板視圖載入到規劃中，從而實現單頁面利用的頁面跳轉功能。

2. URL與Hash片段

在單頁WEB利用的URL中增加了#號，#號代表著網頁的一個地位，其左邊的全部內容就是用來標識該地位的標識符。#號及前面的內容稱為URL中的hash片段，它們都不會發送到效勞端。

3. 路由利用

引入文件並注入依附

因為從1.2版本開端，AngularJS曾經將ngRoutes從核心代碼中剝離出來成為獨破的模塊。因此，我們須要安裝並在模塊申明中注入對ngRoute的依附，才幹在AngularJS利用中正常地利用路由功能。

<script src="angular-route.min.js"></script>
var app = angular.module("myApp", ['ngRoute']);

創建一個規劃模板

創建規劃模板是為了告訴AngularJS應當將規劃襯著到那邊。經由過程ng-view指令，我們可能正確地指定模板視圖在DOM中的襯著地位。

<div ng-app="myApp">
  <a ng-href="#/music">音樂</a>
  <a ng-href="#/movie">電影</a>
  <div ng-view></div>
</div>

頁面跳轉與數據共享

1. 基於ui-router的頁面跳轉傳參

在AngularJS的app.js頂用ui-router定義路由，比方現在有兩個頁面，一個頁面（producers.html）放置了多個producers，點擊其中一個目標，頁面跳轉到對應的producer頁，同時將producerId這個參數傳早年。

.state('producers',
  url: '/producers',
  templateUrl: 'views/producers.html',
  controller: 'ProducersCtrl'
)
.state('producer',
  url: '/producer/:producerId',
  templateUrl: 'views/producer.html',
  controller: 'ProducerCtrl'
)

在producers.html中，定義點擊變亂，比方ng-click=“toProducer(producerId)“，在ProducersCtrl中，定義頁面跳轉函數（利用ui-router的state.go介面）：

.controller('ProducersCtrl', function (scope, state) {
  scope.toProducer = function (producerId) {
    state.go('producer', {producerId: producerId});
  };
});

在ProducerCtrl中，經由過程ui-router的stateParams獲取轉達的參數：

.controller('ProducerCtrl', function ($scope, $stateParams) {
  $scope.producerId = $stateParams.producerId;
});

2. 利用ngRoute停止頁面跳轉

利用ngRoute停止頁面跳轉時，可能經由過程routeProvider效勞設置路由映射。

var app = angular.module("myApp", ['ngRoute']);

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'homeCtrl',
      templateUrl: '../view/home.html'
    })
    .when('/reservation', {
      controller: 'reservationCtrl',
      templateUrl: '../view/reservation.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

在頁面中，寫入URL跳轉的按鈕鏈接以及ng-view標籤：

<div ng-app="myApp">
  <a href="#/home">首頁</a>
  <a href="#/reservation">預訂</a>
  <div ng-view></div>
</div>

總結

AngularJS路由機製為開辟者供給了富強的頁面跳轉跟數據共享功能。經由過程本文的介紹，信賴開辟者曾經對AngularJS路由有了更深刻的懂得。在現實項目中，機動應用路由機制，可能輕鬆實現頁面跳轉與數據共享，進步開辟效力。