AngularJS入门必学（一）

涎涎原创约 1273 字大约 4 分钟...

AngularJS入门必学（一）

注意

本博文仅供学术研究和交流参考，严禁将其用于商业用途。如因违规使用产生的任何法律问题，使用者需自行负责。

AngularJS介绍：

AngularJS是一款来自Google的前端JavaScript框架，也是SPA框架。AngularJS框架的体积非常小，
但是设计理念和功能却非常强大，极大的简化前端开发的负担，它快速成为咯JavaScript的主流框架，帮助开发者从事web开发。
诞生于2009年1.5和4.0为两个重要的版本。Angular4是语义化的版本，将尽可能兼容Aangular
2，因为Angular团队不想重蹈从Angular 1.X 到 Angular 2.X 的覆辙。
速度更快、体积更小、优化view引擎、精简@angular/core、优化Nglf和NgFor。

接下来的规划：

Predictable,Transparent & Incremental Evolution


Version 4	March 2017
Version 5	September/October 2017
Version 6	March 2018
Version 7	September/October 2018

学习曲线

Angular JS 核心概念

Angular 第一代

JavaScript不可变对象 Angular
2系统架构中组件是最核心的概念，组件由元数据（Metadata)、组件类（Component) 和模板（Template) 组成，其中：

1、元数据描述组件的属性
2、组件类实现组件的功能，可调用依赖注入（Dependent Injection) 的服务（Service)
3、模板定义组件的神力（View)，其中包括HTML元素（element)、其他组件和/或Directive。
组件类和模板通过数据绑定关联：通过属性绑定（Perperty Binding)在模板视图中显示属性值，
用户操作模板视图触发事件通过事件绑定（Event Binding)回调组件的事件处理函数。
注意：系统架构仅包括Angular 2 核心，可选的路由、HTTP服务未包括在内。

组件Component

selector : CSS selector,对组件一般是元素名称
template : 组件视图模板
providers : 组件级依赖注入的服务列表
directives : 模板可使用的其他组件和Directive
模板可使用的 Pipe列表
本组件使用的CSS样式表。

组件类Class

组件类

@Input声明输入的属性绑定成员字段
@Output声明输出的事件绑定成员字段
构造函数通过参数类型CalcService自动注入服务实例，并由TypeScript自动赋值给私有的this.calc成员字段
在事件绑定的处理函数中,可以调用依赖注入的服务,并更新成员变量值.成员变量值更新后，由Angular 2的变更检测自动更新到视图中
this.changed.next()向父组件输出事件，事件参数是字符串。

元数据 Metadata

元数据告诉Angular 2 如何处理类。如@Component是采用TypeScript标注（decorator)方式表示的组件配置信息。 TypeScript标注是一个函数，将组件配置信息转换为附加在类定义上的元数据，Angular 2在运行时根据元数据创建和显示组件实例。其他常的元数据包括@Injectable、@Input、@Output、@RouteConfig等

数据绑定

依赖注入Dependency Injection

Directive

Angular 2模板根据directive指令动态生成DOM。 Directive是使用@Directive标注的类，分为结构型（structural )和属性型（attribute)。系统预定义的结构型Directive包括ngIf、 ngFor和ngSwitch,属性型Directive包括ngClass、ngStyle等。Directive可以自定义。

服务Service

Angular 2对服务没有特殊定义；一般地，任何独立的功能均可定义为服务。服务主要被组件调用，组件通过依赖注入使用服务。一个定义良好的组件一般地仅处理输入属性和事件回调，其他功能均可封装为服务。

其他需要储备的部分技术栈

优点：

趋近于Webcompents
模版功能丰富
比较完善的前端MVC框架
引入Java中大师的优秀概念
全新的命令行工具 Angular-CLI
完美实现MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

缺点：

双向数据绑定，任何操作都会造成scope脏检查的机制。

默认的绑定方式为单向绑定，每个组件的背后都维护着一个独立的变化监听器。当Zones捕获到异步常，都会通过Angular执行变化操作。每次检测都始于根组件，并已深度优先的员向叶子组件遍历执行（组件均已树的形式组织）。

Angular1对移动端超级不友好
第三方模块对路由的支持并不友好
$scope观察机制，隔离浏览器原生模块，并用流的形式
响应式表单以及JS的强类型语言

AngularJS入门必学（一）

AngularJS入门必学（一）

AngularJS介绍：

接下来的规划：

Predictable,Transparent & Incremental Evolution

学习曲线

Angular JS 核心概念

Angular 第一代

组件Component

组件类Class

组件类

元数据 Metadata

数据绑定

依赖注入Dependency Injection

Directive

服务Service

其他需要储备的部分技术栈

优点：

缺点：

对比React

对比 Vue

综合

AngularJS Hello World

分割线

预览:

AngularJS入门必学（一）

# AngularJS入门必学（一）

# AngularJS介绍：

# 接下来的规划：

# Predictable,Transparent & Incremental Evolution

# 学习曲线

# Angular JS 核心概念

# Angular 第一代

# 组件Component

# 组件类Class

# 组件类

# 元数据 Metadata

# 数据绑定

# 依赖注入Dependency Injection

# Directive

# 服务Service

# 其他需要储备的部分技术栈

# 优点：

# 缺点：

# 对比React

# 对比 Vue

# 综合

# AngularJS Hello World

# 分割线

预览:

AngularJS入门必学（一）

AngularJS介绍：

接下来的规划：

Predictable,Transparent & Incremental Evolution

学习曲线

Angular JS 核心概念

Angular 第一代

组件Component

组件类Class

组件类

元数据 Metadata

数据绑定

依赖注入Dependency Injection

Directive

服务Service

其他需要储备的部分技术栈

优点：

缺点：

对比React

对比 Vue

综合

AngularJS Hello World

分割线