很丑的小例子，刚学angularjs，写下来方面以后看。

1.例子的工程目录如下：

2.index.html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="lib/angular-route.js"></script>
    <title></title>
</head>
<body ng-app="app">
    <h1>我的邮件</h1>

<!--模板（子视图）将在这个地方插入-->
    <div ng-view>

</div>
</body>
</html>

3.app.js内容：

var app = angular.module('app', ['ngRoute']);
//邮件
var messages=[{
    id:0,
    sender:"王经理",
    subject:"项目总结",
    date:"2015-4-2 09:00:4",
    recipient:"小李",
    message:"记得明天上午开会要收项目总结，不要搞砸了。"
},{
    id:1,
    sender:"小姨子",
    subject:"明天吃饭",
    date:"2015-4-2 23:12:56",
    recipient:"小李",
    message:"姐夫明天请我吃饭啦。"
}];

app.controller('emailList', ['$scope', function($scope){
    $scope.emails=messages;
}]);
app.controller('emailDetail',['$scope','$routeParams',function($scope,$routeParams){
    $scope.email=messages[$routeParams.id];
}]);

app.config(['$routeProvider',function($routeProvider) {
    $routeProvider.when('/', {
        controller:'emailList',
        templateUrl:'./template/emailList.html'

　　　//这个使用/view/:id，当路径进行匹配的时候会自动解析出其中的id，可以通过$routeParams.id获取。如：

　　// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby

　　// Route: /Chapter/:chapterId/Section/:sectionId

　　// Then

　　//$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}

}).when('/view/:id',{
        controller:'emailDetail',
        templateUrl:'./template/emailDetail.html'
    });
}]);

4.emailList.html和emailDetail.html内容：

<table>
    <tr><td>发送者</td><td>主题</td><td>日期</td></tr>
    <tr ng-repeat="email in emails">
        <td>{{email.sender}}</td>
        <td><a href="#/view/{{email.id}}">{{email.subject}}</a></td>
        <td>{{email.date}}</td>
    </tr>
</table>

<div>
    <h2>主题：{{email.subject}}</h2>
    <h3>发送者：{{email.sender}}</h3>
    <h3>日期：{{email.date}}</h3>
    <h3>接收者：{{email.recipient}}</h3>
    <h2>内容：{{email.message}}</h2>
    <h4><a href="#/"><<<返回</a></h4>
</div>

5.效果图：

angularjs ngRoute的使用简单例子的更多相关文章

  1. Hibernate4.2.4入门(一)——环境搭建和简单例子

    一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...

  2. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答

    一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...

  3. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  4. ko 简单例子

    Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板 ...

  5. mysql定时任务简单例子

    mysql定时任务简单例子 ? 1 2 3 4 5 6 7 8 9     如果要每30秒执行以下语句:   [sql] update userinfo set endtime = now() WHE ...

  6. java socket编程开发简单例子 与 nio非阻塞通道

    基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...

  7. 一个简单例子：贫血模型or领域模型

    转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...

  8. [转] 3个学习Socket编程的简单例子：TCP Server/Client, Select

    以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...

  9. jsonp的简单例子

    jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. 跟随鼠标指针跑的div拖拽效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. ideal取消按下两次shift弹出搜索框 修改idea,webstrom,phpstrom 快捷键double shift 弹出search everywhere

    因为经常需要在中英文之间切换,所以时常使用shift键,一不小心就把这个Searchwhere 对话框调出来了,很是麻烦. 因此痛定思痛, 我决定将这个按两下shift键就弹出搜索框的快捷键禁用了! ...

  3. PHP12 文件操作

    学习要点 文件系统概述 目录基本操作 文件基本操作 文件上传下载 文件上传类的设计     文件系统概述 概述 PHP文件系统的操作是基于UNIX系统模型,所以有一些文件处理函数无法在windows服 ...

  4. luogu 数列找不同-莫队

    https://www.luogu.org/problemnew/show/P3901 了解过莫队的人应该都清楚,莫队是一个优化的暴力,可以在相对暴力比较优的时间中,求出一段序列内的某些性质(例:数字 ...

  5. c++的if语句中的110为什么不等于110？

    从上图可以看出,当表达式1.1*x被直接放进if的判断括号中时1.1*x不等于y,但是将1.1*x赋值给z时,z与y相等,这是为什么?(以下为不等价时的代码) #include<stdio.h& ...

  6. UVa-133-救济金发放

    这题的话,我们首先对于移动函数可以知道,因为只是顺逆的关系,也就是加一或者减一,所以我们每次移动的时候,都补上一个小于n的最大整数,然后取模,这样就不会有负数,而且加之后的结果不会超过2*n,所以我们 ...

  7. Openjudge-百练-4013-踩方格

    这题目是一道深搜的题目,我们写一个递归函数叫Ways(int i, int j ,int n),i j就是当前所处的坐标,我们设置一个visited数组,简称 V . 对于这个数组,首先初始化为零,然 ...

  8. [LOJ] 分块九题 7

    区间加法,区间乘法,单点查询. 洛谷线段树2 屡清加法乘法的关系,定义答案为 a*mut+add 对于整块: 新的乘w,mut和add都要乘w 新的加w,add加w //Stay foolish,st ...

  9. 夯实Java：从面向对象说起

    作者:伯特出处:github.com/ruicbAndroid/LoulanPlan声明:本文出自伯特的<LoulanPlan>,转载务必注明作者及出处. 刚学习 Java 那会就接触了& ...

  10. Java Web中的编码解析

    在springmvc工程web.xml中配置中文编码 <!-- 配置请求过滤器,编码格式设为UTF-8,避免中文乱码--> <filter> <filter-name&g ...