//这几天看了angularjs和backbone，大看了解了knockout和emberjs，刚刚上网看到了一个angular的router的demo，现在顺便记下来

<!---

DEMO_INDEX.html

-->

<!doctype html>

<head>

<meta charset="utf-8">

<title>route</title>

</head>
//这个重要是做IE的兼容，发现不管用，IE坑爹，你懂的

<body ng-app="routeApp" class="ng-app:routeApp"  id="routeApp">

<h1>Route Demo index</h1>

<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>

<div ng-view></div>

<script src="http://localhost:81/js/angular.min.js"></script>

<script>

var routeApp = angular.module('routeApp',[]);

routeApp.config(['$routeProvider',function ($routeProvider) {

      $routeProvider

      .when('/list', {

        templateUrl: 'list.html',

        controller: 'RouteListCtl'

      })

      .when('/list/:id', {

          templateUrl: 'detail.html',

          controller: 'RouteDetailCtl'

      })

      .otherwise({

        redirectTo: '/list'

      });

}]);

//controller

routeApp.controller('RouteListCtl',function($scope) {

});

routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {

    $scope.id = $routeParams.id;

});

</script>

</body>

</html>

　　

//list.html

<hr/>

<h3>Route : List.html</h3>

<ul>

<li ng-repeat="id in [1, 2, 3 ]">

<a href="#/list/{{ id }}"> ID{{ id }}</a>

</li>

</ul>

//detail.html

<hr/>

<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

angular_routerJS_学习的更多相关文章

  1. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

随机推荐

  1. Super A^B mod C

    Given A,B,C, You should quickly calculate the result of A^B mod C. (1<=A,C<=1000000000,1<=B ...

  2. mysql忘记密码的重置方法

    1. 编辑mysql主配置文件 my.cnfvim /etc/my.cnf在[mysqld]字段下的位置添加参数skip-grant保存退出2. 重启数据库服务service mysqld resta ...

  3. 迅为iTOP-4412开发板Ubuntu操作系统烧写方法

    本文转自:http://www.topeetboard.com Ubuntu系统烧写硬件平台:iTOP4412开发板 需要准备:串口线.读卡器.一张SD卡最好是2G(自备).另外一张卡(大于等于2G都 ...

  4. centos6.5 redis3 开机自动启动命令设置

    修改redis.conf,打开后台运行选项: # By default Redis does not run as a daemon. Use 'yes' if you need it. # Note ...

  5. nginx 一二事(2) - 创建虚拟静态服务器

    一.什么是nginx 是一个C语言开发的HTTP反向代理服务器,性能非常高 一个俄罗斯的哥们开发的,官方提供的测试性能能够达到5W的并发,我的天呐~,实际测试差不多是2W,而淘宝的牛人可以优化到200 ...

  6. 构建Docker＋Jenkins持续集成环境

    docker和Jenkins不是什么新东西了,两者结合也不是什么稀奇的事情,也已经有很多Jenkins和docker相结合的文章,此文仅为自己的一点心得实践,如有不对的地方,欢迎大家纠正. 先贴上大致 ...

  7. C语言 日常小结

    1.当数组当作函数参数的时候会退化为指针 #include<stdio.h> #include<stdlib.h> void sort(int a[]){ int num = ...

  8. 在页面上以消息束的形式同时抛出多个DialogMessage

    com.sun.java.util.collections.ArrayList exceptions = new com.sun.java.util.collections.ArrayList(); ...

  9. Math类和Random类（数学公式相关类）

    Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数. 常用方法: 1.static 数值类型 abs(数值类型 a)      返回 double 值的绝对值. 2.sta ...

  10. 在matlab中对hsv进行均匀量化和非均匀量化

    首先,进行非均匀量化,H,S,V三通道分别量化为16,4,4级,返回一个向量.量化依据如下表: function vec = getHsvHist(Image) [M,N,O] = size(Imag ...