轻松创建一个Angular项目

环境准备

在开始创建 Angular 项目之前，我们需要确保开发环境已正确配置。主要涉及到 Node.js 和 Angular CLI 的安装。

Node.js 安装

Node.js 是 Angular 开发的基础，因为 Angular CLI 是基于 Node.js 运行的。你可以从 Node.js 官方网站（https://nodejs.org/）下载适合你操作系统的安装包。安装过程较为简单，按照安装向导的提示一步步进行即可。

安装完成后，打开终端（Windows 用户可使用命令提示符或 PowerShell），输入以下命令检查 Node.js 是否安装成功：

node -v

如果正确安装，该命令会输出版本号，例如 v14.17.0。同时，npm（Node Package Manager，随 Node.js 一同安装）也已准备就绪，我们可以通过以下命令检查 npm 版本：

npm -v

Angular CLI 安装

Angular CLI（命令行界面）是 Angular 开发中不可或缺的工具，它可以帮助我们快速创建项目、生成组件、服务等各种代码结构，以及进行项目的构建、测试等操作。

在确保 Node.js 和 npm 安装完成后，通过 npm 全局安装 Angular CLI。在终端中执行以下命令：

npm install -g @angular/cli

-g 选项表示全局安装，这样在系统的任何目录下都可以使用 ng 命令（Angular CLI 的命令前缀）。安装过程可能需要一些时间，取决于网络速度。安装完成后，通过以下命令检查 Angular CLI 是否安装成功：

ng --version

如果安装成功，会输出 Angular CLI 的版本信息，类似如下：

Angular CLI: 12.2.10
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64

创建 Angular 项目

当环境准备好之后，我们就可以开始创建 Angular 项目了。使用 Angular CLI 创建项目非常简单，只需要一条命令。

打开终端，导航到你希望创建项目的目录。例如，如果你想在 D:\projects 目录下创建项目，可以使用以下命令（Windows 系统）：

cd D:\projects

在 macOS 或 Linux 系统中，假设你想在 ~/projects 目录下创建项目，则使用：

cd ~/projects

然后执行创建项目的命令：

ng new my - first - angular - project

这里 my - first - angular - project 是项目名称，你可以根据自己的喜好进行更改。在执行该命令后，Angular CLI 会询问你一些问题：

1. 是否使用 Angular 路由：路由用于在单页应用（SPA）中实现页面之间的导航。如果你的应用需要多页面导航功能，选择 Yes；如果只是一个简单的单页面应用，可以选择 No。例如，对于一个简单的展示型应用，可能不需要路由，而对于一个功能丰富的 Web 应用，如电商平台的前端，通常需要路由。
2. 选择样式表格式：Angular CLI 支持多种样式表格式，包括 CSS、SCSS、Less 和 Stylus。CSS 是最基础的样式表语言，SCSS 是对 CSS 的扩展，增加了变量、嵌套等功能，使样式管理更方便。Less 和 Stylus 也提供类似的功能。你可以根据自己的熟悉程度和项目需求进行选择。如果不确定，CSS 是一个安全的选择，而 SCSS 是目前较为流行的选择。

根据你的选择，Angular CLI 开始创建项目。这个过程会自动下载项目所需的各种依赖包，这可能需要一些时间，取决于网络速度。创建完成后，项目目录结构如下：

my - first - angular - project
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e - spec.ts
│   │   ├── app.po.ts
│   │   └── index.e2e - spec.ts
│   └── tsconfig.e2e.json
├── node_modules
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── .angular - cli.json
├── .editorconfig
├── .gitignore
├── karma.conf.js
├── package - lock.json
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

• e2e 目录：用于端到端（End - to - End）测试相关的代码。E2E 测试主要用于模拟用户在浏览器中的真实操作，验证应用的整体功能是否正常。protractor.conf.js 是 Protractor（一个用于 E2E 测试的工具）的配置文件，src 目录下的 .e2e - spec.ts 文件是具体的测试用例。
• node_modules 目录：存放项目所依赖的各种 Node.js 包。这些包是项目运行和开发过程中必不可少的，如 Angular 的核心库、RxJS（用于处理异步操作和事件流）等。
• src 目录：这是项目的源代码目录，是我们开发的主要工作区。
  • app 目录：包含应用的主要组件和模块。app.component.ts 是应用的根组件，每个 Angular 应用都至少有一个根组件。app.module.ts 是应用的根模块，用于组织和引导应用的各个部分。
  • assets 目录：用于存放静态资源，如图像、字体、JSON 文件等。这些资源会在构建过程中被复制到最终的输出目录。
  • environments 目录：用于存放不同环境的配置文件。environment.ts 用于开发环境的配置，environment.prod.ts 用于生产环境的配置。通常，生产环境的配置可能会关闭一些调试信息、使用不同的 API 地址等。
  • favicon.ico：网站的图标，显示在浏览器标签页上。
  • index.html：应用的主 HTML 文件，是应用在浏览器中加载的起始点。它提供了一个简单的页面结构，并通过 <app - root> 标签将 Angular 应用挂载到页面上。
  • main.ts：应用的入口文件，负责引导 Angular 应用的启动。它会加载根模块并将应用渲染到指定的 DOM 元素上。
  • polyfills.ts：用于加载一些浏览器兼容性的垫片（polyfills），使 Angular 应用能够在不支持某些现代 JavaScript 特性的浏览器中正常运行。
  • styles.css：全局样式表，应用的所有组件都可以使用这里定义的样式。也可以根据需要将样式提取到组件级别的样式文件中。
  • test.ts：用于单元测试的入口文件，配置了测试框架（如 Karma 和 Jasmine）的相关设置。
  • tsconfig.app.json 和 tsconfig.spec.json：分别是应用代码和测试代码的 TypeScript 编译配置文件。它们定义了编译选项，如目标 ECMAScript 版本、模块系统等。
  • typings.d.ts：用于声明全局类型定义，在项目中可以使用这些定义而无需额外导入。
