这篇文章将为大家详细讲解有关Angular有哪些主要构造块，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
龙圩网站建设公司创新互联,龙圩网站设计制作，有大型网站制作公司丰富经验。已为龙圩上千提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的龙圩做网站的公司定做！
Angular 主要分为八大构造块（也就是八个核心概念）：模块 (module)、组件 (component)、模板 (template)、元数据 (metadata)、数据绑定 (data binding)、指令 (directive)、服务 (service)、依赖注入 (dependency injection)。其中，最核心的一个概念就就组件。
1. 模块 (module)
Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。
每个Angular应用至少有一个模块（根模块），习惯上命名为AppModule。
根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。
下面是一个简单的根模块：
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }其中重要的属性是：
declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令、管道；
exports - declarations 的子集，可用于其它模块的组件;
imports - 本模块声明的组件模板需要的类所在的其它模块。用来导入其他自定义模块，第三方插件模块；
providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分；
bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。通常在main.ts中引导AppModule，这样platformBrowserDynamic().bootstrapModule(AppModule)
2. 组件 (component)
组件负责控制屏幕上的一小块区域，我们称之为视图。
下面是一个组件的简单例子：
// src/app/hero-list.component.ts
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}3. 模板 (template)
模板就是HTML文件，但是不是标准的HTML文件，它使用了一些模板语法，模板语法使模板有了自己的逻辑关系，并能够实现和组件的简单数据交互。
下面是一个简单的模板：
// src/app/hero-list.component.htmlHero List
Pick a hero from the list
通常使用ng g component my-comoponent命令产生一个组件包含四个文件：
my-comoponent.css // 样式文件 my-comoponent.thml // 模板 my-comoponent.spec.ts // 测试文件 my-comoponent.ts // 这是组件？ 通常我们认为这四个文件组成一个组件
4. 元数据 (metadata)
元数据告诉你如何处理一个类。
其实，在Angular中每个组件只是一个类，但是我们可以通过装饰器来附加元数据告诉Angular这是一个组件。
下面就是HeroListComponent的一些元数据。
// src/app/hero-list.component.ts (metadata)
@Component({ // @Component 将后面的 HeroListComponent 类标记为一个组件
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
@Component的配置项包括：
selector： CSS选择器，它告诉Angular在父级HTML中查找
templateUrl：组件HTML 模板的模块相对地址；
providers - 组件所需服务的依赖注入提供商数组。 这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得英雄数据。
到这里你应该可以明白：模板、元数据和组件共同描绘出这个视图。
5. 数据绑定 (databinding)
数据绑定是Angular中最常用的数据处理模式。数据绑定在模板与对应组件的交互中扮演了重要的角色，在父组件与子组件的通讯中也同样重要。
下面是一个简单的例子：
// src/app/hero-list.component.html
{{hero.name}}插值表达式在
[hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中；
(click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。
Angular默认没有双向绑定，但是，官方推荐这样来实现双向绑定：
Angular 在每个 JavaScript 事件循环中处理所有的数据绑定，它会从组件树的根部开始，递归处理全部子组件。
6. 指令 (directive)
由于Angular模板是动态的，所以你需要通过指令实现对DOM的转换。（组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。 ）
指令分为两种：结构指令、属性指令。
a. 结构指令:通过在 DOM 中添加、移除和替换元素来修改布局。
下面是一个简单的内置结构指令的例子：