AngularJS路由跳转

AngularJS是2个javascript框架,通过AngularJS那些类库能够达成近来可比盛行的单页面应用,AngularJS还具有双向数据绑定的特色,越发适应页面动态内容。

所谓单页面应用正是在同3个页面动态加载不相同的内容,而那里的“跳转”可以知道为是有个别页面包车型的士跳转。

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方法为点击事件试行钦赐函数方法。

 

转载自自己ITeye链接: http://xiaozhuang0706.iteye.com/blog/2263786

 

 

相关文章