本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器:

下面,通过一个例子,来一步一步说明它的用法:

我们要做一个邮箱应用,打开的时候显示的是邮件列表:

然后点击邮件主题,可以查看该邮件的详细内容:

点击返回列表,再回到列表页

一. 创建index页面:

<!DOCTYPE html>

<html>

<head>

  <title>14.1路由和视图切换</title>

  <meta charset="utf-8">

  <script src="../../angular.js"></script>

  <script src="controller.js"></script>

  <link type="text/css" href="style.css" rel="stylesheet" />

</head>

<body>

<div ng-app="A-Mail">

  <h3>A-Mail</h3>

  <br>

  <div ng-view></div>

</div>

</body>

</html>

这一步需要做的事情有:

①. 通过ng-app,使用某个模型来管理页面

②. 通过ng-view,创建空的div,里面的内容会根据url的hash值来调用不同的视图模板,并且使用不同的控制器

③. 写好公共的,始终被显示的视图部分,比如这里的标题: <h3>A-Mail</h3>

二. 创建需要被调用的其它视图, 也就会是放在ng-view中的视图模板:

①list.html:

<table>

  <tr><th>发件人</th><th>主题</th><th>发送时间</th></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>

当hash值为空的时候,ng-view中应该显示的是邮件的列表.

注意,其中邮件的链接应该使用"#/..." 使用#开头表示改变路径的hash值

比如我输入这个链接:

http://localhost:801/angular/OREILLY/14.1.路由和视图切换/index.html

打开后,它会自己变成:

http://localhost:801/angular/OREILLY/14.1.路由和视图切换/index.html#/

如果跳转到"#/view/001",

url就会变成: http://localhost:801/angular/OREILLY/14.1.路由和视图切换/index.html#/view/001

②detail.html:

<p><b>主题:</b><span>{{message.subject}}</span></p>

<p><b>发件人:</b><span>{{message.sender}}</span></p>

<p><b>发送时间:</b><span>{{message.date}}</span></p>

<h4>To:</h4>

<ul class="clear_float"><li ng-repeat="name in message.recipients">{{name}}; </li></ul>

<hr>

<div>{{message.content}}</div>

<a class="button" href="#/">返回列表</a>

当hash值为view/id的时候,显示的应该是当前id的邮件详细内容

返回列表按钮返回到没有hash值的路径

三. 创建模块,路由,控制器:

var messages = [

    {

        "id":"001",

        "sender":"兔小宝",

        "subject":"给小宝买草",

        "date":"Dec 7, 2014 12:32:00",

        "recipients": ["小a","米米","小黑"],

        "content":"今天一定要给我买草啊!!!"

    },

    {

        "id":"002",

        "sender":"周孝刚",

        "subject":"给小宝加水",

        "date":"May 12, 2014 05:04:00",

        "recipients": ["兔兔","粥粥","小白"],

        "content":"今天一定要给小宝加水啊!!!"

    },

    {

        "id":"003",

        "sender":"code_bunny",

        "subject":"买凉席",

        "date":"Thu 14, 2014 04:14:00",

        "recipients": ["white_bunny","sb","小米"],

        "content":"今天一定要给买凉席啊!!!"

    }

];

var aMail = angular.module('A-Mail',[]);

aMail.controller('listControll',function($scope){

    $scope.messages = messages;

});

aMail.controller('detailControll',function($scope, $routeParams){

    var index = parseInt($routeParams.id)-1;

    $scope.message = messages[index];

});

aMail.config(function($routeProvider){

    $routeProvider.when('/',{controller:'listControll',templateUrl:'view/list.html'}).when('/view/:id',{controller:'detailControll',templateUrl:'view/detail.html'}).otherwise({redirectTo:'/'})

});

①.messages是虚拟的数据

②.创建该应用使用的模型

③.给该模型创建两个控制器,分别用于控制邮件列表视图和邮件详细内容视图

④.给该模型配置路由:

