Angular 12 入门指南

2023-11-15 01:26:46

前言

Angular 12 是一个强大的前端框架，可帮助您构建健壮、高效的 Web 应用程序。本指南将引导您快速入门 Angular 12，从环境配置到项目创建，一步步掌握 Angular 开发基础知识。

一、Angular 环境配置

1. Node.js 安装

Angular 12 需要 Node.js 环境才能运行。请确保您已在本地安装了 Node.js LTS 版本。您可以通过以下命令检查 Node.js 版本：

node -v

如果没有安装 Node.js，请访问 Node.js 官网下载并安装。

2. NPM/CNPM 安装

NPM 是 Node.js 的包管理工具，用于安装和管理 JavaScript 包。您可以使用以下命令检查 NPM 版本：

npm -v

如果没有安装 NPM，请使用以下命令安装：

npm install -g npm

在中国大陆，由于网络原因，使用 NPM 安装包可能会遇到一些问题。此时，您可以使用淘宝镜像源 CNPM 代替 NPM。

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. Angular CLI 安装

Angular CLI 是一个命令行工具，用于创建、构建和管理 Angular 项目。您可以使用以下命令检查 Angular CLI 版本：

ng -v

如果没有安装 Angular CLI，请使用以下命令安装：

npm install -g @angular/cli

二、开发工具配置

1. 代码编辑器

您可以使用任何您喜欢的代码编辑器来编写 Angular 代码。一些流行的代码编辑器包括：

Visual Studio Code
Atom
Sublime Text
WebStorm

2. 浏览器

您可以使用任何现代浏览器来运行 Angular 应用，包括：

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari

三、CLI 工程结构

Angular CLI 创建的项目具有以下工程结构：

|- node_modules
|- src
|  |- app
|  |  |- app.component.css
|  |  |- app.component.html
|  |  |- app.component.spec.ts
|  |  |- app.component.ts
|  |  |- app.module.ts
|  |- assets
|  |- environments
|  |- favicon.ico
|  |- index.html
|  |- main.ts
|  |- polyfills.ts
|  |- styles.css
|- package.json
|- package-lock.json
|- tsconfig.json
|- karma.conf.js
|- protractor.conf.js
|- tslint.json
|- .editorconfig
|- .gitignore

四、工程源码文件结构

1. app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-12-入門指南';
}

2. app.component.html

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

3. 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 { }