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 ...
随机推荐
- JAVA开发环境搭建 - JDK安装及环境变量配置
1.前提条件 系统:本教程以WIN7系统为例 JDK:本教程以jdk-7u79-windows-x64为例 2.安装步骤 双击运行JDK安装程序
- [PKU2389]Bull Math (大数运算)
Description Bulls are so much better at math than the cows. They can multiply huge integers together ...
- Robots协议
Robots协议 什么是robots? Robots文件:网站和搜索引擎之间的一个协议. 用来防止搜索引擎抓取那些我们不想被搜索引擎看到的隐私内容. Robots文件告诉蜘蛛什么是可以被查看的. ...
- @Required 注释应用于 bean 属性的 setter 方法，它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中，否则容器就会抛出一个 BeanInitializationException 异常。
@Required 注释应用于 bean 属性的 setter 方法,它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中,否则容器就会抛出一个 BeanInitializationEx ...
- matplotlib根据Y轴数量伸缩画图的py脚本
#coding:utf-8import numpy as npimport matplotlib.pyplot as plt #X,Y轴数据y = [20,59,11,12,16,20,15,12,1 ...
- Web API框架学习——路由（一）
HttpConfiguration(ASP.NET Web API管道的配置是通过HttpConfiguration来完成) : 包括路由注册在内的对整个ASP.NET Web API管道的配置是通过 ...
- 梳理下Cordova的热更新
公司的大部分都是Hybrid 产品,也就是混合开发,所以比较重要的一个核心功能就是热更新了. 做这个功能的时候中间碰到不少坑,记录一下,比较简单,大致思想就是从服务器拉取JS文件替换掉本地对应文件 之 ...
- Java完成简单猜数字游戏v2.0
猜数字游戏v2.0 优化了获取随机数.输入数据超出边界值的代码,并增加了异常处理,能够在玩家输入错误数据错误时给出可靠指引,希望对和我一样的新人有帮助, 最后希望有大神愿意帮我解决代码优化的问题,谢谢 ...
- Angular2之管道学习笔记
管道.可以把一个输出流与另一个输入流连接起来.类似 linux.gulp都有应用. 在Angular2中使用管道非常方便.Angular2中本身提供了一些内置管道.当然也可以自定义管道. 文档链接:h ...
- Android 增加（键盘）按键
以添加 camera按键为例(红色是需要添加的) 一.kernel键值定义 (1)键扫描码 ScanCode是由linux的Input驱动框架定义的整数类型,可参考input.h头文件,即geteve ...