Angularjs 路由学习笔记

从官网下载了最新版本的Angularjs 版本号:1.3.15

做一个简单的路由功能demo

首页:index.html

 1 <!DOCTYPE html >
 2
 3 <html>
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>测试</title>
 7     <script src="./js/angular.min.js"></script>
 8     <script src="./js/angular-route.min.js"></script>
 9 </head>
10 <body ng-app="myApp">
11     <div ng-controller="TextController">
12          <p>{{someText}}</p>
13     </div>
14     <div ng-view></div>
15 </body>
16     <script>
17         var myApp = angular.module(‘myApp‘, [‘ngRoute‘]);
18         myApp.controller(‘TextController‘, function ($scope) {
19             $scope.someText = ‘测试显示内容‘;
20         });
21
22         //路由
23         function emailRouteConfig($routeProvider) {
24             $routeProvider.
25             when(‘/‘, {
26                 controller: ListController,
27                 templateUrl: ‘list.html‘
28             }).
29             when(‘/view/:id‘, { //在id前面加一个冒号,从而制订了一个参数化URL
30                 controller: DetailController,
31                 templateUrl: ‘detail.html‘
32             }).
33             otherwise({
34                 redirectTo: ‘/‘
35             });
36         }
37
38         myApp.config(emailRouteConfig);//配置我们的路由
39
40         messages = [{
41             id: 0, sender: "[email protected]", subject: "你好,这是一封邮件", date: "2015年4月13日", recipients: [‘[email protected]‘], message: "你好,我是xxx,这是发送给您的邮件。"
42         }, {
43             id: 1, sender: "[email protected]", subject: "你好,这是一封邮件", date: "2015年4月13日", recipients: [‘[email protected]‘], message: "你好,我是xxx,这是发送给您的邮件。"
44         }, {
45             id: 2, sender: "[email protected]", subject: "你好,这是一封邮件", date: "2015年4月13日", recipients: [‘[email protected]‘], message: "你好,我是xxx,这是发送给您的邮件。"
46         }];
47
48         function ListController($scope) {
49             $scope.messages = messages;
50         }
51
52         function DetailController($scope,$routeParams) {
53             $scope.message = messages[$routeParams.id];
54         }
55     </script>
56 </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‘])

时间: 2024-11-06 09:45:51

Angularjs 路由学习笔记的相关文章

angularJs的学习笔记

angularJs的学习笔记,记录一下,额外学习,不用到项目中,怕以后忘了. 参考地址:http://www.ituring.com.cn/article/13473  改地址比较老了  建议多看看评论  英文好的可以看看这个 https://docs.angularjs.org/tutorial 1.搭建学习环境 本人用的Mac mini,根据参考地址学习angularJS,需要安装node和Testacular a.安装node 终端中: git clone git://github.com

AngularJS入门学习笔记一

首先声明: 本博客源自于学习:跟我学AngularJs:AngularJs入门及第一个实例.通过学习,我自己的一些学习笔记. 1.AngularJS的一些基本特性 (1)使用双大括号{{}}语法进行数据绑定: (2)使用DOM控制结构来实现迭代或者隐藏DOM片段: (3)支持表单和表单的验证: (4)能将逻辑代码关联到相关的DOM元素上: (5)能将HTML分组成可重用的组件. 他是MVC结构的,有双向数据绑定的特点.下图是双向数据绑定的图解: 使用DOM作为输入,而不是字符串,是Angular

AngularJS的学习笔记(一)

声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括号{{}}语法进行数据绑定: 使用DOM控制结构来实现迭代或者隐藏DOM片段: 支持表单和表单的验证: 能将逻辑代码关联到相关的DOM元素上: 能将HTML分组成可重用的组件. AngularJS主要考虑的是构建CRUD应用.(增加Create.查询Retrieve.更新Update.删除Delet

vue2.0 路由学习笔记

昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li a 为例 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 使用 rou

路由学习笔记与H3C F100-s简单配置

思科路由器 每个接口属于不同的网络 在此请注意,每个接口必须属于不同的网络.尽管 IOS 允许在两个不同的接口上配置来自同一网络的 IP 地址,但路由器不会同时激活两个接口. 例如,如果为 R1 的 FastEthernet 0/1 接口配置 192.168.1.0/24 网络上的 IP 地址,会出现什么情况呢?FastEthernet 0/0 已分配到同一网络上的地址.如果为接口 FastEthernet 0/1 也配置属于这一网络的 IP 地址,则会收到以下消息: R1(config)#in

AngularJS的学习笔记(二)

只给自己看的. AngularJS 表达式 angularjs 使用表达式将数据绑定到html中. AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量 数字:{{5*5}}和ng-bind="5*5"

ensp单臂路由学习笔记

交换机vlan路由实验--单臂路由方式 网络拓扑图: 路由器上的配置: <R>system-view [R]interface Ethernet 0/0/0.1 [R-Ethernet0/0/0.1]dot1q termination vid 10 [R-Ethernet0/0/0.1]ip address 192.168.1.1 255.255.255.0 [R-Ethernet0/0/0.1]q [R]interface Ethernet 0/0/0.2 [R-Ethernet0/0/0.

静态路由---学习笔记(原型)

一?路由原理 1.路由器工作原理:通过在PC上设置默认网关就可以是局域网的计算机和INTERNET进行通信.默认网关就是路由器以太口的IP地址. 2.路由表形成:路由表是路由器中为呼呼的路由条目的集合,路由器根据路由表做路径选择.①直连网段:当在路由器上配置了接口的IP地址,并且接口状态为"up"时,路由表出现直连路由项.②非直连网段:不直接连接在路由器上的网段. 二?静态路由和默认路由 静态路由:静态路由是由管理员在路由器中手动配置的固定路由.①特点:(1)允许对路由的行为进行精确控

AngularJS第一次学习笔记

------------ ---------- ------ ---- --- ---