最近搜了一下网上的教程，看完总感觉有点糊涂，对于新手来说可能云里雾里，所以写一个最简单的路由来给大家做个指引。

首先当然需要准备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中路由的实现（针对新手）的更多相关文章

  1. angular中路由跳转并传值四种方式

    一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...

  2. angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...

  3. angular源码分析：angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  4. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  5. 理解 angular 的路由功能

    相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...

  6. Angular中Constructor 和 ngOnInit 的本质区别

    在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...

  7. angular配置路由/子页面+vue配置路由/子页面

    1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同.   routes: [     { path: '/',       ...

  8. Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...

  9. Angular 4 路由介绍

    Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...

随机推荐

  1. Extjs中grid前端分页使用PagingMemoryProxy【二】

        在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...

  2. 重新认识JavaScript

    JavaScrpit在我眼中一直是web前端脚本语言,而这段时间的一些工作,让我对JavaScript有了一个全新的认识. 公司准备启动的一个手游项目,服务器端准备使用网易的开源框架pomelo.po ...

  3. JVM学习之类加载

    该文使用Hotspot    JDK1.7 一.类加载器 1.什么是类加载器 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java ...

  4. SFTP远程文件上传

    远程服务器remote_host=192.168.29.142用户为remote_www,用户当前目录为/home/remote_www 本地服务器local_host=192.168.29.135用 ...

  5. [lua] 游戏客户端逻辑使用lua协程

    我们的游戏有这样一种情景:客户端中角色需要用到一些公会的数据,但服务器不会在玩家(创角后)一进入到游戏里就推送给玩家,而是需要客户端自己在需要的时候向服务器请求公会的数据,之前的实现就是在请求消息的时 ...

  6. 2017-3-20 HTML 基础知识

    HTML的定义:HTML是一门编程语言的名字:超文本标记语言(Hyper Text Mark-up Language ),就是超越了文字的范畴,除了文字还可以有图片.视频.音频.动画.特效.表格.链接 ...

  7. 谈谈Backbone.js中的el

    小编最近开始接触backbone.js,这个曾经非常优秀的一款MVC前端框架,在学习的过程中,遇到下图的这样一个问题 下面上代码 小编的想法很简单,只是view了一个实例,然后在initalize中调 ...

  8. 【树莓派】Linux应用相关：自动删除n天前日志

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  9. TCP/IP笔记(三)数据链路层

    数据链路的作用 数据链路层的协议定义了通过通信媒介互连的设备之间传输的规范.通信媒介包括双绞线电缆.同轴电缆.光纤.电波以及红外线等介质.此外,各个设备之间有时也会通过交换机.网桥.中继器等中转数据. ...

  10. 【转】并行类加载——让tomcat玩转双十一 @双十一实战

    原文:https://yq.aliyun.com/articles/4227?spm=5176.100239.yqblog1.20.cfRztB 摘要: 今年双十一,是应用容器的最新版本Ali-tom ...