angularjs ngRoute的使用简单例子

很丑的小例子,刚学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.效果图:

时间: 2024-10-14 17:01:17

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

AngularJS 拦截器和好棒例子

Interceptors in AngularJS and Useful Examples 有日期,我喜欢. $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1};  var b = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&

Hadoop RPC简单例子

jdk中已经提供了一个RPC框架-RMI,但是该PRC框架过于重量级并且可控之处比较少,所以Hadoop RPC实现了自定义的PRC框架. 同其他RPC框架一样,Hadoop RPC分为四个部分: (1)序列化层:Clent与Server端通信传递的信息采用了Hadoop里提供的序列化类或自定义的Writable类型: (2)函数调用层:Hadoop RPC通过动态代理以及java反射实现函数调用: (3)网络传输层:Hadoop RPC采用了基于TCP/IP的socket机制: (4)服务器端

extern外部方法使用C#简单例子

外部方法使用C#简单例子 1.增加引用using System.Runtime.InteropServices; 2.声明和实现的连接[DllImport("kernel32", SetLastError = true)] 3.声明外部方法public static extern int GetCurrentDirectory(int a, StringBuilder b); 4.对外部方法操作  GetCurrentDirectory(300, pathstring); using

事件简单例子

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Runtime.InteropServices; 6 7 namespace EventTest 8 { 9 /// <summary> 10 /// 事件订阅者类 11 /// </summary> 12 class Program 13 { 14 static v

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

spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationContext.xml中 <bean id=”multipartResolver” class=”org.springframework.web.multipart.commons.CommonsMultipartResolver”/> 关于文件上传的配置不能少 大家可以看具体代码如下: web.xml &

自定义隐式转换和显式转换c#简单例子

自定义隐式转换和显式转换c#简单例子 (出自朱朱家园http://blog.csdn.net/zhgl7688) 例子:对用户user中,用户名first name和last name进行转换成合成一个限定长度为10个字符新name. 自定义隐式转换: namespace transduction { public partial class transductionForm : Form { public transductionForm() { InitializeComponent();

使用fastjson转换json的简单例子

pom添加依赖: <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.1.41</version> </dependency> 代码: package JsonTest.JsonTest; import java.util.ArrayList; import java.util.Hash

最简单例子图解JVM内存分配和回收

一.简介 JVM采用分代垃圾回收.在JVM的内存空间中把堆空间分为年老代和年轻代.将大量(据说是90%以上)创建了没多久就会消亡的对象存储在年轻代,而年老代中存放生命周期长久的实例对象.年轻代中又被分为Eden区(圣经中的伊甸园).和两个Survivor区.新的对象分配是首先放在Eden区,Survivor区作为Eden区和Old区的缓冲,在Survivor区的对象经历若干次收集仍然存活的,就会被转移到年老区. 简单讲,就是生命期短的对象放在一起,将少数生命期长的对象放在一起,分别采用不同的回收