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 ...
随机推荐
- Java设计模式之《外观模式》及应用场景
原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/6484128.html 1.外观模式简介 外观模式,一般用在子系统与访问之间,用于对访问屏蔽复 ...
- 徒手用Java来写个Web服务器和框架吧<第三章:Service的实现和注册>
徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response> 这一章先把Web框架的功能说 ...
- 徒手用Java来写个Web服务器和框架吧<第一章:NIO篇>
因为有个不会存在大量连接的小的Web服务器需求,不至于用上重量级服务器,于是自己动手写一个服务器. 同时也提供了一个简单的Web框架.能够简单的使用了. 大体的需求包括 能够处理HTTP协议. 能够提 ...
- VisualStudio2017下ASP.NET CORE的TagHelper智能提示解决办法
之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, ...
- [POJ1088] 滑雪(递归dp)
Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...
- 2017-3-17 SQL server 数据库 视图，事务，备份还原，分离附加
1.视图:只能查看,不能增删改不能有重复列 create view 名字as查询语句 2.事务:保证流程的完整执行 begin tran --开始事务监控 被监控的代码 ... ...if @@ERR ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- PHP服务器脚本 PHP内核探索：新垃圾回收机制说明
在5.2及更早版本的PHP中,没有专门的垃圾回收器GC(Garbage Collection),引擎在判断一个变量空间是否能够被释放的时候是依据这个变量的zval的refcount的值,如果refco ...
- volatile关键字和synchronized关键字
volatile关键字: 可以用来修饰字段(成员变量),就是告知程序任何对该变量的访问均需要从共享内存中获取,而对它的改变必须同步刷新回共享内存,它能保证所有线程对变量访问的可见性. synchron ...
- linux yum下载文件的存放位置
默认是: /var/cache/yum也可以在 /etc/yum.conf 指定cachedir=/var/cache/yum #存放目录keepcache=1 #1为保存 0为不保存metadata ...