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方法为点击事件执行指定函数方法。
转载自本人ITeye链接： http://xiaozhuang0706.iteye.com/blog/2263786
AngularJS路由跳转的更多相关文章
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- 【转】AngularJS路由和模板
1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...
- AngularJS路由和模板
前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...
- angularjs 路由回退，返回到上一个路由
在现阶段比较流行的angularjs框架中:路由是一个比较重要的应用:angularjs的单页面是其强大功能之一: 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面 ...
- AngularJS 路由精分
AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...
- AngularJS进阶(二)AngularJS路由问题解决
AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...
- AngularJS路由变化 监听方法
#使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess ##使用场景:在路由配置文 ...
- angularjs 路由机制
前言 AngularJS路由主要有内置的ngRoute和一个基于ngRoute开发的第三方路由模块ui-router,内置的ngRoute有时满足开发需求,使用ui-router可以解决很多原生ngR ...
- AngularJS - 路由 routing 基础示例
AngularJS 路由 routing 能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的.当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面.Angu ...
随机推荐
- Laravel生命周期
如果你对一件工具的使用原理了如指掌,那么你在用这件工具的时候会充满信心! 一旦用户(浏览器)发送了一个HTTP请求,我们的apache或者nginx一般都转到index.php,因此,之后的一系列步骤 ...
- 隐马尔可夫模型（HMM）攻略
隐马尔可夫模型 (Hidden Markov Model,HMM) 最初由 L. E. Baum 和其它一些学者发表在一系列的统计学论文中,随后在语言识别,自然语言处理以及生物信息等领域体现了很大的价 ...
- Linux i2c子系统(三) _解决probe无法执行
如果你也遇到了填充了id_match_table,compitible怎么看都一样,但probe就是不执行(让我哭一会),你可以回头看一下上一篇的模板,我们这里虽然使用的是设备树匹配,但和platfo ...
- VMware下ubuntu与Windows实现文件共享的方法
最近安装caffe需要将Windows下文件拷贝到ubuntu16.04下,就进行了共享文件夹的设置,期间遇到一些困难,记录下来,方便以后遇到此类问题不再困惑. (记录只为更好的分享) 言归正传: 1 ...
- Java面试05|MySQL及InnoDB引擎
1.InnoDB引擎索引 InnoDB支持的索引有以下几种: (1)哈希索引 (2)全文索引 (1)B+树索引 又可以分为聚集索引与辅助索引 索引的创建可以在CREATE TABLE语句中进行,也可以 ...
- IP头、TCP头、UDP头详解以及定义
一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/typedef struct _MAC_FRAME_HEADER{ char m_cDstMacAddress[6]; //目的m ...
- 3396: [Usaco2009 Jan]Total flow 水流
3396: [Usaco2009 Jan]Total flow 水流 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 179 Solved: 73[Su ...
- Ionic android 底部tabs
ionic android tabs 默认显示在上部,如果要跟苹果一起统一在底部,那么可以在app.js添加配置 .config(function($ionicConfigProvider) { $i ...
- 因为本地没有配置 localhost 导致的 eclipse 的奇葩问题
因为电脑没有配置 127.0.0.1 localhost,已经碰到两次奇葩问题了. 问题一: 我的博文http://www.cnblogs.com/sonofelice/p/5143746.html中 ...
- 谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...