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 ...
随机推荐
- QMediaPlayer占用CPU过高问题
根据搜索引擎的结果,要想实现QT下播放多媒体,一般有两种方案:一种是使用第三方插件,好像叫Phonon:一种是使用QT自带的QMediaplayer. 两种方法各有利弊.使用第三方插件,则方便易用,封 ...
- Castle Windsor 学习-----Installer的几种安装方式
翻译 当使用依赖注入容器时,你首先要向容器中注册你的组件,Windsor使用installers(该类型实现IWindsorInstaller接口)来封装和隔离注册的逻辑,可以使用Configurat ...
- SQL server 数据库 ——聚合函数（一列 多行，值类型）
聚合函数 5种函数: 1.max最大值 select max(price) from car where code='c024' 2.min最小值 select * from car wher ...
- RabbitMQ-从基础到实战（1）— Hello RabbitMQ
转载请注明出处 1.简介 本篇博文介绍了在windows平台下安装RabbitMQ Server端,并用JAVA代码实现收发消息 2.安装RabbitMQ RabbitMQ是用Erlang开发的,所以 ...
- Cordova框架基本原理
最近在做混编项目,也是从项目里开始接触Cordova框架,网上很多帖子都总结的很好,我还是要总结一下,便于加深一下. Cordova框架是一个可以让JS与原生代码(包括 Android 的 java, ...
- Python中类的方法属性与方法属性的动态绑定
最近在学习python,纯粹是自己的兴趣爱好,然而并没有系统地看python编程书籍,觉得上面描述过于繁琐,在网站找了一些学习的网站,发现廖雪峰老师的网站上面的学习资源很不错,而且言简意赅,提取了一些 ...
- windows phone 8.1开发:文件选择器FileOpenPicker
原文出自:http://www.bcmeng.com/fileopenpicker/ 今天小梦给大家分享一下 windows phone 8.1中的文件选择器,和之前的windows phone8的不 ...
- 【好记性不如烂笔头】死锁之java代码
死锁: 是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等待的进程称 ...
- 修改mysql root账号密码
一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password "test123"E ...
- python大小写转换函数
1.全部转换成大写:upper() 用法: str = 'marsggbo' print str.upper() 结果:MARSGGBO 2.全部转换成小写:lower() 用法:str = ...