13、使用路由和 $location 切换视图

　　对于一些单页面应用来说，有时候需要为用户展示或者隐藏一些子页面视图，可以利用 Angular 的 $route 服务来管理这种场景。

　　你可以利用路由服务来定义这样的一种东西：对于浏览器所指向的特定 URL，Angular 将会加载并显示一个模板，并实例化一个控制器来为模板提供内容。

　　在应用中可以调用 $routeProvider 服务上的函数来创建路由，把需要创建的路由当成一个配置块传给这些函数即可。伪代码如下：

 var someModule = anguler.module('someModule', [...module dependencies...]);

 someModule.config(function($routeProvider) {
     $routeProvider.
         when('url', {controller : aController, templateUrl : '/path/to/template'}).
         when(...other mappings for your app...).
         ...
         otherwise(...what to do if nothing else matches);
 });

　　以上代码中，当浏览器中的 URL 变成指定的取值时，Angular 将会加载 /path/to/template 路径下的模板，然后把这个模板中的根元素关联到 aController 上，最后一行中的 otherwise 调用可以告诉路由，在没有匹配到任何东西时跳转到这里。

　　下面构建一个小例子，但是需要把代码放到 web 服务器上中。

　　index.html

 <html ng-app="AMail">
     <head>
     </head>
     <body>
         <h1>A-Mail</h1>
         <div ng-view></div>
         <script src="../src/angular.js"></script>
         <script src="../src/angular-route.js"></script>
         <script src="controller.js"></script>
     </body>
 </html>

　　list.html

 <table>
     <tr>
         <td><strong>Sender</strong></td>
         <td><strong>Subject</strong></td>
         <td><strong>Date</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>Subject: </strong>{{message.subject}}</div>
 <div><strong>Sender: </strong>{{message.sender}}</div>
 <div><strong>Date: </strong>{{message.date}}</div>
 <!-- ng-bind 性能不如 {{}}，尽量只在 index.html 页面使用 ng-bind，避免花括号一闪而过-->
 <div>
     <strong>To: </strong>
     <span ng-repeat="recipient in message.recipients">{{recipient}}</span>
 </div>
 <div>{{message.message}}</div>
 <a href="#/">back to message list</a>

　　controller.js

 //为核心的 AMail 服务创建模块
 var aMailServices = angular.module('AMail', ['ngRoute']);

 //在 URL，模板和控制器之间建立映射关系
 aMailServices.config(function($routeProvider) {
     $routeProvider.
     when('/', {
         controller: ListController,     // 全局的 function 方式去找 Controller
         templateUrl: 'list.html'
     }).
     //注意，为了创建详情视图，在 id 前面加了一个冒号，从而指定了一个参数化的 URL 组件
     when('/view/:id', {
         controller: 'DetailController', // 用注册的方式去找 Controller
         templateUrl: 'detail.html'
     }).
     otherwise({
         redirectTo: '/'
     });
 });

 //一些虚拟邮件
 messages = [{
         id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
         date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
         message: 'Hey, we should get together for lunch sometime and catch up.'
         + 'There are many things we should collaborate on this year.'
     }, {
         id: 1, sender: 'maria@somecompany.com', subject: 'Where did you leave my laptop?',
         date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
         message: 'I thought you were going to put it in my desk drawer.'
         + 'But it does not seem to be there.'
     }, {
         id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',
         date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
         message: "Nobody panic, but my pet python is missing from her cage."
         + "She doesn't move too fast, so just call me if you see her."
     }];

 //把邮件发布给邮件列表模板，注意两种方式，建议使用下面注册的方式，避免全局的 function 污染
 function ListController($scope) {
     $scope.messages = messages;
 }

 aMailServices.controller('DetailController', function($scope, $routeParams) {
     $scope.messages = messages[$routeParams.id];
 });

　　效果如下：

　　

14、与服务器交互

　　真正的应用需要和真实的服务器进行交互，Angular 中提供了一个叫做 $http 的服务。它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易。它支持 HTTP、JSONP 和 CORS 方式。它还包含了安全性支持，避免 JSON 格式的脆弱性和 XSRF。可以让你轻松地转换请求和响应数据，甚至还实现了简单的缓存。

