AngularJS路由实现页面跳转实例


Posted in Javascript onMarch 03, 2017

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

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue2笔记 — vue-router路由懒加载的实现
Mar 03 #Javascript
求js数组的最大值和最小值的四种方法
Mar 03 #Javascript
jQuery控制元素隐藏和显示
Mar 03 #Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 #Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 #Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 #Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 #Javascript
You might like
三个类概括PHP的五种设计模式
2012/09/05 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python time模块用法实例详解
2014/09/11 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
wxPython实现画图板
2020/08/27 Python
python Gabor滤波器讲解
2020/10/26 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
几个MySql的面试题
2013/04/22 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
创业大赛策划书
2014/03/01 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
区域销售大会开幕词
2016/03/04 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android