0
点赞
收藏
分享

微信扫一扫

Angular 快速入门

Angular 快速入门

AngularJS 官方网址

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

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

  Angular 快速入门_javascript

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 快速入门_typescript_02

Angular2 的核心概念

  Angular 快速入门_javascript_03

组件

  Angular 快速入门_官网_04

组件使用案例

  Angular 快速入门_typescript_05

组件要素

   Angular 快速入门_javascript_06

组件的通讯机制

  Angular 快速入门_javascript_07

组件全生命周期

  Angular 快速入门_官网_08

组件示例

  Angular 快速入门_官网_09

元数据与装饰器

  Angular 快速入门_javascript_10

模板

  Angular 快速入门_官网_11

数据绑定

  Angular 快速入门_javascript_12

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

  Angular 快速入门_typescript_13

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

  Angular 快速入门_javascript_14

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

  Angular 快速入门_typescript_15

组件渲染

   Angular 快速入门_javascript_16

组件树

  Angular 快速入门_官网_17

 数据流向

  Angular 快速入门_javascript_18

指令

   Angular 快速入门_javascript_19

案例

   Angular 快速入门_javascript_20

自定义指令

  Angular 快速入门_javascript_21

服务

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

  Angular 快速入门_javascript_22

依赖注入

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

  Angular 快速入门_官网_23

  Angular 快速入门_typescript_24

分层注入

   Angular 快速入门_官网_25

模块

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

 文件模块

  Angular 快速入门_javascript_26

文件模块使用

  Angular 快速入门_官网_27

应用模块

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

  Angular 快速入门_官网_28

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

  Angular 快速入门_官网_29

应用模块

  Angular 快速入门_typescript_30

  Angular 快速入门_typescript_31

 

核心概念总览图

  Angular 快速入门_typescript_32

Angular 快速上手

TypeScript

  Angular 快速入门_javascript_33

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

  JavaScript 的超集,兼容 JavaScript。

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

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

  文件扩展名为 .ts 。

 案例

   Angular 快速入门_typescript_34

  TypeScript = Type + JavaScript

类与接口

  Angular 快速入门_typescript_35

装饰器

一种特殊的类型的声明。

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

  Angular 快速入门_typescript_36


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


 开发环境的准备

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

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

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

webpack 原理

  Angular 快速入门_javascript_37

 

   Angular 快速入门_javascript_38

 

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​​


举报

相关推荐

0 条评论