• 根目录下的其他文件：
  • .angular - cli.json：Angular CLI 的配置文件，包含项目的一些基本设置，如项目名称、默认样式表格式、构建输出路径等。在 Angular 6 及以上版本，该文件已被 angular.json 替代，功能更加强大且灵活。
  • .editorconfig：用于统一不同编辑器的代码风格设置，如缩进、换行符等。
  • .gitignore：指定哪些文件和目录不需要被 Git 版本控制系统跟踪，例如 node_modules 目录，因为它可以通过 npm install 重新生成。
  • karma.conf.js：Karma 测试运行器的配置文件，用于配置单元测试的相关设置，如测试框架、浏览器启动配置等。
  • package - lock.json：记录项目依赖包的具体版本信息，确保在不同环境下安装的依赖包版本一致。
  • package.json：项目的包管理文件，记录了项目的元数据、依赖的包及其版本范围，同时也可以定义一些脚本命令，如 start（启动开发服务器）、build（构建项目）等。
  • README.md：项目的说明文档，用于向其他开发者介绍项目的基本信息、功能、使用方法等。
  • tsconfig.json：项目的总体 TypeScript 编译配置文件，它是 tsconfig.app.json 和 tsconfig.spec.json 的基础配置。
  • tslint.json：TSLint 工具的配置文件，用于检查 TypeScript 代码是否符合一定的编码规范，有助于保持代码风格的一致性。

启动项目

项目创建完成后，我们可以启动开发服务器来查看项目的运行效果。在项目根目录下，执行以下命令：

ng serve

这会启动一个本地开发服务器，默认监听 http://localhost:4200。执行命令后，终端会输出一些日志信息，类似如下：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2023 - 07 - 15T08:30:00.000Z
Hash: 5f4a1d2b9c87c9e98d2a
Time: 12345ms
chunk {main} main.js, main.js.map (main) 12.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 145 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 3.15 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.34 MB [initial] [rendered]

此时，打开浏览器，访问 http://localhost:4200，你会看到一个默认的 Angular 欢迎页面，这表明你的 Angular 项目已经成功启动。

在开发过程中，ng serve 支持一些有用的选项：

• --open 或 -o：自动在默认浏览器中打开应用。例如：

ng serve -o

• --port：指定开发服务器监听的端口。如果默认的 4200 端口被占用，可以使用这个选项指定其他端口。例如，要监听 4201 端口：

ng serve --port 4201

• --watch：默认情况下，ng serve 会开启文件监听模式，当你修改项目中的文件时，开发服务器会自动重新构建并刷新浏览器页面。如果你想关闭这个功能，可以使用 --watch=false。不过，在开发过程中，通常保持默认的文件监听模式更方便。

项目结构剖析

深入了解 Angular 项目的结构对于后续的开发工作非常重要。我们已经在前面简单介绍了项目目录结构，下面进一步剖析一些关键部分。

组件

组件是 Angular 应用的基本构建块，每个组件都包含三个主要部分：

1. TypeScript 类：定义组件的逻辑，包括属性、方法、生命周期钩子等。例如，app.component.ts 中的 AppComponent 类：

import { Component } from '@angular/core';

