特性概览 - 《Angular 入门》 - 书栈网

组件（Components）
模块（Modules）
模板（Templates）
元数据（Metadata）
数据绑定（Data binding）
指令（Directives）
Services（服务）
依赖注入（Dependency injection）
总结

内容纲要

了解 Angular 核心特性（概念模型）

本章节主要为大家描述 Angular “概念模型”（ Mental Model ）的构建。我发现，很多开发者已经做过非常多的项目，但是当你跟他聊的时候，你很快就会发现他并没有掌握这门框架的精髓。打几个比方，当别人提到 Spring 的时候，你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西；当别人提到 Hibernate 或者 Mybatis 的时候，你的大脑里面立即会浮现出 ORM 的概念；当别人提到 React 的时候，你想到的应该是 VDom、JSX；当别人提到 jQuery 的时候，你首先想到的应该是$对吧？所以，你可以看到，任何一个成功的框架都有自己独创的 “概念模型”，或者叫 “核心价值” 也可以。这是框架本身存在的价值，也是你掌握这门框架应该紧扣的主线，而不是上来就陷入到茫茫多的技术细节里面去。

组件（Components）

既然如此，问题就来了，新版本的 Angular 的核心概念是什么呢？

非常简单，一切都是围绕着“组件”（ Component ）的概念展开的：

Component（组件）是整个框架的核心，也是终极目标。“组件化”的意义有2个：

第一是分治，因为有了组件之后，我们可以把各种逻辑封装在组件内部，避免混在一起
第二是复用，封装成组件之后不仅可以在项目内部复用，而且可以沉淀下来跨项目复用

模块（Modules）

NgModule（模块）是组织业务代码的利器，按照你自己的业务场景，把组件、服务、路由打包到模块里面，形成一个个的积木块，然后再用这些积木块来搭建出高楼大厦。

模板（Templates）

组件是用来封装对视图的操作的，而我们的所谓的视图其实也就是常规的 HTML 模板：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

元数据（Metadata）

元数据告诉 Angular 如何处理组件类。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '你的第一个 Angular 应用';
}