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初学者的学习路线建议
一位资深程序员给予Java初学者的学习路线建议 java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干 ...
- HTML 5入门知识（三）
<canvas>标签 在网页中使用canvas元素,像使用其他HTML标签一样简单,然后利用JavaScript脚本调用绘图API,绘制各种图形.canvas拥有多种绘制路径.矩形.圆形. ...
- C#调用PB写的com组件dll
背景 小编为了使用C#去模仿PB代码的加密算法,结果发现PB算法中,的long类型只有21亿,实际上传入的数值达到了78亿,造成了数据溢出,精度丢失的情况. 然而PB的算法已经使用C#不可以还原(C# ...
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-2
来个目录吧: 第一章 第二章 第三章 暂时就这么多.后面路线更新吧 Entity Framework Core Nuget包管理 如果你创建项目的时候启用了个人身份验证的话,项目中就已经包含了EFCo ...
- String字符串截取跟替换经典案例
分享下今天的一个面试题吧!不算有难度,但是没做出来 题目:将String str="姓名:武亚伟,年龄:27,地址:西安市": 输出结果为:姓名=武亚伟 年龄=27 地址=西安市 ...
- android sdk tools 一览
ANDROID SDK ADKROID SDK的工具划分为两部分,一部分是SDK tools,与平台无关,另一部分是Platform tools支持最新的安卓平台 SDK tools有 SDK m ...
- 服务器 ADO 错误：0x80004005，[DBNETLIB]
2012-12-0310:44:06 ]ADO 错误:0x80004005,[DBNETLIB][ConnectionOpen(Connect()).]SQL Server 不存在或拒绝访问.[ 20 ...
- 1611: [Usaco2008 Feb]Meteor Shower流星雨
1611: [Usaco2008 Feb]Meteor Shower流星雨 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1010 Solved: 44 ...
- cudaMemcpy与cudaMemcpyAsync的区别
转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5231857.html 简单可以理解为:cudaMemcpy是同步的,而cudaMemcpyAsync是异步的 ...
- PyQt QListWidget修改列表项item的行高
百度,谷歌之后都说用setHintSize(self,QCore.QSize(width,height)),然并卵,后来用qss修改就可以了,具体用法如下 # emaillist是我给QListWid ...