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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
js三种排序算法分享
Aug 16 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
Vue实现页面添加水印功能
Nov 09 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
django url到views参数传递的实例
2019/07/19 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python如何写出表白程序
2020/06/01 Python
python dict乱码如何解决
2020/06/07 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
社区活动策划方案
2014/08/21 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python