AngularJS是一個javascript框架，通過AngularJS這個類庫可以實現(xiàn)目前比較流行的單頁面應(yīng)用，AngularJS還具有雙向數(shù)據(jù)綁定的特點(diǎn)，更加適應(yīng)頁面動態(tài)內(nèi)容。
所謂單頁面應(yīng)用就是在同一個頁面動態(tài)加載不同的內(nèi)容，而這里的“跳轉(zhuǎn)”可以理解為是局部頁面的跳轉(zhuǎn)。
AngularJS是通過改變location地址來實現(xiàn)加載不同的頁面內(nèi)容到指定位置，下面是一個簡單應(yīng)用AngularJS路由來實現(xiàn)頁面“跳轉(zhuǎn)”的實例：
使用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時加載的內(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>
上面提到，每個頁面都會有一個獨(dú)立的控制器，加載頁面的同時會執(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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
