AngularJS路由实现页面跳转实例

2019-11-19 17:19:44

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：JS html时钟制作代码分享

下一篇：vue2笔记 ― vue-router路由懒加载的实现