溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
AngularJS是一個javascript框架，通過AngularJS這個類庫可以實現目前比較流行的單頁面應用，AngularJS還具有雙向數據綁定的特點，更加適應頁面動態內容。
所謂單頁面應用就是在同一個頁面動態加載不同的內容，而這里的“跳轉”可以理解為是局部頁面的跳轉。
AngularJS是通過改變location地址來實現加載不同的頁面內容到指定位置，下面是一個簡單應用AngularJS路由來實現頁面“跳轉”的實例：
使用app.config來定義不同的location地址加載不同的頁面，并擁有獨立的控制器；
var app = angular.module('MyApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', { // '/'表示頁面初始加載內容；
controller: 'homeCtrl', //控制器
templateUrl: '../view/home.html' //顯示的內容
})
.when('/reservation',{ //表示地址結尾為reservation時加載的內容；
controller: 'reservationCtrl',
templateUrl: '../view/reservation.html'
})
});
使用ng-view來定義動態內容加載的位置；
<!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>
<!-- 此處為動態加載區域 -->
</div>
</body>
</html>
上面提到，每個頁面都會有一個獨立的控制器，加載頁面的同時會執行控制器中的函數；
app.controller('homeCtrl',function($scope,$location){ //頁面的控制函數；
$scope.goToUrl=function(path) { //此方法可以改變location地址；
$location.path(path);
}
});
上述控制器所對應的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方法為點擊事件執行指定函數方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
