# ➢ AngularJS HTTP Service

$httpAngularJS提供的一个核心Service，通过浏览器的XMLHttpRequest或JSONP与服务器进行交互。 这是一个非常常用的Service，类似于jQuery提供的AJAX。与jQuery类似，$http也采用了deferred/promise模式，不同的是Angular的deferred/promise模式是由Angular的$qService来提供的。 在Angular应用中尽量使用$http而不是jQuery函数来进行AJAX请求，因为$http会在响应到达时触发Angular更新视图（$digest循环）。 与此同时，$http还可以通过$httpBackend来Mock和单元测试。

$http文档参见： https://docs.angularjs.org/api/ng/service/$http

# 基本使用

// GET成功时被回调
})
// GET失败时被回调
});


$http方法返回的是一个由$qService提供的Promise对象，事实上Promise对象有三个通用方法：then, catch, finally。 上述的successerror$http提供的两个额外的方法。Promise的三个方法参数如下： then(successCallback, errorCallback, notifyCallback); catch(errorCallback); finally(callback, notifyCallback);  Promise方法是可以链式调用的。 # 配置$httpProvider

$http Service定义在ng Module里，由$httpProvider提供。于是我们可以通过设置$httpProvider来配置$http的行为。比如，给HTTP请求插入一个拦截器：

someModule.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push(function($q, dependency1, dependency2){
return {
request: function(config){
// 这里可以调整HTTP请求的配置
return config;
},
response: function(response){
// 这里能拿到响应对象，当然也可以更改它
return response;
}
}
});
}]);


<div class="alert alert-danger" ng-show="someForm.username.$error.pattern"> 用户名必须为6-18个字母、数字或下划线 </div> </ng-form> </div>  ng-model可以把input的值双向地绑定到当前上下文的user.username变量。我们设置了用户名的pattern为6到18位。我们输入用户名时，.alert错误提示便会实时地显示或者隐藏。 这里我们指定了formname属性，form Directive 实例化的FormController就会以someForm命名，并插入到当前$scope。所以在模板中才能够访问userForm变量。另外，Angular的Pattern使用Javascript正则表达式语法，这里\w相当于[a-zA-Z_]

# Angular APP

<div ng-app>
<ng-form>...</ng-form>
</div>


angular.bootstrap(element, ['helloApp']);


AngularJS通过依赖注入的方式来实现模块化与封装。在启动APP之前，往往需要注入一些APP所在环境的信息：

var app = angular.module('helloApp'); // 获得之前声明的那个叫helloApp的模块
app.constant('sessionInfo', {
'currentUser': $('input#current-user').val(), 'uploadDir':$('input#upload-dir').val()
});


# ➢ Accessing the System Clipboard with JavaScript

I am developing an API written in JavaScript for a project which requires the ability to copy data to, and retrieve data from, a clipboard within a web browser. A simple/common problem definition – but due to tight browser security, finding a solution is a bit of a nightmare. This article outlines and discusses a number of approaches for implementing a clipboard feature into your JavaScript applications.

# The Ideal JavaScript Clipboard Interface

The concept of the “clipboard” is simple; it is essentially a place for storing and retrieving a single unit/piece of cloned data. The code snippet below describes this clipboard concept in terms of a JavaScript interface.

Clipboard = {
copy : function(data) {
//... implemention …
},
getData : function() {
// … implementation …
}
};


A simple concept, a self explanatory interface. However, the description above is vague; it does not state where “the clipboard” resides, nor does it mention if there can be more than one clipboard.

## Multiple Clipboards

Unfortunately there can be more than one clipboard present. There is one “System clipboard” present when a user is logged into their profile/account (some strange people might install/configure some features on their OS to support multiple system clipboards). Ideally, all applications should use the system clipboard when copying and pasting so its users can copy and paste between all applications. However this is not always the case. For example, Cygwin uses its own clipboard for Cygwin applications and unless the user explicitly turns on a clipboard integration option, the user cannot copy and paste between Cygwin applications and non-Cygwin applications.

## The Web’s Sandbox Environment

Web applications run in a sandbox environment to prevent malicious scripts from infecting a visitor’s computer. The sandbox environment restricts access to system resources, such as the file system, and unfortunately, the system clipboard. Check out this article for one example why the system clipboard is a restricted resource. Fortunately restrictions for accessing the system clipboard can be overcome. There are many approaches for accessing the system clipboard – each approach has its own trade-offs.

# Internet Explorer’s clipboardData Object

