angular2.x从入门到放弃

angular2.x从入门到放弃

---

为什么用它：

MVC的好处

​ xxxx

从a1->a2转变的原因

性能的限制
AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性 被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的 提升已经非常困难了。

快速变化的WEB

在语言方面，ECMAScript6的标准已经完成，这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性，而这些特性将显著地改变JavaScript的开发体验。

在开发模式方面，Web组件也将很快实现。然而现有的框架，包括Angular1.x对WEB组件的支持都不够好。

移动化

想想5年前......现在的计算模式已经发生了显著地变化，到处都是手机和平板。Angular1.x没有针对移动 应用特别优化，并且缺少一些关键的特性，比如：缓存预编译的视图、触控支持等。

简单易用 （个人感觉成本并没有降低，但是确实更好用了）

说实话，Angular1.x太复杂了，学习曲线太陡峭了，这让人望而生畏。Angular团队希望在Angular2中将复杂性 封装地更好一些，让暴露出来的概念和开发接口更简单。

1）它未来可能大火

2）对学习ES6和react等有好处。

---

如果作为讲师，要完全理解需要知识基础。

1.Typescript 详见 Tyscript 扫盲

​ angular默认开发语言是Typescript

2.ES6知识

​ anuglar用Typescript 书写完全符合ES6标准和可能要加入ES7以及类似后台写法的语法编译成原生的JS.

3.关于ES6类的概念、ES7装饰器等概念。

​ 关于ES知识详见，ES6扫盲.md

---

如果作为学生用的层面：

引导：

​ 1最简单的MVC例子。说明MVC的作用，自己写麻烦，使用工具

angularjs

官网：https://angularjs.org/

​ 版本：1.x.x 之前用的

​ 2.x.x 推荐使用 完全不同的东西

​ 官网地址：https://angular.io/

​ 推荐中文官网 https://angular.cn/

​ api地址：https://angular.cn/docs/ts/latest/

之前写程序

​ 面向过程

​ 面向对象

​ 2.x.x面向数据

---

本堂课的课程安排：

1.首先先运行起angular2.x玩玩。

2.讲解文件整个项目文件结构

3.讲解各个详细的知识点

4.综合使用angular2.x开发一个带后台的项目。

---

第一部分：

如何使用：先会用，至于原理我们随后会讲。

1.安装node和npm

​ node -v 和 npm -v 测试是否安成功

2.创建配置文件，不想写也没事，直接提供初始配置好的包

• package.json 用来标记出本项目所需的 npm 依赖包。
• package.json identifies npm package dependencies for the project.
• tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
• systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。

下载初始配置包，请使用我的版本，官方版本太臃肿。

3.npm install 安装依赖包

4.npm start 运行

5.修改 些内容继续查看内容，hello world 至此，a2 开发环境和hello world 运行成功。

---

原理：

我们是这样写 Angular 应用的：用带 Angular 扩展语法的 HTML 写 模板 ， 用 组件 类管理这些模板，用 服务 添加应用逻辑， 并在 模块 中打包发布组件与服务。

然后，我们通过 引导 根模块 来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

先说原理上图,

yl.png

文件结构和程序运行过程说明：

file.png

---

原理讲完了，开始写代码，各个知识点。

1.数据绑定。

​ {{}} 注意插值绑定跟angular 1.x不一样，它是单向绑定。vm->v,双向绑定事件的时候说

2.事件绑定

​ 1.Click me!

​ 2.先写到这，有事儿，回头推到git上把代码。

​

​