Angularjs制作简单的路由功能demo


Posted in Javascript onApril 14, 2015

从官网下载了最新版本的Angularjs 版本号:1.3.15

做一个简单的路由功能demo

首页:index.html

<!DOCTYPE html >

<html>
<head>
  <meta charset="utf-8" />
  <title>测试</title>
  <script src="./js/angular.min.js"></script>
  <script src="./js/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="TextController">
     <p>{{someText}}</p>
  </div>
  <div ng-view></div>
</body>
  <script>
    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.controller('TextController', function ($scope) {
      $scope.someText = '测试显示内容';
    });

    //路由
    function emailRouteConfig($routeProvider) {
      $routeProvider.
      when('/', {
        controller: ListController,
        templateUrl: 'list.html'
      }).
      when('/view/:id', { //在id前面加一个冒号,从而制订了一个参数化URL
        controller: DetailController,
        templateUrl: 'detail.html'
      }).
      otherwise({
        redirectTo: '/'
      });
    }

    myApp.config(emailRouteConfig);//配置我们的路由

    messages = [{
      id: 0, sender: "123456@qq.com", subject: "你好,这是一封邮件", date: "2015年4月13日", recipients: ['wifei@163.com'], message: "你好,我是xxx,这是发送给您的邮件。"
    }, {
      id: 1, sender: "123456@qq.com", subject: "你好,这是一封邮件", date: "2015年4月13日", recipients: ['wifei@163.com'], message: "你好,我是xxx,这是发送给您的邮件。"
    }, {
      id: 2, sender: "123456@qq.com", subject: "你好,这是一封邮件", date: "2015年4月13日", recipients: ['wifei@163.com'], message: "你好,我是xxx,这是发送给您的邮件。"
    }];

    function ListController($scope) {
      $scope.messages = messages;
    }

    function DetailController($scope,$routeParams) {
      $scope.message = messages[$routeParams.id];
    }
  </script>
</html>

列表页:list.html

<table>
  <tr>
    <td><strong>发件人</strong></td>
    <td><strong>内容</strong></td>
    <td><strong>日期</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>

详细页:detail.html

<div><strong>项目:</strong>{{message.subject}}</div>
<div><strong>发送者:</strong>{{message.sender}}</div>
<div><strong>日期:</strong>{{message.date}}</div>
<div>
  <strong>To:</strong>
  <span ng-repeat="recipient in message.recipients">
    {{recipient}}
  </span>
</div>
<div>{{message.message}}</div>
<a href="#/">回到列表</a>

以下是此次demo的坑:

1:新版的Angularjs,引用路由功能,需要单独再引用 angular-route.js 文件

2:在定义module时也需要添加对'ngRoute'的依赖

angular.module('xxxx', ['ngRoute'])

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
js中作用域的实例解析
Mar 16 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
three.js 如何制作魔方
Jul 31 Javascript
javascript中几个容易混淆的概念总结
Apr 14 #Javascript
浅谈Sizzle的“编译原理”
Apr 14 #Javascript
深入探寻seajs的模块化与加载方式
Apr 14 #Javascript
javascript数组去重的方法汇总
Apr 14 #Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 #Javascript
JavaScript 表单处理实现代码
Apr 13 #Javascript
JavaScript 事件绑定及深入
Apr 13 #Javascript
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python递归函数实例讲解
2019/02/27 Python
Python Django 命名空间模式的实现
2019/08/09 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python实现简易淘宝购物
2019/11/22 Python
Python 绘制可视化折线图
2020/07/22 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
积极贯彻学习两会精神总结
2014/03/17 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
团队拓展活动总结
2014/08/27 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Python基础之条件语句详解
2021/06/16 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技