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 ...
随机推荐
- 为什么每个浏览器User-Agent都是Mozilla？真相原来是这样！
转载自简明现代魔法http://www.nowamagic.net/librarys/veda/detail/2576 故事还得从头说起,最初的主角叫NCSA Mosaic,简称Mosaic(马赛克) ...
- oracle expdp和impdp常用命令选项
一.expdp导出数据库 1.按用户导出 expdp scott/tiger@orcl DIRECTORY=oracle_dmp dumpfile=bak.dmp schemas=scott vers ...
- ASP日期格式化函数
Public Function GetFormatDate(DateAndTime, para)On Error Resume NextDim y, m, d, h, mi, s, strDateTi ...
- 2953: [Poi2002]商务旅行
2953: [Poi2002]商务旅行 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 8 Solved: 8[Submit][Status] Desc ...
- AVFoundation自定义录制视频
#import <AVFoundation/AVFoundation.h> #import <AssetsLibrary/AssetsLibrary.h> @interface ...
- Unity获取安卓手机运营商，电量，wifi信号强度，本地Toast，获取已安装apk，调用第三方应用，强制自动重启本应用
一个完整的游戏项目上线需要不断的完善优化,但是到了后期的开发不再仅仅是游戏了,它的复杂度远远大于纯粹的应用开发.首先必须要考虑的就是集成第三方SDK,支付这块渠道商已经帮你我们做好了,只需要按照文档对 ...
- jqzoom插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- deepin系统下如何设置wifi热点（亲测有效）
deepin系统下如何设置wifi热点(亲测有效) deepin wifi ap linux 热点 首先必须吐槽一下linux下设置wifi太累了....来来回回折腾了我好久的说.心累... 好了废话 ...
- python的with语句，超级强大
With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作.对于这种场景,Python的with语句提供了一种非常方便的处理方式.一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中读取 ...
- ATL dll注册失败
“生成”->“生成解决方案”或“重新生成解决方案”,在注册时,报错:regisvr32 /r/c " C:\Users\Administrator\Desktop\复件DrvWater ...