Angular 是一款流行的前端开发框架，适用于开发单页面应用程序和大型企业应用程序。Angular4 是 Angular 应用最新的稳定版本。本文将介绍 Angular4 的基本架构和项目实践，详细阐述如何在实际项目中使用这个框架。
基本架构
Angular4 的基本架构包括三个部分：模块，组件和服务。这些部分构成了一个完整的应用程序，每个部分都具有明确定义的职责和功能。
模块
Angular4 应用的核心是模块。每个 Angular4 应用都至少有一个根模块。模块是一组相关的组件、指令和服务的集合，它们一起工作以实现应用程序的不同功能。模块通过装饰器 @NgModule 来定义。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ----------- -------- ---------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
在上面的例子中，我们通过 @NgModule 装饰器定义了一个名为 AppModule 的模块。该模块引入了 BrowserModule 模块，这是一个必需的模块，因为我们将在浏览器中运行应用程序。它还引入了 AppComponent 组件，用于定义应用程序的根组件。最后，它使用了 bootstrap 来表明这是应用程序的启动组件。
组件
组件是 Angular4 应用的基本构建块，用于构建用户界面。每个组件都由三个部分组成：HTML 模板、样式表和 TypeScript 代码。组件通过装饰器 @Component 来定义。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Hello World!</h1>',
styles: ['h1 { color: red; }']
})
export class AppComponent { }在上面的例子中，我们通过 @Component 装饰器定义了一个名为 AppComponent 的组件。该组件具有选择器 my-app，意味着它将被插入到 HTML 中的 my-app 标签中。它还具有一个简单的 HTML 模板，用于显示 “Hello World!” 的标题。最后，它还包含了一个简单的样式表，用于将字体颜色设置为红色。
服务
服务是 Angular4 应用的另一个重要部分。服务提供了应用程序所需的数据或功能，例如 HTTP 请求、路由和身份验证。服务通过装饰器 @Injectable 来定义。
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
getData(): string {
return 'my data';
}
}在上面的例子中，我们通过 @Injectable 装饰器定义了一个名为 MyService 的服务。该服务具有一个名为 getData() 的方法，该方法返回一个字符串作为数据。
项目实践
以下是如何使用 Angular4 开发一个简单的 todo 应用程序的实践。该应用程序将具有以下功能：
- 显示 todo 列表
- 添加 todo
- 完成 todo
- 删除 todo
创建模块和组件
首先，我们需要使用 Angular CLI 创建一个新的应用程序。Angular CLI 是一个命令行工具，用于生成和管理 Angular 应用程序。
ng new todo-app cd todo-app
接下来，我们需要创建一个名为 TodoModule 的模块，并在其中定义四个组件： TodoListComponent、 TodoAddComponent、 TodoCompleteComponent 和 TodoDeleteComponent。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------- - ---- ---------------------------------- ------ - ---------------- - ---- -------------------------------- ------ - --------------------- - ---- ------------------------------------------ ------ - ------------------- - ---- -------------------------------------- ----------- -------- ---------------- ------------- ------------------- ----------------- ---------------------- --------------------- ---------- ------------------- -- ------ ----- ---------- - -
接下来，我们需要在每个组件中定义 HTML 模板和样式表。我们可以使用 Angular CLI 快速生成每个组件的骨架。
ng generate component todo-list ng generate component todo-add ng generate component todo-complete ng generate component todo-delete
在生成之后，我们可以打开每个组件的 HTML 模板并根据需要添加内容。
添加服务
接下来，我们需要添加一个服务来管理 todo 列表。我们可以使用 Angular CLI 快速生成服务。
ng generate service todo
在生成之后，我们需要在 TodoModule 引入该服务，并将其提供给所有组件。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------- - ---- ---------------------------------- ------ - ---------------- - ---- -------------------------------- ------ - --------------------- - ---- ------------------------------------------ ------ - ------------------- - ---- -------------------------------------- ------ - ----------- - ---- ----------------- ----------- -------- ---------------- ------------- ------------------- ----------------- ---------------------- --------------------- ---------- -------------- ---------- ------------------- -- ------ ----- ---------- - -
在生成之后，我们可以打开生成的服务并添加所需的功能。例如，我们需要一个 getTodos() 方法以获取 todo 列表。
添加路由
接下来，我们需要添加路由以在不同的组件之间导航。我们可以使用 Angular CLI 快速生成路由。
ng generate module app-routing --flat --module=app ng generate component home
在生成之后，我们需要在 AppRoutingModule 中定义我们的路由。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - ----------------- - ---- ---------------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- ------- ---------- ----------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
接下来，我们需要在 AppModule 中引入并导入 AppRoutingModule。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ----------------------- ------ - ------------- - ---- ------------------------ ------ - ---------- - ---- --------------------- ----------- -------- --------------- ----------------- ------------ ------------- ---------------- ---------- --------------- -- ------ ----- --------- - -
现在，我们可以在 HomeComponent 的 HTML 模板中添加链接以导航到 TodoListComponent。
添加样式
最后，我们可以添加一些样式以美化我们的应用程序。我们可以使用 SASS 或 LESS 等 CSS 预处理器来添加样式。我们可以在组件的样式表中添加自定义样式。
-- -------------------- ---- -------
---------- -
-------- --
-- -
----------- -----
------- --
-------- ----
----------------- --------
------- --- ----- -----
-------------- ----
-------- -----
------------ -------
---------------- --------------
-------------- ----
-
-结论
Angular4 是一个功能强大的前端框架，适用于构建单页面应用程序和大型企业应用程序。本文介绍了 Angular4 的基本架构以及如何在项目中使用它。我们创建了一个简单的 todo 应用程序，并使用组件、服务和路由来实现不同的功能。最后，我们可以添加样式以美化我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675285238bd460d3ad95163f