Angularjs制作简单的路由功能demo
2015-04-13 00:00
1061 查看
从官网下载了最新版本的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--一个简单的UI-Router路由demo
- 使用.NET自带的功能制作简单的注册码
- BCB里用MCI实现简单的录音功能(摘录自BCB Demo)
- AS3 服务端、客户端协议路由简单写法 ---- AS3 Server、Client Router Demo
- 简单易用的安装文件制作工具NSIS的使用demo示例
- 如何进行简单的功能仿制(网页制作)
- 配置PPPOE路由功能,ADSL简单共享
- ZendStudio php WebService制作一:简单WebService Demo
- WPF学习——制作一个简单的录入界面(2):用C#编程实现所有控件的功能
- openwebglobe 简单功能实现 Virtual Earth (虚拟地球)demo
- Vs2005之简单日志工具的制作--1.需求分析与功能设计
- 使用.NET自带的功能制作简单的注册码
- vb制作简单的多窗口浏览器(8)--设置功能
- PHP实现一个简单url路由功能
- 使用.NET自带的功能制作简单的注册码
- XNA Game Studio是一套有着强大功能和简单界面的游戏制作平台,游戏开发商和游戏玩家都可以使用这套工具开发针对Windows XP以及Xbox360的游戏,XNA Game Studio分为两种版本,一种是面向初学者的EXPRESS版本,还有一种是面向专业用户的专业版。用户使用EXPRESS版本开发游戏完全免费,并且可以随意在PC上发行,不过用该工具开发的游戏若是在360上网络发行,就需要交纳99美元的年费。
- 学习OGRE制作简单人物行走demo(二)
- MVC简单实现插件Demo-从底层理解MVC路由匹配浏览器请求的URL
- jfinal整合kaptcha实现验证码功能简单Demo
- vbs简单制作U灵大盗带发送功能的代码