<!doctype html>

<html lang="en" ng-app="AMail">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="lib/angular.js"></script>

    <script src="lib/angular-route.js"></script>

</head>

<body>

    <h1>A - Mail</h1>

    <div ng-view></div>

    <script type="text/ng-template" id="detail.html">

        <div><strong>Subject:</strong>{{message.subject}}</div>

        <div><strong>Sender:{{message.sender}}</strong></div>

        <div><strong>Date:</strong>{{message.date}}</div>

        <div>

            <strong>To:</strong>

            <span ng-repeat="recipient in message.recipients">{{recipient}}</span>

        </div>

        <div>{{message.message}}</div>

        <a href="#/">Back to message list</a>

    </script>

    <script type="text/ng-template" id="list.html">

        <table>

            <tr>

                <td><strong>Sender</strong></td>

                <td><strong>Subject</strong></td>

                <td><strong>Date</strong></td>

            </tr>

            <tr ng-repeat="message in messages">

                <td>{{message.sender}}</td>

                <td><a href="#view/{{message.id}}">{{message.subject}}</a></td>

                <td>{{message.date}}</td>

            </tr>

        </table>

    </script>

    <script>

        var aMailServices = angular.module('AMail', ['ngRoute']);

        function emailRouteConfig($routeProvider) {

            $routeProvider.

                when('/', {

                    controller: ListController,

                    templateUrl: 'list.html'

                }).

                when('/view/:id', {

                    controller: DetailController,

                    templateUrl: 'detail.html'

                }).

                otherwise({

                    redirectTo: '/'

                });

        }

        aMailServices.config(emailRouteConfig);

        messages = [{id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],message: 'Hey, we should get together for lunch '}, {

        id: 1, sender: 'maria@somecompany.com',subject: 'Where did you leave my laptop?',date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],message: 'I thought you were going to put it in my desk drawer.'+'But it does not seem to be there.'}, {id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],message: "Nobody panic, but my pet python is missing from her cage.'+'She doesn't move too fast, so just call me if you see her."}];

            function ListController($scope) {

                $scope.messages = messages;

            }

            function DetailController($scope, $routeParams) {

                $scope.message = messages[$routeParams.id];

            }

    </script>

</body>

</html>

angularjs ngRoute demo的更多相关文章

  1. AngularJs ng-route路由详解

    本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...

  2. AngularJS入门-demo

    双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...

  3. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  4. angularjs ngRoute的使用简单例子

    很丑的小例子,刚学angularjs,写下来方面以后看. 1.例子的工程目录如下: 2.index.html代码如下: <!DOCTYPE html><html><hea ...

  5. AngularJS +HTML Demo

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. AngularJs Test demo &front end MVVM implementation conjecture and argue.

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  7. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  8. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  9. angularjs $watch demo

    <!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...

随机推荐

  1. 【Permutations】cpp

    题目: Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the fo ...

  2. Shell常用操作

    1.读取配置文件中的jdbc_url参数的值($InputParamFile为待读取的目标文件绝对路径) jdbc_url=`grep "jdbc_url" $InputParam ...

  3. C#预编译指令

    近日工作涉及到于外部系统交互,对方提供接口:但是在双方系统未联调时,引用外部DLL,相关类实例化,提示异常错误(错误消息正常):后面操作无法进行,那如何写调试代码,即在调试时不运行某段代码,而在正式发 ...

  4. OS X 使用技巧——在Finder窗口标题栏上显示路径

    Finder窗口默认显示当前文件夹的名称或当前所在的模式(例如AirDrop).如果想要显示路径(用User/[当前用户账号名称]/Documents 替代以前显示的Documents),打开终端并运 ...

  5. 笔记本显示器坏了，从硬盘安装win7系统

    可以装的,从硬盘安装的话,步骤如下:一.将从网上下载的win7旗舰版ISO系统文件存放到D盘. 二.从网上下载虚拟光驱,打开安装后在任务栏右通知区显示“虚拟DAEMON管理器”图标,在我的电脑窗口显示 ...

  6. JS--传统事件模型的问题

    事件绑定分为两种情况:传统的事件绑定(内联模型.脚本模型),一种是现代事件绑定模型(DOM2级事件绑定). 内联模型的事件绑定是将事件写在元素标签中,将事件绑定函数当做元素的一种属性来实现的,这种绑定 ...

  7. bzoj 3170 manhattan距离

    首先将坐标系顺时针旋转45度,得到一个新的坐标系,这个坐标系 对应的坐标的manhattan距离就是原图中的距离,然后快排,利用前缀和 数组O(N)求所有的答案,然后找最小值就行了,总时间O(Nlog ...

  8. WPF命令参数CommandParameter

    XAML代码如下: <Window x:Class="Demo006.MainWindow" xmlns="http://schemas.microsoft.com ...

  9. PHP 使用 Redis

    PHP 使用 Redis 安装 开始在 PHP 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 PHP redis 驱动,且你的机器上能正常使用 PHP. 接下来让我们安装 PH ...

  10. Smarty模板学习

    1.基本语法 所有的smarty模板标签都被加上了定界符.默认情况下是 { 和},但它们是可被改变的. 在smarty里,所有定界符以外的内容都是静态输出的,或者称之为不可改变.当smarty遇到了模 ...