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 相关文章推荐
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
js实现打字小游戏
Dec 17 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
js验证上传图片的方法
2015/05/12 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
NumPy 数组使用大全
2019/04/25 Python
Python flask框架post接口调用示例
2019/07/03 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python 如何在字符串中插入变量
2020/08/01 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
法国足球商店:Footcenter
2019/07/06 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
商场经理竞聘演讲稿
2014/01/01 职场文书
护理中职生求职信范文
2014/02/24 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
军人离婚协议书样本
2014/10/21 职场文书
中秋节晚会开场白
2015/05/29 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
小学英语教学反思范文
2016/02/15 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL