前言
Angular 是一个开源的前端框架，由谷歌公司维护和开发。它基于 Model-view-controller (MVC) 架构，简化了开发人员在构建单页应用程序时所需的工作量。Angular 5 是 Angular 的最新版本，带来了许多新特性和改进，例如更小的包大小、更快的编译速度、更多的 API 和更好的代码生成器。
在本篇文章中，我们将讨论 Angular5 的基础知识，包括组件、模块、指令、服务等重要概念。我们也会为读者提供一些示例代码来帮助他们更好地理解这些概念。
组件
在 Angular 中，组件是应用程序的基本构建块。它们控制着我们在页面上看到什么以及如何相互作用。每个组件都包含了 HTML 模板、样式和业务逻辑，并由一个装饰器来进行定义。
在下面的例子中，我们可以看到一个简单的组件，它包含了一个 HTML 模板和一些业务逻辑：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ---------------------- -- ------ ----- ------------ - ----- - ------ ------- ---- -
在上面的代码中，@Component 装饰器被用来定义了一个 Angular 组件。它将一个对象传递给它，该对象描述了组件的元数据，包括选择器、模板 URL 和样式 URL。
export class 用来将该组件导出，以便其他组件可以导入并使用它。
模块
除了组件外，模块也是 Angular 中非常重要的概念。模块是一个带有 "@NgModule" 装饰器的类，它包含了整个应用中的所有组件、指令、服务和其他相关的代码。
在下面的例子中，我们定义了一个名为 AppModule 的模块：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - ------------- -- ---------- - ------------ - -- ------ ----- --------- - -
在上面的代码中，@NgModule 装饰器被用来定义了一个 Angular 模块。它的 declarations 属性包含了该模块中的所有组件，imports 属性则包含了该模块依赖的其他模块。bootstrap 属性指定了该应用启动时应该启动哪些组件。
指令
指令是用来添加行为和逻辑的方式，让我们能够操作组件和节点。Angular 有两种指令：结构性指令和属性指令。
结构性指令会根据组件模板中 HTML 结构的变化来添加或删除目标节点。例如，在下面的代码中，我们使用 *ngIf 来动态隐藏或显示 HTML 元素：
<div *ngIf="showContent">这里的内容只有当条件为 true 时才会显示出来。</div>
属性指令则用来更改节点的特性。例如，在下面的代码中，我们使用 ngStyle 指令来为 HTML 元素设置样式：
<div [ngStyle]="{color: color, 'font-size': size + 'px'}">这个文本的颜色和字体大小会受到组件属性 color 和 size 的控制。</div>除了内置的指令之外，我们还可以定义自己的指令。这些自定义的指令可以用来扩展 Angular 的功能，添加新的行为和逻辑。
服务
服务是 Angular 中可重用的代码块，用来执行各种任务。它们是用来封装应用中的复杂业务逻辑和数据的最佳方式。
在下面的例子中，我们定义了一个 UserService 服务，用来获取用户数据：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------
------ ------------------------
-------------
------ ----- ----------- -
------------------- ----- ----------- - -
---------- --------------- -
------ ----------------------------------------- -- -----------------
-
-在上面的代码中，我们使用 @Injectable 装饰器来标注 UserService。这是因为我们在服务中注入了其他 Angular 服务，并且 TypeScript 需要知道这个类应该被视为一个可注入的服务。
在构造方法中，我们注入了 HttpClient，一个 Angular 内置的 HTTP 基于 Observable 的服务。在 getUser() 方法中，我们使用它来获取用户数据，这是一个 HTTP GET 请求。
这只是一个简单的服务示例，但是服务可以用来做很多更复杂的任务，例如数据访问、日志记录、应用消息等。
总结
在本文中，我们详细讨论了 Angular 5 中的一些基础概念，包括组件、模块、指令和服务。通过这些概念的了解，我们可以更好地构建 Angular 应用程序，并实现更丰富的特性和行为。当然，要想真正掌握 Angular，还需要更多的实践和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a5de8cadd4f0e0ffe6e29d