angular中路由的实现（针对新手）
最近搜了一下网上的教程，看完总感觉有点糊涂，对于新手来说可能云里雾里，所以写一个最简单的路由来给大家做个指引。
首先当然需要准备angular，下载地址：https://angular.io/
现在angular为了减轻自身大小，它将一些功能分离开来，所以路由还得自己导入一个angular-route.js的文件。
首先创建一个index.html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular/angular.js"></script>
<script src="angular/angular-route.js"></script>
</head>
<body ng-app="myRoute">
<div ng-view></div>
</body>
</html>
然后你还需要几个半成品的html文件，如list.html,city.html等。（只有所需要的标签，没有完整的html结构的文件）
list里的内容：
<div>
<span>我是list页面</span>
<a href="#city">上一页</a>
</div>
city里的内容：
<div>
<span>我是city页面</span>
<a href="#/list">下一页</a>
</div>
这时在script中写出如下代码即可：
var myRoute=angular.module('myRoute',['ngRoute']);
myRoute.config(function($routeProvider){
var cityconfig={
templateUrl:"view/city.html"
}
var listconfig={
templateUrl:"view/list.html"
}
$routeProvider.when('/city',cityconfig)
.when('/list',listconfig)
.otherwise({redirectTo:'/city'});
});
另外，一定要启用本地启用本地启用本地，重要的事情说三遍。
把其他功能去掉，只剩路由功能，是不是很好理解呢。
angular中路由的实现（针对新手）的更多相关文章
- angular中路由跳转并传值四种方式
一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...
- angular中$cacheFactory缓存的使用
最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...
- angular源码分析：angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
- 理解 angular 的路由功能
相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...
- Angular中Constructor 和 ngOnInit 的本质区别
在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...
- angular配置路由/子页面+vue配置路由/子页面
1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同. routes: [ { path: '/', ...
- Angular4中路由Router类的跳转navigate
最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...
- Angular 4 路由介绍
Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...
随机推荐
- vue移动端框架到底哪家强
Weex 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请. Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 nativ ...
- One Card Poker
qsc oj 题目 提交 比赛 小组 排名 帮助 Mactavish 题目 我的提交 One Card Poker 发布时间: 2017年2月14日 14:02 最后更新: 2017年2月14日 ...
- 2761: [JLOI2011]不重复数字（平衡树）
2761: [JLOI2011]不重复数字 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2133 Solved: 825[Submit][Stat ...
- 我的第一个webapiDemo
最近在面试,总是被问到有没有接触过webapi 或者问webapi和MVC 的区别,今天看了看,原来如此,自己理解感觉webapi和webservice一样像是实现soa 的一种形式,也可以理解为服务 ...
- ajax上传图片
选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...
- HTML5学习笔记<六>: HTML5框架, 背景和实体
HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...
- (22)Properties，这不会Io流中的类，但是通常和IO流中的一些流配合使用
可以和流相关联的集合对象Properties. Map |--Hashtable |--Properties Properties:该集合不需要泛型,因为该集合中的键值对都是String类型.既然是m ...
- VMware Ubuntu16.04虚拟机安装MATLAB R2016b
因为这学期上的模式识别课程需要在Linux环境下使用Matlab,所以就在Windows10主机上的Vmware Workstation上的Ubuntu虚拟机上安装了最新版本的MATLAB. 环境: ...
- 使用Hibernate中出现了Caused by: java.sql.SQLException: Field 'gid' doesn't have a default value
那是因为表中没有设置主键自动增长,只需要改变表中的主键设置为自动增长即可
- 源码分析——从AIDL的使用开始理解Binder进程间通信的流程
源码分析——从AIDL的使用开始理解Binder进程间通信的流程 Binder通信是Android系统架构的基础.本文尝试从AIDL的使用开始理解系统的Binder通信. 0x00 一个AIDL的例子 ...