aMail.config(function($routeProvider){

$routeProvider.when('hash1',{controller:'someController1',templateUrl:'path/to/view1}).when('hash2',{controller:'someController2',templateUrl:'path/to/view2'})....when().otherwise({redirectTo:'/'})

})

config方法传入一个函数,函数中传入参数"$routeProvider"作为服务.

$routeProvider.when(hash,obj)用于配置路由:

　　hash: 字符串格式. 匹配url的hash值,注意这里不要#, '/' 就表示hash值为空.

　　obj: 一个json对象,对象有以下这些属性:

　　  controller: '控制器'    : 字符串格式,定义控制ng-view元素的控制器

　　template: '视图模板'  : 字符串格式,定义ng-view元素下应该使用哪个视图模板来填充内容,写的是视图模板的路径

　　redirectTo: '路径'     : 字符串格式,定义重定向到哪里,注意定义的也是hash值

$routeProvider.otherwise()用于当没有匹配到任何路由的时候执行的内容:

参数和when的第二个参数用法一致

⑤.$routeParams服务:

关于服务的概念,可以参考这篇:http://www.cnblogs.com/liulangmao/p/3727808.html

$routeParems可以获取到一个参数化的url组件.这个组件比较复杂,单就这个例子来看,我们在配置路由的时候在when的url属性传入了/view/:id作为匹配,这样,就会把'view/'后面的内容,作为$routeParems对象的id属性值

angular学习笔记(十七)-路由和切换视图的更多相关文章

  1. Ionic学习笔记4_ionic路由(页面切换)

    1.1.  ionic路由机制: 状态 1.2.  ion-nav-view <body ng-controller="firstCtrl"> <a class= ...

  2. Angular 学习笔记 （路由外传 - RouteReuseStrategy）

    refer : https://github.com/angular/angular/issues/10929 https://stackoverflow.com/questions/41280471 ...

  3. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  4. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  5. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  6. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  7. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  8. SpringBoot学习笔记：动态数据源切换

    SpringBoot学习笔记:动态数据源切换 数据源 Java的javax.sql.DataSource接口提供了一种处理数据库连接的标准方法.通常,DataSource使用URL和一些凭据来建立数据 ...

  9. python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容

    python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容 Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖 ...

随机推荐

  1. css中clear属性的认识

    今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both. 然后去W3C文档里和百度补脑了一下,总结如下: 这是之前我写的一段测试代码: <div style=&qu ...

  2. spring mvc中@requesMapping的可配置参数和标注的处理方法的可选参数

    @RequestMapping的可选参数 value:表示需要匹配的url的格式. method:表示所需处理请求的http 协议(如get,post,put,delete等),可选值为Request ...

  3. logging日志管理--将日志打印在屏幕上

    # -*- coding: cp936 -*- # test.py #http://blog.chinaunix.net/uid-27571599-id-3492860.html #logging日志 ...

  4. ASP.NET 对字符串大小写切换

    来源:http://www.codeproject.com/Tips/297011/How-to-Toggle-String-Case-in-NET#alternative22 使用LINQ: pub ...

  5. 设置sqlplus访问远程oracle数据库的最快方法

    设置sqlplus访问远程oracle数据库的最快方法 时间:2010-01-21 10:57来源: 作者: 点击: 2次 设置sqlplus访问远程oracle数据库的最快方法,如果要连接远程数据库 ...

  6. HDUOJ---2642Stars（二维树状数组）

    Stars Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/65536 K (Java/Others)Total Submi ...

  7. [转]网易云音乐Android版使用的开源组件

    原文链接 网易云音乐Android版从第一版使用到现在,全新的 Material Design 界面,更加清新.简洁.同样也是音乐播放器开发者,我们确实需要思考,相同的功能,会如何选择.感谢开源,让我 ...

  8. 彻底理解Python切片

    关于list的insert函数 list#insert(ind,value)在ind元素前面插入value 首先对ind进行预处理:如果ind<0,则ind+=len(a),这样一来ind就变成 ...

  9. jQuery：用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码

    最近在做前端开发项目中,需要用到树形结构.在网上查阅到了许多相应资源.其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码,结构简单,支持多级.还有详细的参数可以配置,以实现各种效果 ...

  10. 【LeetCode】154. Find Minimum in Rotated Sorted Array II (3 solutions)

    Find Minimum in Rotated Sorted Array II Follow up for "Find Minimum in Rotated Sorted Array&quo ...