溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

AngularJS路由實(shí)現(xiàn)頁面跳轉(zhuǎn)實(shí)例

發(fā)布時(shí)間：2020-09-25 00:22:53 來源：腳本之家 閱讀：140 作者：北海肥貓 欄目：web開發(fā)

AngularJS是一個(gè)javascript框架，通過AngularJS這個(gè)類庫可以實(shí)現(xiàn)目前比較流行的單頁面應(yīng)用，AngularJS還具有雙向數(shù)據(jù)綁定的特點(diǎn)，更加適應(yīng)頁面動態(tài)內(nèi)容。

所謂單頁面應(yīng)用就是在同一個(gè)頁面動態(tài)加載不同的內(nèi)容，而這里的“跳轉(zhuǎn)”可以理解為是局部頁面的跳轉(zhuǎn)。

AngularJS是通過改變location地址來實(shí)現(xiàn)加載不同的頁面內(nèi)容到指定位置，下面是一個(gè)簡單應(yīng)用AngularJS路由來實(shí)現(xiàn)頁面“跳轉(zhuǎn)”的實(shí)例：

使用app.config來定義不同的location地址加載不同的頁面，并擁有獨(dú)立的控制器；

var app = angular.module('MyApp', ['ngRoute']);
  app.config(function ($routeProvider) {
   $routeProvider
    .when('/', {  // '/'表示頁面初始加載內(nèi)容；
     controller: 'homeCtrl', //控制器
     templateUrl: '../view/home.html' //顯示的內(nèi)容
    })
    .when('/reservation',{  //表示地址結(jié)尾為reservation時(shí)加載的內(nèi)容；
     controller: 'reservationCtrl',  
     templateUrl: '../view/reservation.html'
    })
  });

 使用ng-view來定義動態(tài)內(nèi)容加載的位置；

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
  <head>
    <script src="../angular.js"></script>
    <script src="../angular-route.min.js"></script>
  
    <script src="../js/main.js"></script>
    <script src="../js/homeController.js"></script>
    <script src="../js/reservationController.js"></script>

    <meta charset="UTF-8">
    <title></title>
  </head>
<body>
<div ng-view>
<!-- 此處為動態(tài)加載區(qū)域 -->
</div>
</body>
</html>

 上面提到，每個(gè)頁面都會有一個(gè)獨(dú)立的控制器，加載頁面的同時(shí)會執(zhí)行控制器中的函數(shù)；

app.controller('homeCtrl',function($scope,$location){  //頁面的控制函數(shù)；
  $scope.goToUrl=function(path) {    //此方法可以改變location地址；
    $location.path(path);
  }
});

  上述控制器所對應(yīng)的html頁面為：

<div id="header">
  <p>訂餐</p>
</div>
<div class="body">
  <button ng-click="goToUrl('/reservation')" class="bigButton">幫訂餐</button>
  <button ng-click="goToUrl('/showList')" class="bigButton">看訂單</button>
</div>

ng-click方法為點(diǎn)擊事件執(zhí)行指定函數(shù)方法。

 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手