标签：
webstrom使用：
ctrl+b/点击，代码导航,自动跳转到定义
ctrl+n跳转指定类
ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行
ctrl+alt/shift+b跳转方法实现/定义处
包裹/去掉外围代码unwrap...
主题appearance
字体editor-colors&fonts-font
自动换行settings-editor-appearance-show line
显示行号..........................show line numbers
代码对齐..........................show right margin
代码提示速度...editor-code completion,autopopup in(ms):0
代码拼写检查设置
ctrl+e打开最近文件
代码补全settings-javascript-libraries-down/xxx.ts定义文件定位
git配置：editor-github改github账户
插件安装file-plugins css-X-fire插件：firebug修改css属性时，编辑器内的css代码也会发生变化
禁用部分插件提高打开速度
webstrom配置nodejs：
settings-->languages....-->nodejs....-->选择文件exe；配置source code:directory;c:\.....\npm
Node.js：
js运行在浏览器/客户端的语言，主要对象包括ES原生对象(11个)、BOM对象、DOM对象
node.js运行于服务器端，类似于php,jsp,asp.net；主要对象包括：es对象、1000+扩展对象；可以编写独立的服务器应用/向web发送数据；基于服务器和客户端的v8引擎，访问服务器端文件系统/数据库
node.js与php+Nginx性能对比：node.js每秒响应请求数较多（输出/执行mysql查询）
LTS： Long Term Support 下载：https://nodejs.org
npm全局模块存放路径；cache缓存路径
，一个
Node.js 文件就是一个模块，这个文件可能是 JavaScript 代码、JSON 或者编译过的 C/C++ 扩展。
Node.js 特点：异步式 I/O（或者非阻塞 I/O）与事件紧密结合的编程模式；
控制流很大程度上要靠事件和回调函数来组织
①node两种运行模式：
交互模式：REPL模式，cmd：node
脚本模式：node xxx.js绝对路径或cmd：e:-->cd 文件夹-->node 文件名
node -v查看版本
②调试：命令行调试：cmd：node debug debug.js，
单击行号添加断点
③nodejs HTTP模块：内部是用 C++ 实现的，外部用 JavaScript 封装
HTTP协议的内容：nodejs需手动设置http协议，php通常不需要设置http协议
(1)请求消息
GET /web/index_new.html?tedu HTTP/1.1
Host: tmooc.cn
Connection: keep-alive
(2)响应消息
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=UTF-8
QueryString模块：用于解析键值对形式的查询字符串，得到一个对象。
HTTP 协议规定，请求消息可以在URL后面追加一个?开头的QueryString，用于向服务器提交请求数据。
var qs=require("querystring"); //引入指定模块
var str = ‘uname=tom&upwd=123&age=20‘;
var obj=qs.parse(str); //将str解析为对象
URL模块：解析一个完整的URL地址，得到其中的各个部分
var url=require("url");
var str="http://tedu.cn:80/s.do?k1=v1&k2=v2";
var obj=url.parse(str，true); //true表示使用
手动解析?后内容，获得表单数据，get请求在url上返回数据
FileSystem模块：用于操作文件系统,读写目录、读写文件，Node.js底层使用C程序来实现
var fs = require(‘fs‘);
var data = fs.readFileSync(‘源文件名‘,[‘utf-8‘],[f(err,data)]); //同步读取文件内容到缓冲区
fs.readFile(file,[‘utf-8‘],[f(err,data)]) //异步读取文件
fs.writeFileSync(‘目标文件名‘, ‘要写出的内容‘); //向文件中写出内容
fs.appendFileSync(‘目标文件名‘, ‘要追加的内容‘); //向文件中追加内容
④nodejs第三方模块：https://www.npmjs.com/全世界最大的node.js第三方模块集散地
第三方模块js必须保存在js同级目录下的名为node_modules的文件夹中
MySQL模块：npm
var mysql=require("mysql");
var coon=mysql.createConnection({
host : ‘127.0.0.1‘,
user : ‘root‘,
password : ‘‘,
database : ‘tedu‘
});
conn.query(‘INSERT/SELECT...‘,f(err,result){});
conn.end();
⑤创建一个静态Web服务器：
步骤：
创建一个HTTP Server
为server指定处理请求消息的过程(获取请求数据，返回响应数据，http、url、fs模块)
解析请求URL中的资源名称， 如 /login.html
读取指定文件中的内容，如 htdocs/login.html
构建响应消息，把读取到的文件内容输出客户端客户端
让server开始监听特定端口
var http = require(‘http‘);
var server = new http.Server();
server.on(事件, f(){ //解析url，读取html文件 });
server.listen(端口号);
事件：
request：f返回http.ServerRequest请求对象，http.ServerResponse响应对象参数
req请求对象：
req.url：请求文件的url，作为url字符串使用
req.data(chunk)：请求体数据到来时被触发，chunk请求体数据，
全部数据：datas+=chunk；该事件会多次调用
用于表单的post请求，post请求在请求体中返回数据
req.end()：请求体数据传输完成触发
req.close()：请求结束触发，包括用户强制终止传输
res响应对象：输出到客户端
res.writeHead(status,[headers])：向客户端发送请求头，status状态码
res.write(data,[encoding])：发送响应内容，data内容，encoding编码方式
res.end([data],[encoding])：结束相应，不调用则客户端永远处于等待状态
connection：TCP连接建立被触发
close：服务器关闭时触发，不包括用户连接断开
修改代码后必须终止Node.js 再重新运行才会奏效(不能刷新)
ex：启动服务器并开始监听3000端口：
var http = require(‘http‘);
var server=http.createServer(function(req, res) { //http.createServer()创建http.Server服务器对象
res.writeHead(200, {‘Content-Type‘: ‘text/html‘}); //请求成功的响应代码200
res.write(‘<h1>Node.js</h1>‘); //返回响应体
res.end(‘<p>Hello World</p>‘);
}).listen(3000); //链式，
console.log("HTTP server is listening at port 3000.");//进程一直等待，直到按下ctrl+c退出
打开浏览器访问 http://176.2.18.39:3000
⑥创建一个动态Web服务器：
解析url资源：xxx.html或xxx.do
为Server指定处理请求消息的过程
若请求资源名称以.html结尾，直接读取指定文件中的内容，如 htdocs/login.html，作为响应消息数据；
若请求资源为xxx.do，解析请求数据，访问数据库，把执行结果作为相应消息数据
构建响应消息，把读取到的文件内容输出客户端客户端
让Server开始监听特定端口
⑦共享80端口：虚拟主机，就是让多个网站共享使用同一服务器同一IP地址，通过域名的不同来划分请
求；在Nginx 中设置反向代理和虚拟主机非常简单，下面是配置文件的一个示例：
server {
listen 80;
server_name mysite.com;
location / {
proxy_pass http://localhost:3000;
}
}
这个配置文件的功能是监听访问mysite.com 80 端口的请求，并将所有的请求转发给
http://localhost:3000，即我们的Node.js 服务器。现在访问http://mysite.com/，就相当于服务器
访问http://localhost:3000了。
在添加了虚拟主机以后，还可以在Nginx配置文件中添加访问静态文件的规则（具体请
参考Nginx文档），删去app.js 中的app.use(express.static(__dirname + ‘/public‘));。
这样可以直接让Nginx 来处理静态文件，减少反向代理以及Node.js 的开销。
MVC架构：设计模式之一，
Model：模型，项目中的数据；
View：视图，数据的呈现；
Controller：控制器，获取模型数据，选择视图加以呈现
模板为中心的架构：PHP、ASP、JSP
AngularJS：js框架
致力于开发单页面应用程序(Single Page Application)
易于构建页面CRUB操作
一切操作都以数据为中心：创建/绑定/修改/更新数据；基本思路与jQuery的先查找元素再操作元素不同
AngularJS四大特性：采用MVC模型，双向数据绑定，依赖注入(DI)，模块化设计
使用：
引入js文件：angular.js；<script src="js/angular.js"></scropt>
为父级元素声明ng-app属性；
在父级元素内部使用AngularJS：<p>{{1+2}}</p>
AngularJS的MVC:
ng-controller声明模型数据：
<html ng-app="myapp"> //定义模块名并确定模块作用范围
<div ng-controller="myctrl"> //控制器组件
<p>{{num}}</p> //绑定数据
</div>
<button ng-click="add($index)">loadMore</button> //传入参数
</html>
var app = angular.module(‘myapp‘,[]); //声明模块
//一个模块可以定义多个功能组件：controller,directive,filter,service,...
app.controller("myctrl",function($scope){ //声明控制器
console.log($scope);
$scope.num=10; //定义模型数据，存在$scope对象中
$scope.add=function(){...} //定义模型函数
})
或angular.module(‘模块名‘,[依赖列表]).controller("控制器",function($s){s.xxx;});
双向数据绑定：
Model数据绑定到View：脏数据检查(Dirty Checking)：model数据的修改自动更新到View
①{{表达式}}：
+ - * / % > >= == === !== && || ! ?: {{20>18?1:0}}
不允许：1++,1--；1+=2；
特殊运算符:typeof(num),age instanceof String；
new和var关键字
{{{‘ename‘:‘tom‘}.ename}}获取对象的成员属性 member={ename:‘tom‘}
{{member.ename}}
{{‘hello‘.toUpperCase()}}获取对象的成员方法
{{[‘tom‘,‘mary‘][1]}}获取数组中的指定元素
②指令directive：标签内添加属性，封装DOM操作
ng-app[="模块名"] 初始化一个AngularJS应用程序，确定一个应用模块的作用范围；
ng-init="表达式" 声明/赋值变量，不推荐，变量可赋值值/数字/对象{}，双向绑定
x1=val;x2=val; car={name:‘BMW‘,price:‘30‘}
ng-bind="表达式" 表达式的值输出为当前元素的innerHTML；将模型变量绑定到视图中
{{...}}去输出表达式结果时，有可能会出现闪烁，ng-bind代替输出防止闪烁
ng-repeat="v in arr/obj" 循环生成当前元素，为HTML增加循环功能
<li ng-repeat="tmp in arr/obj">{{tmp}}</li> tmp下标，常用{{arr.tmp/tmp.xxx}}
ng-repeat="dish in list track by $index"
ng-repeat="(k,v) in arr/obj"
<li ng-repeat="(k,v) in car">{{k}} {{v}}</li> arr:k下标；obj:循环输出键值对key,value
ng-if="表达式" 表达式为true,当前元素会挂到DOM，否则删除
<tr ng-repeat="tmp in stuList" ng-if="tmp.chinese > 60">{{tmp}}</tr>满足ng-if时循环输出tmp
ng-include="‘tpl/footer.html‘" 替换某标签内片段,如footer
ng-controller="控制器" 每个控制器有一个$scope作用域对象，可嵌套
控制器应该尽可能保持短小精悍，而在控制器中进行DOM操作和数据操作则是一个不好的实践。
<ANY ng-xx=‘‘/> xx:html标签的扩展属性
ng-click="f()"
ng-src="img/{{url}}" <img ng-src="img/{{dish.url}}" />
err-src="img/404.jpg" 若图片加载失败，404报错时，提供备用图片
ng-herf=“...”
<ngView />扩展标签
ng-show/hide="isshow" ngShow表达式计算结果为假时，ng-hide CSS 类会被加到元素的class属性中
<p ng-show=‘hasMore‘ ng-click="add()">添加更多按钮</p>
<p ng-hide="hasMore">没有更多数据可以加载了</p>
ng-style/class
ng-checked
ng-disabled
ng-model=”val” 绑定input,select,texttarea;￥scope.val=...;
View数据绑定到Model：View数据的修改自动更新到Model
①ng-model="模型变量名" 只有表单控件的值可以修改：input,多行文本textarea,下拉框select,单选复选
<input type="checkbox" ng-model="isAgree">
<button ng-disabled="!isAgree">111</button>
$scope.$watch(‘agree‘,function(){console.log($scope.agree);}) 使用$scope.$watch()监视到模型数据的每次修改
过滤器filter：对表达结果进行筛选/格式化；| 管道，用于数据传递
{{ 表达式 | filter[:params] | filter2[:params] }}
number:小数部分有效位数 格式化数字，若不是数字则返回空字符串
currency:‘货币符号‘ 格式化为货币形式$
{{sum()|currency:‘￥‘}} sum():return value;
date:‘日期时间格式‘ 把date/string/number转换为特定的日期格式
{{nowDate | date:‘yy-MM-dd‘}} $scope.nowDate = new Date();
upperCase 所有字符转换为大写
lowerCase 小写
orderBy:表达式 对数组进行排序，默认增序,true降序,
<li ng-repeat="tmp in friends|orderBy:‘age‘[:true | limitTo:3]>{{tmp.name}} {{tmp.age}}</li>只显示前三名
limitTo:n 返回指定长度
函数function：
angular.uppercase(string); 大写转换
angular.lowercase(string); 小写
angular.fromJson(jsonStr); 反序列化
angular.toJson(obj, [pretty]); 序列化，json->str
angular.forEach(obj/arr, fn(value,key), [context]); 对obj/arr的每个条目调用一次fn
angular.module(name, [requires], [configFn]); 创建模块,angular.module(‘app‘,[‘ng‘/依赖列表])
服务service:每个service对象都是单例的
常用内置服务/注入对象：
$scope： 作用域对象，子$scope若找不到值则访问父$scope，直到$rootScope中也找不到
$scope.$watch("模型变量名",function(to,from){....},[false/true]); 监听模型数据变化，
每次进行model到view的绑定都会创建一个$watch追加到$watch队列中
$scope.$digest() 手工触发$watch队列中的所有监听函数，
$scope.$apply(function(){...}) 对$scope.$digest()的进一步封装，建议使用$apply方法完成$digest的调用
angular上下文环境中对模型修改自动调用；若在上下文环境之外被修改需手工调用
$scope.$apply();<==> $rootScope.$digest();
$location：
controller(控制器名,function($scope,$location){ //使用某个服务则需在控制器的回调函数中注入进来
console.log($location.absUrl()); //获取地址
});
$http：可以向服务器发起ajax请求，异步的获取服务器端返回的相应数据，默认json数据
$http({method:"GET/POST",url:"/url"}) 请求地址：data/test.json或php
.success(function(data, status, headers, config){})
.error(function(data, status, headers, config){});
$http.get("/url").success(fn(data,...)); 传数据url+?k=v
$http.post("/url",data).success(fn);
$http.head
$http.put
$http.delete
$http.jsonp
$rootScope 根作用域对象，所用的控制器实例共用，用于跨控制器共享模型数据
module.controller(‘控制器名‘,function($rootScope){$rootScope.模型变量=值;$rootScope.模型方法=fn;})
$window：提供对于浏览器的 window 对象的包装引用。
$animate：实现动画
$log
$interval：周期性定时器
$scope.timer=$interval(function(){
})
终止定时器$interval.cancel($scope.timer);
<==>setInterval($scope.f(),1000)
$timeout：一次性定时器
$timeout(function(){...},1000);
<==>setTimeout(fn,time)
依赖注入(Dependency Injection)：$injector注入器快速定位到需要注入的各种服务
①推断式依赖注入：不需要关注注入时参数的先后顺序，ng会根据参数查找对应的服务并注入进来，这种方式不能处理压缩或者混淆后的代码，只能处理原始的代码
自定义服务
app.factory(‘服务名字‘,function(){
return {
方法名：function(){},
属性名：属性值
};
});
app.controller(‘MyCtrl‘,function($scope,$show){$service.方法()/属性}
②标记式依赖注入：直接调用$inject属性来完成(字符型数组)
var ctrFunc = function ($scope,$print,$show) {
$scope.callShow = function () {
$show.show();
}
$scope.callPrint = function () {
$print.print();
}
};
ctrFunc.$inject = ["$scope","$print","$show"];
app.controller(‘myCtrl‘,ctrFunc);
③行内式依赖注入：允许我们将一个字符数组作为对象的参数；在这个数组中，除最后一个元素必须是函数体之外，其余都是注入的服务名称。
app.controller(‘MyCtrl‘,["$scope","$show"，function($scope,$show){...}])
得到注入器：auto/service
var injector = angular.injector([‘myApp‘,‘ng‘]);
或app.controller(‘myCtrl‘,fn($scope){
$scope.f=function(){
var injector=angular.injector([‘myApp‘,‘ng‘]); //通过注入$injector服务代替angular.injector()
injector.has(‘$show‘)...
}
}
injectorAPI:
injector.has(‘$show‘):从注册列表中查找对应服务，找到返回true
injector.get(‘$show‘):返回指定名称的服务实例，获取实例之后，调用服务中的属性和方法
压缩文件：
YUICompressor：雅虎UI库,java语言编写，压缩css/js文件
删除所有注释，无语义的空白字符，将变量名/函数名替换为尽可能短的形式
安装java运行环境-jdk
通过命令行：java.exe -jar C:\yui-compressor.jar C:\demo03Js.js > C:\demo.min.js
或webstorm配置yuicompressor,监视并自动进行压缩
file-settings-file watchers-+添加yui-配置jar包路径
压缩文件的依赖注入：
压缩过程会对函数的形参名进行精简压缩，则Angular无法识别，从而无法实现注入
解决：行内式依赖注入：module.controller(‘控制器名‘,[‘$scope‘,‘$http‘,‘$log‘,function($scope,$http,$log){...}])
模块化：
b模块使用a模块当中的东西，在b模块声明的时候，在依赖列表中写上对应的模块名字
var app01=angular.module("myApp01",[]);
var app02=angular.module("myApp",[‘ng‘,‘myApp01‘]);
面试题：一个ng模块，可以包含哪些组件：
①controller：多个控制器组件
②directive：指令，view中绑定模型数据
③service：服务，在不同控制器之间提供某种函数服务
④filter：过滤，筛选，格式化输出
⑤function：
provider组件：类似于service，较少使用
type组件：比如
object组件：有些对象，很少用
自定义指令
app.directive(‘指令名‘.function(){ //驼峰式命名tsHello，使用则ts-hello
return{
restrict:‘EAC‘, //限制值：E(Element)A(Attribute)C(Class)M(Comment)
template:‘该指令实际对应的HTML内容‘, //替换标签内文本
templateUrl:‘xxx.html‘
};
})
普通标签使用：<ts-hello></ts-hello>
属性使用：<p ts-hello></p>
class使用：<p class="ts-hello"></p>
创建一个服务：
app.service(‘服务名‘,function(){ //服务名：$xxx
this.xx=xxx;
this.yy=function(){...}
})
factory是普通方法，service是构造函数
自定义过滤器：
app.filter(‘过滤器名‘,function(){
return function(输入参数){
//处理过程
return 处理结果
}
})
SPA(single page application)单页应用工作原理：
1.url形式：http://127.0.0.1/index.html#/路由地址
2.浏览器先拿到index.html，再解析路由地址
3.路由词典
#/start==>tpl/start.html
#/main
4.获取到真实页面地址，发起请求，获取末班页面，插入到DOM树，实现刷新
路由模块：
①创建一个完整html页面，引入angular.js和angular-route.js
②声明模块angular.module(‘myApp‘,[‘ng‘,‘ngRoute‘]);
③html中使用ngView声明一个容器元素，盛放代码片段
④创建模板页面
⑤配置路由词典
app.config(function($routeProvider){
$routeProvider.
when(‘/路由地址1‘,{ //页面url:/start
templateUrl:‘模板页面地址1‘, //文档url：xxx.html,包含片段如<p>..</p>，无需完整结构
controller:"starCtrl" //声明控制器
}).when(‘/路由地址2/:index‘,{ //:index变量前加冒号
templateUrl:‘模板页面地址2‘,
controller:"mainCtrl"
}).otherwise({
redirectTo:‘/路由地址1‘ //默认其他跳转url
})
});
模板跳转：
超链接：<a href="#/路由地址">...</a>
js实现：
<button ng-click="jump()"></button>
$scope.jump=function(){ $location.path("/路由地址"); }
var app = angular.module(‘myApp‘,[‘ng‘,‘ngRoute‘]);
app.controller(‘startCtrl‘,
[‘$scope‘,‘$location‘,
function ($scope,$location) {
$scope.jump = function () {
$location.path(‘/login‘);
}
}]);
读取路由参数：
.controller("...",function($routeParams){console.log($routeParams.dno);})
动画模块ngAnimate
依赖两种技术：
CSS Transition/Keyframes动画
声明ngAnimate依赖模块后，元素消失/显现时自动添加的class
.ng-enter：元素消失=>存在时，刚一进入时的状态
.ng-enter-active：元素消失=>存在时，进入完成时的状态
.ng-leave：存在=>消失时，刚一离开时的状态
.ng-leave-active：存在=>消失时，离开完成时的状态
中间的动画的执行由css transition实现
通过设置四个class来添加动画
.page {
position: absolute;
width: 100%;
}
.page.ng-enter,
.page.ng-leave {
-webkit-transition: .5s linear all;
-moz-transition: .5s linear all;
-ms-transition: .5s linear all;
-o-transition: .5s linear all;
transition: .5s linear all;
}
.page.ng-leave {
left: 0;
opacity: 1;
}
.page.ng-leave.ng-leave-active {
left: -100%;
opacity: 0;
}
.page.ng-enter {
left: 100%;
opacity: 0;
}
.page.ng-enter.ng-enter-active {
left: 0;
opacity: 1;
}
jQuery.animate()函数
引入jquery.js,angular.js,angular-animate.js
创建模块，声明对ngAnmiate模块的依赖
var app = angular.module(‘kaifanla‘,[‘ng‘,‘ngRoute‘,‘ngAnimate‘]);
app.animation(‘要使用动画的元素选择器’,function(){
return{
enter:function(e,fn){
$(e).css({刚一进入时的初始状态});
$(e).animate({刚入完成时的状态},2000,fn);
},
leave:function(e,fn){
$(e).css({刚一离开时的初始状态});
$(e).animate({离开完成时的状态},2000,fn);
}
}
})
标签：
原文地址：http://www.cnblogs.com/sytg/p/5959729.html
