前端流行框架(d4)

**流行框架第一天：构建前端自动化工作流环境
1.Node环境
1.1什么是Node

2.bower
web应用程序依赖项管理工具
npm install -g bower   //-g:global
修改npm全局路径，就是在用户目录下，添加一个.npmrc文件

3.sass/less

Gulp
是一种可以自动化完成开发过程中大量的重复工作
预处理语言的编译
js css html压缩混淆
图片体积优化
类似还有grunt
官网http://gulpjs.com
中文网http://www.gulpjs.com.cn
就是用来机械化的完成重复性质的工作
gulp的机制就是将重复工作抽象成一个个的任务
4.2 Gulp准备工作
安装node.js
安装gulp命令行工具
npm install -g gulp
初始化gulp项目
创建任务 -gulpfile.js
4.3基本使用
4.4常用插件
编译less:gulp-less
创建本地服务器:gulp-connect
合并文件：gulp-concat
最小化js文件：gulp-uglify
重命名文件：gulp-rename
最小化css文件：gulp-minify-css
压缩html文件:gulp-minify-html
最小化图像：gulp-imagemin
============================
流行框架第二天：git与angular入门
复习
-node Nodejs   
 +一个js的运行环境
 +主要用于开发web应用程序
 +很多的前端开发工具都是基于node平台
 +所有的工具就相当于一些软件
-nvm(可选的)
 +node version manager ：node的版本管理工具
 +因为node的版本多，很多时候我们可能依赖很多版本，并要求自由切换
 nvm use [对应的版本号] [平台架构32/64]
 nvm install <version> [arch]
 nvm uninstall <version> [arch]
 nvm list查看已经安装的版本
 官网：https://github.com/coreybutler/nvm-windows
---------------------------------------------------------
-npm 
 + node package manager (node的包管理工具)
 + npm install xxx 安装一个包到项目本地
 +安装完成后项目根目录下会多一个node_modules文件夹，所有的下载下来的包全部在里面
 + 由于需要记录项目依赖哪些东西，所以需要一个配置文件，package.json，通过npm init命令生成。
 + 以后安装包的时候将其--save
 + --save就是将我们安扎un个的包名字和包版本记录到配置文件中的dependencies节点中
 + --save-dev
 + 项目依赖分两种，一个就是普通的项目依赖比如bootstrap，还有一中只是开发阶段需要用的，这种属于开发依赖比如gulp,开发依赖最终记录在devDependencies节点里面
 + npm install xxx -g (全局安装包)
  +如果你安装的是一个工具，工具要在每一个地方都能用
------------------------------------------------------

1.命令行创建npm的配置文件
  npm init
2.添加一个gulp的依赖
  npm install gulp --save-dev
3.在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的。
4.在gulpfile中抽象我们需要做的任务
gulpfile.js
/**
1.less编译 压缩 合并
2.js合并 压缩  混淆
3.img复制
4.html压缩
*/

https://github.com/Micua/home


-Bower
 + Bower就是用来管理项目中所有的依赖，主要用与web页面开发时使用的包管理，如jquery,bootstrap
 + 

-Gulp
-http://www.ydcss.com/archives/94

-msi - microsoft installer微软安装器

##Git
###什么是GIT
-是一个源代码管理工具
-在一个项目中，凡是由开发人员写的都是源代码
-源代码有必要管理起来
-让源代码可以被追溯，记录每次变更的内容，谁变更的。
-GIT是Linux之父，当年为了维护管理linux的源代码写的工具
-GIT之前很多使用svn  vss  tfs  hs ..

koala_2.0.4_setup.exe
portableGit-2.7.0-64-bit.7z.exe
SourceTreeSetup_1.7.0.32509.exe

环境变量：
%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%;%GIT_HOME%\bin;
git --version

https://guides.github.com
安装GIT
-git命令行工具
-基于git命令行的一个客户端软件，提供一个界面去管理源代码

GIT命令操作
- 初始化一个本地GIT仓储

cd当前项目目录
git init //初始化一个本地的仓库
就是在本地文件夹中添加一个.git的文件夹，用于记录所有项目变更信息

- 查看本地仓储的变更状态
git status
用于查看本地仓储的状态
第一次查看，显示的是一坨没被跟踪的文件

git status -s //是输出简要的变更日志

-添加本地暂存(托管)文件
git add .
可以将一个没有被跟踪的文件添加到跟踪列表