@Component({
  selector: 'app - root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my - first - angular - project';
}

• @Component 装饰器：用于标识这是一个 Angular 组件，并提供组件的元数据。
  • selector：定义组件在 HTML 中使用的标签名，如 <app - root>。
  • templateUrl：指定组件的 HTML 模板文件路径。
  • styleUrls：指定组件的样式表文件路径。
• 类定义：AppComponent 类定义了组件的逻辑。这里定义了一个 title 属性，它可以在模板中使用。

2. HTML 模板：定义组件的视图结构。在 app.component.html 中：

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

这里使用了 Angular 的插值语法 {{title}}，将 AppComponent 类中的 title 属性值插入到 HTML 中。 3. 样式表：定义组件的样式。app.component.css 可以包含针对该组件的特定样式，例如：

h1 {
  color: blue;
}

这种组件级别的样式可以有效地封装样式，避免全局样式的冲突。

模块

模块是 Angular 应用中用于组织和管理代码的一种机制。每个 Angular 应用至少有一个根模块，通常命名为 AppModule，定义在 app.module.ts 中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

• @NgModule 装饰器：用于标识这是一个 Angular 模块，并提供模块的元数据。
  • declarations：列出该模块中包含的组件、指令和管道。这里只声明了 AppComponent。
  • imports：导入该模块需要的其他模块。BrowserModule 是 Angular 应用在浏览器环境中运行所必需的模块，它提供了一些基础的服务和功能。
  • providers：用于注册应用中的服务。服务是一种可注入的类，用于在应用中共享数据和执行特定的业务逻辑。这里暂时为空，随着应用的发展，会在这里注册各种服务。
  • bootstrap：指定应用的根组件，即 AppComponent。当应用启动时，Angular 会首先渲染这个根组件。

服务

服务是一个独立的类，用于在应用中共享数据和执行特定的业务逻辑。例如，我们可以创建一个简单的 DataService 来模拟从后端获取数据：

1. 生成服务：使用 Angular CLI 生成服务非常方便，在项目根目录下执行：

ng generate service data

这会在 src/app 目录下生成 data.service.ts 文件：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() {}

  getData() {
    return [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ];
  }
}

• @Injectable 装饰器：标识这是一个可注入的服务，并指定服务的注入范围。providedIn: 'root' 表示该服务在应用的根模块中提供，整个应用都可以使用。
• 类定义：DataService 类定义了一个 getData 方法，返回一些模拟数据。

2. 使用服务：在组件中使用服务，首先要将服务注入到组件中。例如，在 app.component.ts 中：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app - root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data;
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

在 AppComponent 的构造函数中，通过依赖注入的方式将 DataService 注入进来，并在 ngOnInit 生命周期钩子中调用 getData 方法获取数据。

构建项目

当开发工作完成后，需要将项目构建为生产环境可用的版本。使用 Angular CLI 进行构建非常简单，在项目根目录下执行：

ng build

这会在项目根目录下生成一个 dist 目录，其中包含构建好的应用文件。这些文件已经经过压缩、优化等处理，可以直接部署到生产服务器上。

ng build 支持一些有用的选项：

• --prod 或 -prod：开启生产模式构建，会进行更严格的优化，如压缩代码、移除未使用的代码（tree - shaking）等，以减小输出文件的大小。例如：

ng build -prod

• --output - path：指定构建输出的目录。默认是 dist 目录，如果想将构建结果输出到其他目录，可以使用这个选项。例如，要输出到 my - dist - folder 目录：

ng build --output - path=my - dist - folder

• --base - href：指定应用的基础路径。如果你的应用部署在非根路径下，需要设置这个选项。例如，应用部署在 https://example.com/my - app/，则：

ng build --base - href=/my - app/

部署项目

构建完成后，就可以将项目部署到服务器上了。部署的具体方式取决于你的服务器环境和需求。以下是一些常见的部署方式：

静态服务器部署

如果你的应用是一个静态网站，可以使用简单的静态服务器进行部署。例如，使用 http - server 这个 Node.js 包：

1. 全局安装 http - server：

npm install -g http - server

2. 在 dist 目录下启动服务器：

cd dist
http - server

这样就可以通过 http://localhost:8080（默认端口）访问你的应用了。这种方式适合开发阶段的快速部署和测试。

云平台部署

许多云平台都提供了方便的应用部署功能，如 Firebase Hosting、Heroku、AWS S3 等。以 Firebase Hosting 为例：

1. 安装 Firebase CLI：

npm install -g firebase - tools

2. 登录 Firebase：

firebase login

3. 在项目根目录下初始化 Firebase：

firebase init

按照提示选择 Hosting 并进行相关配置。 4. 部署项目：

firebase deploy --only hosting

Firebase 会将 dist 目录下的文件部署到 Firebase Hosting 上，并提供一个可访问的 URL。

自定义服务器部署

如果你的应用需要与后端服务器进行交互，可能需要将前端项目部署到与后端服务器集成的环境中。例如，将前端项目部署到 Node.js 服务器的静态文件目录下。假设你的 Node.js 服务器使用 Express 框架：

1. 在 Express 项目中，创建一个静态文件目录，如 public。
2. 将 dist 目录下的文件复制到 public 目录。
3. 在 Express 应用中设置静态文件中间件：

const express = require('express');
const app = express();

app.use(express.static('public'));

const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

这样，通过访问 http://localhost:3000 就可以访问你的 Angular 应用了，并且可以与后端进行交互。

通过以上步骤，你已经学会了如何轻松创建一个 Angular 项目，包括环境准备、项目创建、启动、剖析项目结构、构建以及部署等全过程。随着对 Angular 的深入学习，你可以进一步探索组件通信、路由导航、状态管理等更高级的功能，构建出更复杂、功能丰富的 Web 应用。