Angularjs制作简单的路由功能demo

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

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

(0)

相关推荐

  • angular4实现tab栏切换的方法示例

    管理系统 tab 切换页,是一种常见的需求,大概如下: 点击左边菜单,右边显示相应的选项卡,然后不同的选项卡面可以同时编辑,切换时信息不掉失! 用php或.net,java的开发技术,大概是切换显示,然后加一个ifram来做到,或者通过ajax加载信息显示相应的层. 但是如果用angular 要如何实现呢?第一个想法,是否可以用同样的ifarm来实现呢? 第二个想到的是路由插座大概是这样的 复制代码 代码如下: <router-outlet name="main-content"

  • angularjs实现天气预报功能

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气</title> <script src="../angular-1.5.5/angular.min.js"></script&g

  • angular.js实现购物车功能

    本文实例为大家分享了angular.js购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="angularjs/angular.js"></script> <st

  • AngularJs 弹出模态框(model)

    推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

  • Angularjs制作简单的路由功能demo

    从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri

  • PHP实现一个简单url路由功能实例

    什么是php的路由机制 1.路由机制就是把某一个特定形式的URL结构中提炼出来系统对应的参数.举个例子,如:http://main.test.com/article/1  其中:/article/1  -> ?_m=article&id=1. 2.然后将拥有对应参数的URL转换成特定形式的URL结构,是上面的过程的逆向过程. 如果一个页面的内容呈现,需要根据url上传递的参数来进行渲染.很多时候可能是这样子写:xxx.com/xx?c=x&m=x&t=..,而我们看到的url

  • angularjs实现简单的购物车功能

    本文实例为大家分享了angularjs实现购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; margin-left: 10px; } li{ list-

  • C++制作简单的计算器功能

    计算器这个基本都很熟悉,一个简单的计算器有加法,减法,乘法,除法这四种功能. 如下图 此处我此处逻辑如下,先判断输入的运算符符号,然后在判断输入的数字来进行一个计算. #include <iostream> using namespace std; int main() {     char operator;     float num1, num2;     cout << "输入运算符:+.-.*./ : ";     cin >> opera

  • AngularJS通过ng-route实现基本的路由功能实例详解

    本文实例讲述了AngularJS通过ng-route实现基本的路由功能.分享给大家供大家参考,具体如下: 为什么需要前端路由~ (1)AJAX不会留下History历史记录 (2)用户无法通过URL进入应用指定的页面(书签或者分享等) (3)AJAX对于SEO是一个灾难 1.一般情况下,我们访问网页的时候,是通过url地址. 比如我们访问一个网页:https://www.baidu.com/index/fix.html 在AngularJS中通过"#"来进行不同页面的路由,比如: ht

  • 使用Python制作简单的小程序IP查看器功能

    前言 说实话,查看电脑的IP,也挺无聊的,但是够简单,所以就从这里开始吧.IP地址在操作系统里就可以直接查看.但是除了IP地址,我们也想通过IP获取地理地址和网络运营商情况.IP地址和地理地址并没有固定的关系,所以我们需要借助网络上的数据库,或者说借助第三方的服务来查询.这里,我们选用IP.CN提供的IP地址查询服务. 基本环境配置 版本:Python3 系统:Windows 相关模块:PyQt5 实现效果图 完整代码 运行以上程序,点击按钮,大约卡顿半秒后,文本标签处就会显示我们电脑的IP地址

  • Laravel框架模板加载,分配变量及简单路由功能示例

    本文实例讲述了Laravel框架模板加载,分配变量及简单路由功能.分享给大家供大家参考,具体如下: 作为世界上第一的PHP框架,学习Laraver势在必行,虽然国内盛行ThinkPHP,但是多会一个框架总是对自己有好处的. 通过前面的文章Laravel框架在本地虚拟机快速安装的方法,我们已经可以顺利安装Laravel 安装之后,在目录laravel\app\Http下,有一个routes.php文件,重点了,这个就是控制全站的路由文件. Route::get('/', function () {

  • AngularJS实现的简单拖拽功能示例

    本文实例讲述了AngularJS实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS拖拽</title> <style> *{ padding:0; margin:0; } .wei{ wi

  • jsp+servlet实现简单登录页面功能(附demo)

    目录 实现功能: 开发环境: 预备知识: 1.登录界面login.jsp: 2.登录成功界面hello.jsp: 3.登录失败信息回显Login.jsp: 思路简述: 具体代码Code: 实现功能: 模拟简单登录功能,登录成功跳转新页面,登录失败在原登录界面提示登录失败信息 开发环境: eclipse Tomcat-8.0 预备知识: HTML标签,Servlet相关知识--请求的转发与重定向,jsp相关知识,EL表达式 思路实现:共2个jsp,一个servlet 1.登录界面login.jsp

  • Bootstrap + AngularJS 实现简单的数据过滤字符查找功能

     具体代码如下所示: find.html <!DOCTYPE html> <html ng-app="find"> <head> <title>字符查找</title> <meta charset="utf-8"/> <script src="../Script/angular.min.js" type="text/javascript">&l

随机推荐