欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS路由实现页面跳转实例

程序员文章站 2022-04-29 08:41:29
angularjs是一个javascript框架，通过angularjs这个类库可以实现目前比较流行的单页面应用，angularjs还具有双向数据绑定的特点，更加适应页面动...

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方法为点击事件执行指定函数方法。

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 苹果11如何查看被拦截短信?

下一篇： 精酿啤酒吧失败案例（精酿啤酒卖不出去的原因在这里）

推荐阅读