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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
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入门源程序
2006/10/09 PHP
php实现无限级分类
2014/12/24 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
js实现简单贪吃蛇游戏
2020/05/15 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
小小聊天室Python代码实现
2016/08/17 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
python时间time模块处理大全
2020/10/25 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
教师职称自我鉴定
2014/02/12 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
公积金具结保证书
2015/05/11 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