Angular 4.0从入门到实战

AngularJS

优点

• 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
• 是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；
• 自定义Directive，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；
• ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助
• 补充：Angular支持单元测试和e2e-testing。

缺点

• 双向数据绑过多时，会影响性能（原因：https://github.com/atian25/blog/issues/5）
• ngView路由只能有一个，不能嵌套多个视图，虽然有 angular-ui/ui-router · GitHub 解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的，第三方模块；
• 作用域把Ag的执行环境和浏览器环境隔离开，原生事件影响不了Ag的作用域
• ng提倡在控制器里面不要有操作DOM的代码，对于一些jQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装插件，但是现在有很多插件的版本已经支持Angular了，如：jQuery File Upload Demo
• Angular 太笨重了，没有让用户选择一个轻量级的版本，当然1.2.X后，Angular也在做一些更改，比如把route，animate等模块独立出去，让用户自己去选择。

架构

Angular4.0

核心：组件

问题改进

• 默认绑定改为单向数据绑定
• TypeScript 2.1 和 2.2 的兼容Angular已更新为更新版本的TypeScript，提高了ngc的速度，并且有更好的类型检查机制。
• $scope不复存在
• 表单验证
• TypeScript 2.1 和 2.2 的兼容Angular已更新为更新版本的TypeScript，提高了ngc的速度，并且有更好的类型检查机制。

新增特性

• 命令行工具 AngularCLI
• 服务端渲染（Angular Universal）
  
  • 加载速度
  • SEO（单页应用对搜索引擎有很大的限制）
• 移动和桌面兼容

架构

其他前端框架

React->UI组件（V）
- React,虚拟DOM，更新DOM次数少，内容也少。速度快
- FlUX架构（UI组件化和数据单向更新）
- 服务器渲染（预渲染应用发送客户端，爬虫依赖服务器的响应）
Vue->雨溪大牛个人主导，只关注WEB，服务器渲染（缺点）
- 简单
- 灵活
- 性能

Ag4开发环境搭建

Amber Cli(模块的构建) -> Angular CLI <- Webpack（打包）
- Angular CLI (2以上的构建工具)
- npm install -g @angular/cli (安装)
- ng version
- ng new 项目名字 –skip-install(网络不好1)
- cnpm install(网络不好2)
- 编译,开发同步 np serve
- 测试打包 test build

安装报错
 constructor(_configPath, schema, configJson, fallbacks = []) {
重装
npm uninstall -g angular-cli
npm cache clean 

C:\Users\null\AppData\Roaming\npm\node_modules\@angular\cli\models\config\config
.js:17
    constructor(_configPath, schema, configJson, fallbacks = []) {
                                                           ^

SyntaxError: Unexpected token =
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Users\null\AppData\Roaming\npm\node_modules\@angul
ar\cli\models\config.js:3:18)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

升级Node version 6.x or higher
Linux

npm install -g n
n stable

window直接替换就行了

运行报错
The "@angular/compiler-cli" package was not properly installed.

1. Global package:
   rm -rf node_modules dist
   npm uninstall -g @angular/cli
   npm cache clean
2. Reinstall and play (global)
   npm install -g @angular/cli@latest
   npm install
   ng serve
   https://stackoverflow.com/questions/42925690/angular2-cli-error-angular-compiler-cli-package-was-not-properly-installed/43021209

• .editorconfig webstrom配置文件
• karma.conf.js 自动化单元测试配置文件
• protractor.conf.js 自动化单元测试