前端流行框架(d4)

**流行框架第一天：构建前端自动化工作流环境1.Node环境1.1什么是Node2.bowerweb应用程序依赖项管理工具npm install -g bower   //-g:global修改npm全局路径，就是在用户目录下，添加一个.npmrc文件3.sass/lessGulp是一种可以自动化完成开发过程中大量的重复工作预处理语言的编译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.js4.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 init2.添加一个gulp的依赖  npm install gulp --save-dev3.在项目根目录下添加一个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.exeportableGit-2.7.0-64-bit.7z.exeSourceTreeSetup_1.7.0.32509.exe环境变量：%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%;%GIT_HOME%\bin;git --versionhttps://guides.github.com安装GIT-git命令行工具-基于git命令行的一个客户端软件，提供一个界面去管理源代码GIT命令操作- 初始化一个本地GIT仓储cd当前项目目录git init //初始化一个本地的仓库就是在本地文件夹中添加一个.git的文件夹，用于记录所有项目变更信息- 查看本地仓储的变更状态git status用于查看本地仓储的状态第一次查看，显示的是一坨没被跟踪的文件git status -s //是输出简要的变更日志-添加本地暂存(托管)文件git add .可以将一个没有被跟踪的文件添加到跟踪列表类似于node_modules这种性质的文件是不应该被跟踪的- 添加本地GIT忽略清单文件在代码库文件夹的根目录添加一个.gitignore文件此文件用于说明忽略的文件有哪些node_modulesdist*.js*.*-提交被托管的文件变化到本地仓储git commitgit 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.htmlhttp://www.apjs.nethttp://www.angularjs.cnhttp://docs.angularjs.cn/apihttps://material.angularjs.orghttp://angular-ui.github.io##Angular上手###安装Angularinstallation- 下载Angular.js的包https://github.com/angular/angular.js/releases- 使用cdn上的angular.jshttp://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js- 使用bower安装bower install angular- 使用npm安装npm install angular###简单示例angular中最重要的概念是指令ng-xxxx  directiveng-model是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的uer.name建立绑定关系---  所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中ng-app是ng的入口，表示当前元素的所有指令都会被angular管理，对每个指令进行分析和操作.### CDN概念- 快- 节省自己服务器的带宽和流量- 内容分发网络 content delivery network## MVC-MVCS 是一种设计-将应用程序的组成划分为3个部分，model view controller-控制器的作用就是初始化模型用的-模型就是用于存储数据的-视图用于展现数据的##模块 ModelAngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分//创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖哪些模块var myApp = angular.module("MyApp",[]);也可以将重复使用的指令或过滤器之类的做成模块便于复用注意必须指定第二个参数，否则变成找到已经定义的模块-划分应用程序结构-通过angular.module创建一个模块angular.module方法传递2个参数是创建，1个参数是获取。- 控制器的3种主要职责： -- 为应用中的模型设置初始状态 -- 通过$scope对象把数据模型或函数行为暴露给视图 -- 监视模型的变化，做出相应的动作angularJS Batarang是一款插件========================================================流行框架第四天bower init bower install angular bootstrap --savebower cache listangular找到第一个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操作都应该集中在自定义指令中**