　　返回的响应数据示例如下：

 [
     {
         "id" : 0,
         "title" : "Paint pots",
         "description" : "Pots full of paint",
         "price" : 3.95
     },
     {
         "id" : 1,
         "title" : "Polka dots",
         "description" : "Dots with that polka groove",
         "price" : 12.95
     },
     {
         "id" : 2,
         "title" : "Pebbles",
         "description" : "Just little rocks, really",
         "price" : 6.95
     }
 ]

　　我们可以像下面这样编写查询代码：

 function ShoopingController($scope, $http) {
     $http.get('/products').success(function (data, status, headers, config) {
         $scope.items = data;
     });
 }

　　然后就可以应用到模板中了。

15、使用指令修改 DOM

　　指令扩展了 HTML 语法，同时它也是使用自定义的元素和属性把行为和 DOM 转换关联到一起的方式。通过这些指令，可以创建可复用的 UI 组件，配置你的应用，并且可以做到你能想象到的几乎所有事情，这些事情都可以在你的 UI 模板中实现。所以说，自定义指令是 Angular 的精髓。

　　与服务一样，你可以通过模块对象的 API 来定义指令，只要调用模块实例的 directive() 函数即可，其中 directiveFunction 是一个工厂函数，用来定义指令的特性。

var appModule = angular.module('appModule', [...]);
appModule.directive('directiveName', directiveFunction);

　　指令的东西很多，以后详解，这里先举个例子，感受下指令的魅力。

　　编写一个非常简单的指令：一个 <hello> 元素，它会把自己替换成 <div>Hi there</div>。

　　先看指令：

 var appModule = angular.module('app', []);

 appModule.directive('hello', function () {
     return {
         restrict: 'E',
         template: '<div>Hi there</div>',
         replace: true
     };
 });

　　这里，restrict 属性表示描述指令的风格，E 表示允许使用元素的形式；template 属性表示需要替换的内容；replace 属性设置为 true 表示会用 HTML 内容来替换模板。

　　可以在模板中这样使用它：

 <html lang="en" ng-app="app">
     <script src="../src/angular.js"></script>
     <script src="directive.js"></script>
     <body>
         <hello></hello>
     </body>
 </html>

　　把以上内容加载到浏览器中，就会显示

Hi there

16、校验用户输入

　　Angular 自动为 <form> 元素增加了一些好用的特性，使其更适合单页面应用。其中一个特性是，Angular 允许你为表单中的输入元素定义一个合法的状态，并且只有当所有元素都是合法状态时才允许提交表单。

　　控制器如下：

 var addUser = angular.module('AddUserModule', []);

 addUser.controller('AddUserController', function ($scope) {
     $scope.message = '';

     $scope.addUser = function () {
         // 这里把 user 真正保存到数据库中
         $scope.message = 'Thanks, ' + $scope.user.first + ', we added you!';
     }
 });

　　模板如下：

 <html ng-app="AddUserModule">
     <body>
         <form name="addUserForm" ng-controller="AddUserController">
             <div ng-show="message">{{message}}</div>
             <div>First name: <input name="firstName" ng-model="user.first" required></div>
             <div>Last name: <input ng-model="user.last" required></div>
             <div>Email: <input type="email" ng-model="user.email" required></div>
             <div>Age: <input type="number" ng-model="user.age" ng-maxlength="3" ng-minlength="1"></div>
             <div><button ng-click="addUser()" ng-disabled="!addUserForm.$valid">Submit</button></div>
         </form>
         <script src="../src/angular.js"></script>
         <script src="submit.js"></script>
     </body>
 </html>

　　在控制器中，可以通过 $valid 属性获取表单的校验状态，当表单中的所有输入项都合法时，Angular 将会把这个属性设置为 true，否则没有输入完成时禁用了 Submit 按钮。

　　

PS：到目前为止，已经介绍了 Angular 框架的几乎所有常用特性，掌握了这个《常用特性》系列的文章，就算是入门了，加油！

特别感谢：《用 AngularJS 开发下一代 Web 应用》

