AngularJSangular2入门,就立即等同篇就足足了

背景和定义:

AngularJS2
是一样舒缓开源JavaScript库,由Google维护,用来扶持单一页面应用程序运行。

AngularJS2 是 Angular 1.x 的晋升版本,性能达到博明确的加强,能很好之支撑
Web 开发组件。

AngularJS2 宣布让2016年9月份,它是基于ES6来开发之。

Angular2.x与Angular1.x 的区别

Angular2.x以及Angular1.x 之别类似 Java 和 JavaScript
或者说是雷锋和雷峰塔的界别,所以当攻读Angular2.x时大家需要盘活重新学习一宗语言的私心准备。

开工前的预备干活

学AngularJS2前,你要有基本的前端基础:HTML、CSS、JavaScript。此外你还得了解
NPM 及 TypeScript。

Angular 2 架构

Angular 2 应用程序应用主要出于以下 8 个组成部分组成:

  • 1、模块 (Modules)

  • 2、组件 (Components)

  • 3、模板 (Templates)

  • 4、元数据 (Metadata)

  • 5、数据绑定 (Data Binding)

  • 6、指令 (Directives)

  • 7、服务 (Services)

  • 8、依赖注入 (Dependency Injection)

下看每个有是什么相互工作之:

AngularJS 1

模板 (Templates)是由 Angular 扩展的 HTML 语法组成,组件
(Components)类用来治本这些模板,应用逻辑部分通过服务
(Services)来完成,然后于模块中封装服务同组件,最后经引导根模块来启动以。

连下去对以上 8 只有分离解析:

1.模块

模块又同样片代码组成,可用来实施一个大概的任务。

Angular 应用是由于模块化的,它发出投机的模块系统:NgModules。

每个 Angular 应该至少要来一个模块(根模块),一般可命名为:AppModule。

Angular 模块是一个涵盖 @NgModule
装饰器的类,它接受一个所以来描述模块属性之首数据对象。

几乎独重大之习性如下:

  • declarations (声明) – 视图类属于是模块。 Angular
    有三种植档次的视图类: 组件 、 指令 和 管道 。

  • exports – 声明( declaration
    )的子集,可用于其他模块中之零件模板 。

  • imports – 本模块组件模板被需要由另外导出类的模块。

  • providers
    服务的开创者。本模块把她在全局的劳动表中,让其当利用中之另外有都不过为访到。

  • bootstrap
    应用之主视图,称为彻底组件,它是怀有其他应用视图的宿主。只有干净模块需要安装
    bootstrap 属性中。

一个顶简便的一干二净模块,eg:

import{NgModule}from’@angular/core’;

import{BrowserModule}from’@angular/platform-browser’;

@NgModule({imports: [BrowserModule],

providers: [Logger],

declarations: [AppComponent],

exports: [AppComponent],

bootstrap: [AppComponent]})exportclassAppModule{}

连着下通过引导根模块来启动以,开发进程一般以 main.ts 文件中来带
AppModule :

import{platformBrowserDynamic}from’@angular/platform-browser-dynamic’;

import{AppModule}from’./app.module’;

platformBrowserDynamic().bootstrapModule(AppModule);

2.组件(Components)

组件是一个模板的控制类用于拍卖利用和逻辑页面的视图部分。

零件是成 Angular 应用之底子及骨干,可用以所有应用程序中。

组件知道怎么渲染自己及配置依赖注入。

组件通过有些是因为属性和办法结合的 API 与视图交互。

缔造 Angular 组件的点子发生三步:

  • 从 @angular/core 中引入 Component 修饰器

  • 树一个不足为奇的接近,并因而 @Component 修饰它

  • 在 @Component 中,设置 selector 自从定义标签,以及 template
    模板

3.模板(Templates)

Angular模板的默认语言就是是HTML。

咱俩可由此利用模板来定义组件的视图来报告 Angular
如何展示器件。以下是一个简短是实例:

<div>网站地址 : {{site}}</div>

4.元数据(Metadata)

长数据报告 Angular 如何处理一个类似。

设想以下状况咱出一个零件为作 Component ,它是一个看似,直到我们报告
Angular 这是一个零部件为止。

汝得将元数据附加到此类似上来告诉 Angular Component 是一个零件。

在 TypeScript 中,我们用 装饰器 (decorator) 来附加元数据。

eg:

@Component({

selector : ‘mylist’,

template : ‘<h2>菜鸟教程</h2>’

directives : [ComponentDetails]

})

export class ListComponent{…}

@Component 装饰器能接受一个配置对象,并把紧随其后的类标记成了组件类。

