Angular 快速入门

Angular 快速入门


AngularJS 官方网址

Angular:https://www.angular.cn/

Angular官网:https://angularjs.org/

  Angular 快速入门

AngularJS 1.X 的困境

  1. 饱受诟病的性能问题。
  2. 落后当前web的发展理念(如组件开发方式)
  3. 对手机端支持不够友好

Angular 2.x 特性

16年5月正式发布。

2版本取消了JS的叫法,直接叫做 Angular

2版本不能兼容1版本的代码。

  1. 移除 controller + $scope 设计,改用组件式开发(更易上手)
  2. 性能更好(渲染更快,变化监测效率更高)
  3. 优先为移动端应用设计(angular mobile toolkit)
  4. 更加贴合未来的标准(如/ES67,WebComponent)

  Angular 快速入门

Angular2 的核心概念

  Angular 快速入门

组件

  Angular 快速入门

组件使用案例

  Angular 快速入门

组件要素

  Angular 快速入门

组件的通讯机制

  Angular 快速入门

组件全生命周期

  Angular 快速入门

组件示例

  Angular 快速入门

元数据与装饰器

  Angular 快速入门

模板

  Angular 快速入门

数据绑定

  Angular 快速入门

属性绑定-[value]  :把组件类的数据传递到组件模板中。

  Angular 快速入门

事件绑定-[keyup] :把模板产生的数据通过函数调用传递到组件类。

  Angular 快速入门

双向绑定-[(ngModel)] :实现数据双向流动。

  Angular 快速入门

组件渲染

  Angular 快速入门

组件树

  Angular 快速入门

数据流向

  Angular 快速入门

指令

  Angular 快速入门

案例

  Angular 快速入门

自定义指令

  Angular 快速入门

服务

服务是实现专一目的的逻辑单元,如日志服务。

  Angular 快速入门

依赖注入

组件一如外部构建(如服务)的一种机制。

  Angular 快速入门

  Angular 快速入门

分层注入

  Angular 快速入门

模块

  1. 框架代码以模块形式组织(文件模块)
  2. 功能单元以模块形式组织(应用模块)

文件模块

  Angular 快速入门

文件模块使用

  Angular 快速入门

应用模块

  应用模块就是对应用类零散的组件、指令、服务等按照功能进行归类包装。

  Angular 快速入门

  同模块的指令可以相互使用同模块的组件,跨模块的不可以。

  Angular 快速入门

应用模块

  Angular 快速入门

  Angular 快速入门

核心概念总览图

  Angular 快速入门

Angular 快速上手

TypeScript

  Angular 快速入门

TypeScript 是微软开发的编程语言。

  JavaScript 的超集,兼容 JavaScript。

  运行前需要预编译生成 JavaScript 代码。

  加入类型判断,编译时进行类型检查。

  文件扩展名为 .ts 。

 案例

  Angular 快速入门

  TypeScript = Type + JavaScript

类与接口

  Angular 快速入门

装饰器

一种特殊的类型的声明。

能够被附加到类、方法、访问符、属性或参数上。

  Angular 快速入门

想要了解更多,浏览TypeScript官网:https://www.typescriptlang.org

开发环境的准备

Node.js :推荐使用6.0以上版本。

webpack:打包工具,可以使用 npm install -g webpack 安装。

开发IDE开发工具(VS Code) :微软推出的免费跨平台编辑器,支持TypeScript 语法及高亮提示。

webpack 原理

  Angular 快速入门

  Angular 快速入门

上一篇:牛客练习赛44C


下一篇:iOS 学习笔记 五 (2015.03.17)使用storyBoard进行tableview的跳转