脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angularjs制作简单的路由功能demo

Angularjs制作简单的路由功能demo

 更新时间：2015年04月14日 10:27:30   投稿：hebedich  
这篇文章主要介绍了Angularjs制作简单的路由功能demo，刚刚开始学习Angularjs,做的不好，还请见谅。

从官网下载了最新版本的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'])

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

您可能感兴趣的文章:

相关文章

  • AngularJS中下拉框的基本用法示例

    AngularJS中下拉框的基本用法示例

    这篇文章主要介绍了AngularJS中下拉框的基本用法,结合具体实例形式分析了AngularJS下拉框的元素绑定、选中及显示等功能实现方法,需要的朋友可以参考下
    2017-10-10
  • Angular实现较为复杂的表格过滤，删除功能示例

    Angular实现较为复杂的表格过滤，删除功能示例

    这篇文章主要介绍了Angular实现较为复杂的表格过滤，删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • AngularJs的UI组件ui-Bootstrap之Tooltip和Popover

    AngularJs的UI组件ui-Bootstrap之Tooltip和Popover

    这篇文章主要介绍了AngularJs的UI组件ui-Bootstrap之Tooltip和Popover，tooltip和popover是轻量的、可扩展的、用于提示的指令。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 详解Angular-ui-BootStrap组件的解释以及使用

    详解Angular-ui-BootStrap组件的解释以及使用

    这篇文章主要介绍了详解Angular-ui-BootStrap组件的解释以及使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • AngularJS入门心得之directive和controller通信过程

    AngularJS入门心得之directive和controller通信过程

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件，接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程，对angularjs相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • AngularJS HTML编译器介绍

    AngularJS HTML编译器介绍

    这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下
    2014-12-12
  • 详解AngularJS中的表单验证(推荐)

    详解AngularJS中的表单验证(推荐)

    AngularJS自带了很多验证，什么必填，最大长度，最小长度...，这里记录几个有用的正则式验证。本文给大家介绍的非常详细，对angularjs中表单验证知识感兴趣的朋友一起学习吧
    2016-11-11
  • AngularJS利用Controller完成URL跳转

    AngularJS利用Controller完成URL跳转

    本文的主要内容是介绍在AngularJS中怎样利用Controller实现URL跳转，本文给出了实例代码，简单明了，有需要的可以参考学习。
    2016-08-08
  • Angular5.1新功能分享

    Angular5.1新功能分享

    这篇文章主要介绍了Angular5.1新功能以及相关的用法，需要的朋友参考学习下吧。
    2017-12-12
  • angular中的post请求处理示例详解

    angular中的post请求处理示例详解

    这篇文章主要给大家介绍了关于angular中post请求处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-06-06

最新评论