Microsoft’s Internet Explorer family makes life very easy to access the system clipboard. To set the system clipboard’s text, just use the clipboardData object. Here is an example:

var didSucceed = window.clipboardData.setData('Text', 'text to copy');


To access the system’s clipboard data (in a textual format) you simply invoke:

var clipText = window.clipboardData.getData('Text');


The first time the clipboardData object is accessed IE will prompt the user to allow the script to access the system clipboard (note: if you run the script locally IE does not bother with the confirmation and automatically allows it). IE version 6 and below will not bother asking the users (unless they have some non-default security features set to a “high level”). We cannot assume that users will choose to allow the script to access the system clipboard. If they decline, the clipboardData.setData method returns false. Unfortunately the clipboardData.getData method is vague: as it returns an empty string if the user chooses to decline. This is ambiguous since the system clipboard’s contents could actually be empty! Ideally it would return null. You could either always assume that empty string is a signal for failure to access the clipboard and try use a different method (read on), or you could attempt to verify that it was a failure:

var clipText = window.clipboardData.getData('Text');
if (clipText == “”) { // Could be empty, or failed
// Verify failure
if (!window.clipboardData.setData('Text', clipText))
clipText = null;
}


Note: the verification method will not display two prompts, since the first prompt will be remembered for the session.

# JavaScript

• 通过NPM提供的npm命令来进行依赖的下载、升级和移除。
• 通过package.json来定义软件包的元信息、开发依赖（开发或测试需要）、部署依赖（运行时需要）。
• 依赖递归地存储在node_modules中。
• 依赖在项目之间是隔离的，全局安装（-g）会使它成为命令行工具而不是全局依赖。

递归的依赖下载风格使得NPM的缓存及其重要。缓存位于~/.npm下，这里保存这.tgz格式的包文件。

JavaScript 通常使用 Grunt 进行构建。

• Grunt通过插件来完成任务，每个插件相当于Makefile的一个命令。
• Grunt任务定义在Gruntfile.js中。
• NPM提供了众多的Grunt插件，当然你也可以手写。
• Grunt任务继承了JavaScript的异步特性。

# 前端 lib

• 通过bower命令进行依赖管理。
• bower.json定义了软件包的元信息与依赖。
• 依赖所在路径可以在bower.json中进行设置。
• Bower只是一个命令行工具，你需要在正确的路径执行Bower命令。

Bower可以灵活地下载各种依赖，但它的缺点也是明显的：未注册的软件包往往包含冗余的非生产环境的代码，有时甚至需要手动构建。

# Box Sizing：元素大小的计算方式

<style>
.box-demo{
width: 100px;
height: 100px;
border: 50px solid green;
margin: 50px;
background: yellow;
}
</style>
<div class="box-demo"></div>


• 黄色的背景作用于内容内边距构成的矩形，其宽高为160px：宽度100px+两侧的内边距30pxX2；
• 绿色部分为边框，宽度为50px
• 与浏览器边框的距离为外边距，宽度为50px

# ➢ 常见Linux命令

### bash

-x 参数可以查看调试信息。

### gdb

gdb a.out


break 16        # 断点行
break func      # 断点函数
info break      # 打印断点

r               # run
n               # next
c               # continue
p i             # print i
bt              # 函数堆栈
finish          # 退出函数
q               # 退出GDB


### ${} ${str%.txt}     # 最短匹配末尾.txt并删除
${str%%.txt} # 最长匹配末尾.txt并删除${str#.txt}     # 最短匹配开始.txt并删除
${str##.txt} # 最长匹配开始.txt并删除  该表达式支持通配符 ### awk awk 'pattern {action}' pattern(all by default) BEGIN, END action(print by default) builtin variables NR: 已输入记录的条数。 NF: 当前记录中域的个数。记录中最后一个域可以以$NF的方式引用。
FILENAME: 当前输入文件的文件名。
FS:       域分隔符，用于将输入记录分割成域。其默认值为“空白字符”，即空格和制表符。FS可以替换为其它字符，从而改变域分隔符。
RS:       当前的记录分隔符。默认状态下，输入的每行都被作为一个记录，因此默认记录分隔符是换行符。
OFS:      输出域分隔符，即分隔print命令的参数的符号。其默认值为空格。
ORS:      输出记录分隔符，即每个print命令之间的符号。其默认值为换行符。
OFMT:     输出数字格式(Format for numeric output)，其默认值为"%.6g"。
%0:       整个记录
%n:       第n个记录
`