类似于node_modules这种性质的文件是不应该被跟踪的


- 添加本地GIT忽略清单文件
在代码库文件夹的根目录添加一个.gitignore文件
此文件用于说明忽略的文件有哪些
node_modules
dist
*.js
*.*


-提交被托管的文件变化到本地仓储
git commit
git commit -m'修改了什么什么什么'


-对比差异
git diff
可以用于对比当前状态和版本库中状态的变化

-提交日志
git log
可以查看提交日志

- 回归到指定版本
git reset --hard 2d2250

-为仓储添加远端(服务器端)地址

-将本地仓储的提交记录推送到远端的master分支

-拉取远端master分支的更新记录到本地

-回归到指定版本

========================================================

### GITHUB基本使用

git是一个工具
github是一个网站
github网站提供的就是git服务

-https://github.com
-github是一个git服务的提供商
-提出社交化编程

-GIT分支


======================================================
# 流行框架第三天：angular入门
##推荐工具
- 在线编辑器
+ http://codepen.io
+ https://jsfiddle.net/

##简介
###什么是AngularJS
-简称ng
-是一款非常优秀的前端高级js框架
-轻松构建spa应用程序--单一页面应用程序
-单一页面应用程序：
 + 只有一个页面(整个应用的一个载体)
 + 内容全部是由ajax方式呈现出来的

###为什么使用AngularJS

-带领当前市面上的框架走向模式化或者架构化

###AngularJS的核心特性
- MVC
- 模块化
- 自动化双向数据绑定
- 指令系统


###相关链接
http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
http://www.apjs.net
http://www.angularjs.cn
http://docs.angularjs.cn/api
https://material.angularjs.org
http://angular-ui.github.io



##Angular上手

###安装Angular


installation
- 下载Angular.js的包
https://github.com/angular/angular.js/releases
- 使用cdn上的angular.js
http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
- 使用bower安装
bower install angular
- 使用npm安装
npm install angular

###简单示例
angular中最重要的概念是指令ng-xxxx  directive
ng-model是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的uer.name建立绑定关系

---  所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
ng-app是ng的入口，表示当前元素的所有指令都会被angular管理，对每个指令进行分析和操作.


### CDN概念
- 快
- 节省自己服务器的带宽和流量
- 内容分发网络 content delivery network

## MVC
-MVCS 是一种设计
-将应用程序的组成划分为3个部分，model view controller
-控制器的作用就是初始化模型用的
-模型就是用于存储数据的
-视图用于展现数据的


##模块 Model
AngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分
//创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖哪些模块
var myApp = angular.module("MyApp",[]);
也可以将重复使用的指令或过滤器之类的做成模块便于复用
注意必须指定第二个参数，否则变成找到已经定义的模块

-划分应用程序结构
-通过angular.module创建一个模块
angular.module方法传递2个参数是创建，1个参数是获取。


- 控制器的3种主要职责：
 -- 为应用中的模型设置初始状态
 -- 通过$scope对象把数据模型或函数行为暴露给视图
 -- 监视模型的变化，做出相应的动作


angularJS Batarang是一款插件


========================================================
流行框架第四天
bower init 
bower install angular bootstrap --save
bower cache list


angular找到第一个ng-app就不会再找了，在一个页面中只使用一个ng-app.

-- ng-repeat指令
--- 用来便利一个数组重复创建当前元素

-- ng-class指令
---单个值得方式
---ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名


ng-cloak指令
-ng-cloak指令用于在angularJS应用在加载时防止angularJS代码未加载完而出现的问题
-angularJS应用在加载时，文档可能会由于angualrJS代码未加载完而出现显示angularJS代码，进而会有闪烁的效果，ng-cloak指令是为了防止该问题的发生。
-如果angular是在head中引入的话没有问题
-如果引用在body的最下面则需要hack

-ng-show/ng-hide指令
-ng-show和ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素

-ng-if是指是否存在DOM元素

-ng-href / ng-src指令
-用于解决当链接类型的数据绑定时造成的加载bug

常用事件指令：
- ng-blur:失去焦点
- ng-change:发生改变
- ng-copy:拷贝完成
- ng-click:单击
- ng-dblclick:双击
- ng-focus:得到焦点
- ng-submit:表单提交

-自定义指令
目的是为了封装一些常用而且公用的东西
angular仍然有一些DOM操作的可能，所有的dom操作都应该集中在自定义指令中

**