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 ...
随机推荐
- Linux的capability深入分析
Linux的capability深入分析详见:http://blog.csdn.net/u014338577/article/details/48791953 lxd中对容器能力的限制: 普通用户不能 ...
- cookie 详解 与 封装 实用的cookie
在WEB前端开发中,cookie是必不可少的,网上也有很多开源的库可以使用,不过我还是想自己总结一下,做个笔记并封装一个实用的库.(1)什么是cookie? 从web 角度 cookie是用于存储信息 ...
- 百度地图API新手入门
最近,共享单车着实火了一把,市场竞争也是异常的激烈,百花争艳,百家争鸣,群雄逐鹿,最后鹿死谁手,现在还不得而知,不过可以肯定的是细节决定成败,更重要的还在于用户的体验. 用过的同学们都会知道,打开共享 ...
- cassandra简单介绍与基本操作
项目中用到了cassandra,用来存储海量数据,且要有高效的查询:本博客就进行简单的介绍和进行一些基本的操作 一.使用场景: 是一款分布式的结构化数据存储方案(NoSql数据库),存储结构比Key- ...
- ICC_lab总结——ICC_lab1：数据设置和基本流程
ICC_lab总结 最近在学习后端的流程,做lab是最好不过了.但是有时候做过了lab,过了一段时间之后就会忘记,因此需要自己总结一下,加强印象. ICC_lab1:数据设置和基本流程 数据设置: 一 ...
- 【Unity编程】四元数(Quaternion)与欧拉角
版权声明:本文为博主原创文章,欢迎转载.请保留博主链接:http://blog.csdn.net/andrewfan 欧拉旋转.四元数.矩阵旋转之间的差异 除了欧拉旋转以外,还有两种表示旋转的方式:矩 ...
- Linux学习之Vim使用
一 为何要学Vim 所有的Unix Like系统都有自带vi编辑器 一些软件的编辑接口会自动调起vi 作为vi的升级版,vim具有程序编辑功能,而且具有代码颜色高亮显示.辨别代码的正确性等功能 以上优 ...
- 丑数(USACO)
这个题是一个动态规划加优化的经典题 1246 丑数 USACO 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 对 ...
- db2 sequence 查询
1. 查询名字 select * from sysibm.sysequences where seqname='wx_Id' 2.nextVal select wx_seq_id.currval fr ...
- Android 7.0 调取系统相机崩溃解决android.os.FileUriExposedException
一.写在前面 最近由于廖子尧忙于自己公司的事情和OkGo(一款专注于让网络请求更简单的网络框架) ,故让LZ 接替维护ImagePicker(一款支持单.多选.旋转和裁剪的图片选择器),也是处理了诸多 ...