Angular 7 教程

Angular 7 是一个开源的 Web 应用程序框架，由谷歌公司开发。它是 AngularJS 的升级版，其主要特点是数据与视图同步、简化 DOM 操作、Webworker 高效处理等，被广泛应用于构建单页面应用程序（SPA）和移动端应用程序。

安装

要安装 Angular 7，你需要使用 Node.js 的包管理工具 npm。可以在终端里使用以下命令来安装 Angular：

npm install -g @angular/cli

创建一个新项目

创建一个新项目可以使用 Angular CLI 命令行工具，只需在终端里输入以下命令就可以新建一个名为 my-app 的项目：

ng new my-app

然后进入项目目录，启动 Web 服务器并在浏览器中查看应用：

cd my-app
ng serve --open

组件

组件是 Angular 7 应用中的基本构造块，它由组件类、HTML 模板和相关样式组成。要创建一个组件，可以使用 Angular CLI 的命令行工具：

ng generate component component-name

生成的组件包括组件类、HTML 模板和相关样式。

数据绑定

Angular 7 中的数据绑定有四种方式：属性绑定、事件绑定、双向绑定和插值表达式。其中最常用的是插值表达式，它可以将数据显示在模板中：

<h1>{{title}}</h1>

服务

Angular 7 中的服务是一些可重用的逻辑单元，它可以与组件、指令和其他服务交互。要创建一个服务，可以使用 Angular CLI 的命令行工具：

ng generate service service-name

生成的服务组件包括一个服务类和一个测试类。

路由

Angular 7 的路由系统使得在不同视图之间导航变得更加简单，它通过 URL 模式映射到组件。要使用路由，在 app.module.ts 文件中导入 RouterModule 和 Routes：

import { RouterModule, Routes } from '@angular/router';

然后定义一个路由数组，包括 URL 和对应的组件：

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

最后把路由配置添加到 NgModule 的 @NgModule() 装饰器中：

imports: [
  RouterModule.forRoot(routes)
],

总结

Angular 7 是一个流行的 Web 应用程序框架，它具有数据与视图同步、简化 DOM 操作、Webworker 高效处理等特点。要创建一个 Angular 7 应用，可以使用 Angular CLI 的命令行工具，然后可以创建组件、数据绑定、服务和路由。通过学习 Angular 7，你将了解如何构建单页面应用程序和移动端应用程序，为自己的职业生涯增加更多技能。