AngularJS 的常用特性（五）的更多相关文章

  1. AngularJS 的常用特性（一）

    前言:AngularJS 是一款来自 Google 的前端 JS 框架,该框架已经被应用到了 Google 的多款产品中,这款框架最核心特性有:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...

  2. AngularJS 的常用特性（四）

    11.使用 Module(模块) 组织依赖关系 Angular 里面的模板,提供了一种方法,可以用来组织应用中一块功能区域的依赖关系:同时还提供了一种机制,可以自动解析依赖关系(又叫依赖注入),一般来 ...

  3. AngularJS 的常用特性（三）

    6.表达式  在模板中使用表达式是为了以充分的灵活性在模板.业务逻辑和数据之间建立联系,同时又能避免让业务逻辑渗透到模板中. <div ng-controller="SomeContr ...

  4. AngularJS 的常用特性（二）

    3.列表.表格以及其他迭代型元素 ng-repeat可能是最有用的 Angular 指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝. 比如一个学生名册系统需要从服务器上获取学生信息,目前先把 ...

  5. Unity3D编辑器扩展（五）——常用特性（Attribute）以及Selection类

    前面写了四篇关于编辑器的: Unity3D编辑器扩展(一)——定义自己的菜单按钮 Unity3D编辑器扩展(二)——定义自己的窗口 Unity3D编辑器扩展(三)——使用GUI绘制窗口 Unity3D ...

  6. MVC常用特性

    MVC常用特性使用   简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将 ...

  7. AngularJS 最常用的几种功能

    AngularJS 最常用的几种功能 2017-04-13 吐槽阿福 互联网吐槽大会 第一 迭代输出之ng-repeat标签ng-repeat让table ul ol等标签和js里的数组完美结合 1 ...

  8. Vue的常用特性

    Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. ...

  9. 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

随机推荐

  1. jquery 方法学习

    遍历 .add():将元素添加到jquery对象 argument:selector, element, html, jqueryObject $('li').add('p').css('backgr ...

  2. oracle数据库查询日期sql语句（范例）、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据（一整列）

    先列上我的数据库表格: c_date(Date格式)     date_type(String格式) 2011-01-01                   0 2012-03-07         ...

  3. Android-Android/APP-理解

    Android 1.Google Android 给出的官方Android架构图就是大家都知道的四层,第一层是应用层(就是很多能够看得到的应用),第二层是应用框架层(为application提 供各种 ...

  4. ASP.NET下使用Combres对JS、CSS合并和压缩

    记录一下,如何简单快捷压缩js和css,通过合并来减少请求次数. 用到的网址: http://www.nuget.org/packages/combres/ https://github.com/bu ...

  5. devexpress 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 “lc.exe”已退出，代码为 -1。

    将licensens.licx删除,就能正常运行

  6. HI-LO计数法，赌桌，与机会

    HI-LO计数法,赌桌,与机会 “人只是在拼一种可能性”. 很多简单道理往往字面上理解容易,可实际运用难极. 一,那些人生中被扯的蛋 而关于人生的指导,好多耳熟能详的老话最终都被发现是蒙傻逼的.随便说 ...

  7. 一文看尽 Raft 一致性协议的关键点

    本文由  网易云 发布. 作者:孙建良 Raft 协议的发布,对分布式行业是一大福音,虽然在核心协议上基本都是师继 Paxos 祖师爷(Lamport) 的精髓,基于多数派的协议.但是 Raft 一致 ...

  8. http 缓存策略浅析

    从一道经典的面试题说起 "用户输入 URL 到浏览器显示页面,这个过程发生了什么?",作为前端开发,这个题目相信大家并不陌生.楼主的答案分为两部: 一.网络通信 应用层 DNS 域 ...

  9. python里面如何拷贝一个对象？deepcopy 和 copy 有什么区别 ？

    深拷贝就是说原内容改变但是拷贝的性内容不会改变,copy.copy和deepcopy对一个不可变类型进行拷贝, name结果相同都是浅拷贝指向引用如果是可变的话, 即使元组在最外层, 那么deepco ...

  10. 把本地git仓库的项目上传到远程仓库

    之前在学校实验室服务器上建了一个git远程仓库,存放我写的express项目代码.后来由于出去实习,就无法访问那个远程仓库了,因为它在校园网内. 还好我的笔记本中有这个项目完整的本地仓库,于是我就试着 ...