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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python的exec、eval使用分析
2017/12/11 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
基于Python测试程序是否有错误
2020/05/16 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
大学生求职简历的自我评价
2013/10/21 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
医院院务公开实施方案
2014/05/03 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2014年个人师德工作总结
2014/12/04 职场文书