Angular 学习笔记

Angular 特点

1. MVC

 模型-视图-控制，甚至其他的 MV* 几乎是现代流行前端框架采用的方法。模型（model）掌管着数据，视图（view）是直接展示给用户的部分，控制（controller）用来操纵视图，三者各司其职，协同密切配合。职责清晰，代码模块化

2. 模块化

 模块化也是现在流行的做法，从早一点的AMD、CMD规范，到commonJS，而且 ES 6 也开始支持模块化。模块化的优点不言而喻，方便各部分之间的功能解耦和复用。

3. 指令集

4. 双向项数据绑定

先说说单项数据绑定的缺点：它是把模板和数据融合到一块，然后通过视图呈现。那么问题来了，如果我的模板变了，或者数据变了，就会变得很麻烦。

双向数据绑定的优点：数据和模型，两者之一发生变化，另外一个会如影随形跟着对方一起变化。

工具环境篇

工欲善其事，必先利其器。一个完整的前端项目在不同的阶段需用到不同的工具。形容过去的前端开发环境，一言蔽之，“刀耕火种的年代”简直再合适不过了。

• -

代码编辑工具

轻量级的神器 sublime 或者 atom。当然 webstorm 也值得推荐，但是比起前两个要重一点。
- 断点调试工具
chrome 浏览器的话，有一款扩展程序 batarang。 翻墙安装即可。
-

版本管理工具

作为新时代有追求有节奏有的青年，我们当然首选 git 啦~ 可以从谷歌code 里下载，下载的呢其实只是一个命令行工具，为了可视化呢，可以下载 tortoiseGit 。有了这个工具，右键菜单就会出现一些对应 git 的选项。当然直接用 github 的配套工具也不错。

现在就可以从 github 上“拿来主义”了。可以 fork 别人的代码，克隆你感兴趣的仓库到自己的代码仓库里。复制代码仓库的地址，视图工作方法呢，就是回到你的工作文件夹下，右键菜单，git clone 即可。 当然命令行的方式也很简单。

• -

代码合并和混淆工具

提到这部分的工具，首先不得不提神器nodeJS。因为前端用到的很多代码合并和混淆工具，都是依赖于 nodeJS 的。必须赞美一下，有了nodeJS，不仅在后端能跑 javascript 代码，而且它还提供了灰常多滴实用工具，比如 npm 包管理工具，通过它安装各种包、工具，前端开发瞬间方便很多。

安装好 nodeJS 后，配置一下 bin 环境变量。通过 npm 安装一些依赖包或者工具是，npm install -g 指的是全局安装。全局安装目录是 c 盘 user\appdata

grunt 自动化工具。虽然近年来有被 gulp 比下去的趋势，但本着不忘本的原则，我们还是隆重介绍一下它。

它提供的功能主要是：

• 代码合并；
• 代码压缩自动压缩；
• crtl + S 自动执行前两功能；

• crtl + S 自动执行单元测试、集成测试。

  它的安装也是通过 nodeJS 安装。

  grunt 里有很多非常有用的插件，比如：

• uglify
  这货的名字就知道了，把代码”ugly“化，使原本风格优雅、容易阅读的代码变得非常丑陋。正所谓代码混淆。

• concact
  同样从名字就知道了，这个工具是用来连接 js 文件的。

• watch
  用来监视代码的变化，一旦文件改动，每次 crtl + S 以后，能够自动帮你”uglify” 、”concact”等等你的代码。
  其他插件还有 jsHint、qunit 等等，都是通过 npm 安装。

- 依赖管理工具

- 单元测试工具

- 集成测试工具