### Angular 入门知识点详解
#### 一、Angular 概述
Angular 是一款由 Google 维护的开源前端框架，用于构建动态 Web 应用。它利用 HTML 作为模板语言，并扩展了 HTML 的语法，使得数据绑定更加方便，能够更好地处理用户输入。Angular 提供了一套完整的解决方案，包括构建工具和服务端渲染等。
#### 二、Angular CLI
Angular CLI（Command Line Interface）是官方提供的命令行工具，用于快速搭建 Angular 项目。它提供了许多便捷的命令，如创建项目、生成组件和服务等，大大简化了开发流程。
##### 1. 创建新项目
要创建一个新的 Angular 项目，首先确保已经安装了 Angular CLI。如果没有安装，可以通过以下命令全局安装：
```
npm install -g @angular/cli
```
接着，通过 `ng new` 命令创建一个新的项目：
```
ng new 项目名称
```
此命令将自动创建一个包含基本文件结构的新项目，并安装所有必需的依赖。
##### 2. 启动应用
创建完项目后，进入项目根目录：
```
cd 项目名称
```
然后运行以下命令来启动开发服务器：
```
ng serve --open
```
这将自动打开浏览器并加载应用。
#### 三、组件和指令
Angular 应用是由多个组件组成的。每个组件都有自己的模板、样式和逻辑。Angular CLI 提供了命令来帮助快速生成这些组件。
##### 3. 新建组件
使用 `ng generate component` 或简写为 `ng g c` 来创建新的组件：
```
ng generate component 组件名称
```
该命令会自动生成组件相关的 HTML、TS 和 CSS 文件。
##### 4. 创建类、服务
除了组件外，还可以创建普通的 TypeScript 类或服务来实现特定功能。
- **创建类**
```
ng generate class 类名
```
- **创建服务**
```
ng generate service 服务名
```
#### 四、数据绑定
Angular 支持多种类型的数据绑定方式，包括单向绑定和双向绑定。
##### 5. 管道 (Pipe)
管道是用于转换数据的一种方法，可以用来格式化字符串、日期等。
例如，使用 `uppercase` 管道将字符串转换为大写：
```html
<h2>{{ hero.name | uppercase }} Details</h2>
```
##### 6. 数据双向绑定 [(ngModel)]
Angular 中的数据双向绑定可以通过 `(ngModel)` 实现。这种方式允许用户界面中的输入值与模型同步更新。
示例代码：
```html
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
```
为了使双向绑定生效，还需要在 `app.module.ts` 文件中导入 `FormsModule`：
```typescript
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
...
})
export class AppModule { }
```
#### 五、DOM 操作指令
Angular 提供了一系列的 DOM 操作指令，如 *ngFor 和 *ngIf，用于根据数据条件动态更新视图。
##### 7. *ngFor
`*ngFor` 指令用于遍历数组并为每个元素生成一个 DOM 节点。
示例代码：
```html
<ul>
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span>{{hero.name}}
</li>
</ul>
```
##### 8. (click) 事件绑定、*ngIf
`(click)` 可用于绑定点击事件，而 `*ngIf` 则用于条件性地展示 DOM 元素。
#### 六、输入属性 (@Input())
在组件之间传递数据时，可以使用 `@Input()` 装饰器来标记接收外部数据的属性。
示例代码：
```typescript
import { Hero } from '../hero';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-hero',
template: `
<div>{{ hero.name }}</div>
`,
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
@Input() hero: Hero;
constructor() { }
ngOnInit(): void {
}
}
```
#### 七、路由
Angular 的路由功能可以实现页面之间的导航。
##### 9. 添加路由
1. **创建路由模块**
使用 `ng generate module app-routing --flat --module=app` 创建路由模块。
2. **定义路由配置**
在 `app-routing.module.ts` 中定义路由配置：
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [
{ path: '', component: HeroesComponent },
{ path: 'home', component: HomeComponent },
{ path: '**', component: ErrorComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
```
3. **在主模板中插入 `<router-outlet>`**
在 `app.component.html` 文件中插入 `<router-outlet>` 标签，以展示不同的组件。
#### 小结
本文介绍了 Angular 的基础概念以及如何使用 Angular CLI 快速搭建项目。我们还探讨了组件、数据绑定、DOM 操作指令、输入属性和路由等关键知识点。通过这些基础知识的学习，开发者可以开始构建自己的 Angular 应用程序。
