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 ...
随机推荐
- Hello,Kubernetes
什么是Kubernetes Kubernetes(k8s)是一款开源的以容器为中心的,用于跨主机集群自动部署(automating deployment),控制容器扩展/收缩(scaling)和管理容 ...
- 联网html引用BootStrap
以下是我写的一个联网html引用BootStrap的例子,可作为参考: <%@ Page Language="C#" AutoEventWireup="true&q ...
- 浅谈“Mysql”的基础操作语句
/*-------------------------------------------读者可以补充内容到下面-------------------------------------------- ...
- 1625: [Usaco2007 Dec]宝石手镯
1625: [Usaco2007 Dec]宝石手镯 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 919 Solved: 618 [Submit][S ...
- java入门知识
Java特性 简单.面向对象.支持网络.解释性.健壮性.安全性.高性能.可移植(跨平台) Java特点 开源.免费.跨平台.面向对象 应用平台 JavaSE(standard edition)(c/s ...
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- dtree大型树插件
一.dtree简介 dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源.同时支持动态从数据库引入数据. 二.使用方法 1.下载dtree.js及dtree.css 下载 ...
- php基础语法（20161021）
上午: 数据库总结: 1.创建数据库 create database 数据库名称 删除数据库 drop database 数据库名称 2.创建表 create table 表名 ( 列名 类型(长度) ...
- Android全局异常捕捉
// 定义自定义捕捉 package com.xiaosw.test; import java.io.File; import java.io.FileOutputStream; import jav ...
- C++标准库之vector（各函数及其使用全）
原创作品,转载请注明出处:http://www.cnblogs.com/shrimp-can/p/5280566.html iterator类型: iterator:到value_type的访问,va ...