Angular 会基于这些消息创建和显示组件及其视图。

@Component 中之布局起说明:

  • selector – 一个 css 选择器,它告诉 Angular 在 父级 HTML
    中搜寻一个 <mylist> 标签,然后创建该器件,并插入此标签中。

  • templateUrl – 组件 HTML 模板的地方。

  • directives – 一个屡屡组,包含 此 模板需要依赖的零部件或指令。

  • providers
    一个屡组,包含组件所依之服务所要的指注入提供者。

5.数量绑定(Data binding)

数据绑定为应用程序提供了一致栽简易而同一的章程来展示数据以及数额交互,它是管理应用程序里面数值的如出一辙栽机制。

通过这种体制,可以于HTML里面取值和赋值,使得数据的读写,数据的持久化操作变得愈加简明便捷。

如图所示,数据绑定的语法有四种样式。每种形式还出一个倾向——从 DOM 来、到
DOM 去、双向,就比如图被的箭头所表示的。

AngularJS 2

插值: 在 HTML 标签中显示器件值。

<h3>

{{title}}

<img src=”{{ImageUrl}}”>

</h3>

属性绑定: 把元素的性能设置也组件中属性的值。

<img [src]=”userImageUrl”>

事件绑定: 在组件方法名让点击时接触。

<button (click)=”onSave()”>保存</button>

双向绑: 使用Angular里的NgModel指令可以再便利的展开双向绑定。

<input [value]=”currentUser.firstName”

(input)=”currentUser.firstName=$event.target.value” >

6.指令(Directives)

Angular模板是动态的 。当 Angular 渲染它们经常,它见面依据指令对 DOM
进行改动。

令是一个含有”指令元数据”的类。在 TypeScript 中,要通过 @Directive
装饰器把正数据附加到近似及。

于Angular中隐含以下三种档次的吩咐:

  • 性指令:以素的属性形式来使用的下令。

  • 布局指令:用来转DOM树的组织

  • 组件:作为指令的一个要害子类,组件本质上可以当做是一个饱含模板的吩咐。

<li *ngFor=”let site of sites”></li>

<site-detail *ngIf=”selectedSite”></site-detail>

*ngFor 告诉 Angular 为 sites 列表中之每个项生成一个 <li> 标签。

*ngIf 代表除非当选的项有时时,才会包含 SiteDetail 组件。

7.服务(Services)

Angular2中之劳务是包装了某个平等特定功能,并且可通过注入的计供他人使用的独立模块。

劳分为多种,包括:值、函数,以及使用所急需的特征。

像,多只零部件中冒出了又代码时,把还代码提取及服务中实现代码复用。

以下是几栽常见的劳务:

  • 日志服务

  • 数据服务

  • 消息总线

  • 税款计算器

  • 应用程序配置

以下实例是一个日记服务,用于把日记记录到浏览器的控制台:

export class Logger {

log(msg: any) { console.log(msg); }

error(msg: any) { console.error(msg); }

warn(msg: any) { console.warn(msg); }

}

8.依赖注入

支配反转(Inversion of
Control,缩写为IoC),是面向对象编程中的同等栽设计原则,可以就此来削弱低计算机代码之间的耦合度。其中最广的点子叫做依赖注入(Dependency
Injection,简称DI),还有平等栽方法被”依赖查找”(Dependency Lookup)。

透过操纵反转,对象在为创造的当儿,由一个调控体系外有着目标的外围实体,将其所据的靶子的援传递给它们。也堪说,依赖让注入到目标中。

当风俗的开支模式中,调用者负责管理所有目标的依靠,循环依赖一直是噩梦,而以凭借注入模式受到,这个管理权交给了注入器(Injector),它于软件运行时当依赖对象的交替,而未是以编译时。这种操纵反转,运行注入的性状就是凡指注入的精髓所在。

Angular 能由此翻构造函数的参数类型,来得知组件需要如何服务。 例如,
SiteListComponent 组件的构造函数需要一个 SiteService:

constructor(private service: HeroService) { }

当 Angular 创建组件时,会率先为组件所需要的劳动找一个注入器( Injector )

注入器是一个护卫服务实例的容器,存放着以前创建的实例。

比方容器被还不曾所要的服务实例,注入器就会见创造一个劳务实例,并且增长到容器中,然后将这服务返回给
Angular 。

当有的劳动都吃解析了并返时, Angular
会以这些劳务啊参数去调用组件的构造函数。 这便是依注入 。

 


 

复多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技能文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿

AngularJS 3

相关文章