[AngularJS]Chapter 8 秘籍诀窍
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>File Upload with AngularJS</title>
<!-- Because we are loading jQuery before AngularJS,
Angular will use the jQuery library instead of
its own jQueryLite implementation -->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script
src="http://raw.github.com/blueimp/jQuery-File-Upload/master/js/vendor/
jquery.ui.widget.js">
</script>
<script
src="http://raw.github.com/blueimp/jQuery-File-Upload/master/js/
jquery.iframe-transport.js">
</script>
<script
src="http://raw.github.com/blueimp/jQuery-File-Upload/master/js/
jquery.fileupload.js">
</script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
File Upload:
<!-- We will define uploadFinished in MainCtrl and attach
it to the scope, so that it is available here -->
<input id="testUpload"
type="file"
fileupload
name="files[]"
data-url="/server/uploadFile"
multiple
done="uploadFinished(e, data)">
</body>
</html>
到现在为止。我们已经件讲述了AngularJS的绝大部分内容。包括指令，服务，控制器，资源等等。但是我们也知道只看不实践是不行的。有时我们并不关心Angular是怎样工作的。我们只是想知道怎么才能让它工作。
这本本章中。我们会通过给出完整例子，来说明常见问题。
这些例子包括
1、使用jQuery Datepicker
2、Teams List应用：控制器和过滤器的通讯
3、AngularJS中的文件上传
4、私用socket.io
5、使用服务(Servers)
【使用jQuery Datepicker】
源码在github中可见
我们想这样定义我们的datepicker组件
<input datepicker ng-model="currentDate" select="updateMyText(date)"></input>
js这样写
代码很简单。我们来看看特殊的部分。
ng-model
绑定选择事件
调用选择事件
【本例的其他部分】
var app = angular.module('myApp', ['myApp.directives']);
app.controller('MainCtrl', function($scope) {
$scope.myText = 'Not Selected';
$scope.currentDate = '';
$scope.updateMyText = function(date) {
$scope.myText = 'Selected';
};
});
HTML部分
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Datepicker</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/
angular.min.js">
</script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="datepicker.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input id="dateField"
datepicker
ng-model="$parent.currentDate"
select="updateMyText(date)">
<br/>
{{myText}} - {{currentDate}}
</body>
</html>
【团队列表APP：过滤器和控制器的通信】
【AngularJS中的文件上传】
另一个常见的用法师上传文件。虽然我们可以通过input type=file来实现，但是。我们现在将要拓展文件上传解决方案。比较好的一个是BlueImp’s File Upload，他使用jQuery和jQueryUI。它的api非常简单
代码如下
angular.module('myApp.directives', [])
.directive('fileupload', function() {
return {
restrict: 'A',
scope: {
done: '&',
progress: '&'
},
link: function(scope, element, attrs) {
var optionsObj = {
dataType: 'json'
};
if (scope.done) {
optionsObj.done = function() {
scope.$apply(function() {
scope.done({e: e, data: data});
});
};
}
if (scope.progress) {
optionsObj.progress = function(e, data) {
scope.$apply(function() {
scope.progress({e: e, data: data});
});
}
}
// the above could easily be done in a loop, to cover
// all API's that Fileupload provides
element.fileupload(optionsObj);
}
};
});
这些代码是我们能够简单的定义我们的制定。并且制定onDone和onProgress的回调函数。我们使用函数绑定。这样AngularJS一直能正确调用方法和使用正确的变量。
这是因为我们做了独立的作用域声明。它包含了两种绑定：使用是为onprogree另一种是为ondone。
HTML部分代码如下
angular.module('myApp.directives', [])
.directive('datepicker', function() {
return {
// Enforce the angularJS default of restricting the directive to
// attributes only
restrict: 'A',
// Always use along with an ng-model
require: '?ngModel',
scope: {
// This method needs to be defined and
// passed in to the directive from the view controller
select: '&' // Bind the select function we refer to the
// right scope
},
link: function(scope, element, attrs, ngModel) {
if (!ngModel) return;
var optionsObj = {};
optionsObj.dateFormat = 'mm/dd/yy';
var updateModel = function(dateTxt) {
scope.$apply(function () {
// Call the internal AngularJS helper to
// update the two-way binding
ngModel.$setViewValue(dateTxt);
});
};
optionsObj.onSelect = function(dateTxt, picker) {
updateModel(dateTxt);
if (scope.select) {
scope.$apply(function() {
scope.select({date: dateTxt});
});
}
};
ngModel.$render = function() {
// Use the AngularJS internal 'binding-specific' variable
element.datepicker('setDate', ngModel.$viewValue || '');
};
element.datepicker(optionsObj);
}
};
});
controller如下
var app = angular.module('myApp', ['myApp.directives']);
app.controller('MainCtrl', function($scope) {
$scope.uploadFinished = function(e, data) {
console.log('We just finished uploading this baby...');
};
});
【使用Socket.IO】
【与服务器协同与登录】
最后一个例子涵盖了很多内容。大部分与$http资源有关。根据我们的经验。$http服务是AngularJS中核心服务之一。但是他能被拓展去做很多常规web app需求，这包括：
拥有错误处理链
能够处理授权和登录跳转。
不通过JSON与服务器工作
与外部系统通过jSON工作
所以在这个例子中。我们开发一个完整的应用程序骨架，有这些内容：
1、当错误发生时，跳转到一个统一的错误处理页面。
2、拥有一个ErrorService，能够使指令与视图和控制器之间通信。
3、触发事件，只要服务器返回一个401，这个会被根控制器处理，应用程序级别的根控制器
4、更改请求报文头，增加一些关于当前用户的特定验证信息。
我们不会带大家做整个应用程序，这程序很简单。我们重点说相关步骤。这会很省时间。如果你想复习Server和Factories，回到第七章去。如果你想看着怎么用service，看第5章去。
首先我们看一哈Error Service
var servicesModule = angular.module('myApp.services', []);
servicesModule.factory('errorService', function() {
return {
errorMessage: null,
setError: function(msg) {
this.errorMessage = msg;
},
clear: function() {
this.errorMessage = null;
}
};
});
我们的与Error service独立的错误消息会查找警告消息属性，并且绑定它。并且警告这条消息。
// USAGE: <div alert-bar alertMessage="myMessageVar"></div>
angular.module('myApp.directives', []).
directive('alertBar', ['$parse', function($parse) {
return {
restrict: 'A',
template: '<div class="alert alert-error alert-bar"' +
'ng-show="errorMessage">' +
'<button type="button" class="close" ng-click="hideAlert()">' +
'x</button>' +
'{{errorMessage}}</div>',
link: function(scope, elem, attrs) {
var alertMessageAttr = attrs['alertmessage'];
scope.errorMessage = null;
scope.$watch(alertMessageAttr, function(newVal) {
scope.errorMessage = newVal;
});
scope.hideAlert = function() {
scope.errorMessage = null;
// Also clear the error message on the bound variable.
// Do this so that if the same error happens again
// the alert bar will be shown again next time.
$parse(alertMessageAttr).assign(scope, null);
};
}
};
}]);
我们把错误消息加到HTML上。如下
<div alert-bar alertmessage="errorService.errorMessage"></div>
我们需要确认ErrorService在errorService控制器中可用，在我们添加上面的HTML之前。这就是说，如果RootController担任产生AlertBar的功能，那么就有
app.controller('RootController',
['$scope', 'ErrorService', function($scope, ErrorService) {
$scope.errorService = ErrorService;
});
这样我们就创建好了一个非常好的显示隐藏警告的框架。下面我们看看我们怎么样处理各种服务器返回给我们的各种状态码，通过使用拦截器
servicesModule.config(function ($httpProvider) {
$httpProvider.responseInterceptors.push('errorHttpInterceptor');
});
// register the interceptor as a service
// intercepts ALL angular ajax HTTP calls
servicesModule.factory('errorHttpInterceptor',
function ($q, $location, ErrorService, $rootScope) {
return function (promise) {
return promise.then(function (response) {
return response;
}, function (response) {
if (response.status === 401) {
$rootScope.$broadcast('event:loginRequired');
} else if (response.status >= 400 && response.status < 500) {
ErrorService.setError('Server was unable to find' +
' what you were looking for... Sorry!!');
}
return $q.reject(response);
});
};
});
现在我们要做的就是
【总结】
至此本书结束。我们毫无保留的尽量全面介绍了AngularJS。我们的目标是使读者能够轻松开发AngularJS程序打下坚实的基础。本书中举了大量实例来解释，并且本书包括大量关于AngularJS的基础知识和一些高级话题
[AngularJS]Chapter 8 秘籍诀窍的更多相关文章
- [AngularJS]Chapter 5 与服务器交互
第八章有关于缓存的东西. [通过$http交互] 传统的AJAX请求如下 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange ...
- [AngularJS]Chapter 3 使用AngularJS构建应用程序
本章内容提要: 如何布置AngularJS进行快速开发 开启服务器进行测试 使用Karma进行单元测试用例测试 编译压缩AngularJS进行生产 使用Batarang进行Debug 如何简化开发工作 ...
- [AngularJS]Chapter 2 剖析安哥拉JS应用程序
不同于普通的框架,你可以从中选择你想用的方法.在anjular中是不同组件写作工作的.这章中,你会看到anjular中基本的组成部分并且理解他们是如何协同工作的.很多组件会在以后的章节中详细讲解.[开 ...
- [AngularJS]Chapter 4 AngularJS程序案例分析
前边讲的都是基础.本章看看他们怎么合作的. 我们要建一个程序.一次一步.章末结束 [这个程序] GutHub是一个简单的菜谱管理程序.功能是存好吃的的菜谱并提供步骤.这个程序包含: 两列布局 左边是导 ...
- [AngularJS]Chapter 1 AnjularJS简介
创建一个完美的Web应用程序是很令人激动的,但是构建这样应用的复杂度也是不可思议的.我们Angular团队的目标就是去减轻构建这样AJAX应用的复杂度.在谷歌我们经历过各种复杂的应用创建工作比如:GM ...
- AngularJS之备忘与诀窍
译自:<angularjs> 备忘与诀窍 目前为止,之前的章节已经覆盖了Angular所有功能结构中的大多数,包括指令,服务,控制器,资源以及其它内容.但是我们知道有时候仅仅阅读是不够的. ...
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- AngularJS快速入门指南20：快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南16：Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
随机推荐
- POJ 2019
简单的RMQ,可我怎么写都WA.不明白,找了一个和我相似的贴过了,要赶着去外婆家. #include <iostream> #include <algorithm> #incl ...
- HDU 3886
一开始又往打表想了....不过,打表确实不好处理,转DFS. DFS有几个要注意的问题,1.对于枚举以零开始的数.我纠结了很久,最终学习别人的方法,设一个BOOL,并且假设最高一位有零,很方便.2.当 ...
- 第18题 Remove Element
Given an array and a value, remove all instances of that value in place and return the new length. T ...
- linux下測试硬盘读写速度
买了个ssd硬盘,就想着跟普通的机械盘做个比較.由于桌面装的是ubuntu系统,所以就想用linux的命令简单測一下好了 以下是ssd的性能数据: 測试写: xxx@WaitFish:~ > t ...
- Oracle 位图索引
内容简介: 1.位图索引 1.1位图索引使用注意事项; 1.2 使用位图索引; 1.3 位图索引对DML操作的影响; 2.位图连接索引 2.1 明确需求后使用位图索引; 2.1创建位图连接索引的注意事 ...
- 解决 Eclipse 导入项目后 Maven Dependencies missing jar 问题
转自:https://yq.aliyun.com/ziliao/314086 话不多说直接上图 上图是我通过git导入项目后, Maven Dependencies Library中很多包出现miss ...
- 31.QT坐标系
dialog.h #ifndef DIALOG_H #define DIALOG_H #include <QDialog> #include <QLabel> #include ...
- Spark RDD概念学习系列之transformation操作
不多说,直接上干货! transformation操作 惰性求值 (1)RDD 的转化操作都是惰性求值的.这意味着在被调用行动操作之前Spark不会开始计算. (2)读取数据到RDD的操作也是惰性的. ...
- Repeater控件使用小结持续更新
Repeater嵌套Repeater绑定数据 前台代码 <!--注意层级关系不要写错了--> <asp:Repeater ID="rpGroup" runat=& ...
- Oracle [sys_connect_by_path] 函数
create table test ( NO NUMBER, VALUE VARCHAR2(100), NAME VARCHAR2(100) ); -------------------------- ...