AngularJS路由跳轉

時間 2019-12-08

原文原文鏈接

AngularJS是一個javascript框架，經過AngularJS這個類庫能夠實現目前比較流行的單頁面應用，AngularJS還具備雙向數據綁定的特色，更加適應頁面動態內容。javascript

所謂單頁面應用就是在同一個頁面動態加載不一樣的內容，而這裏的「跳轉」能夠理解爲是局部頁面的跳轉。html

AngularJS是經過改變location地址來實現加載不一樣的頁面內容到指定位置，下面是一個簡單應用AngularJS路由來實現頁面「跳轉」的實例：java

使用app.config來定義不一樣的location地址加載不一樣的頁面，並擁有獨立的控制器；app

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方法爲點擊事件執行指定函數方法。