Angular 概览

Angular 简介

• Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。
• Angular 本身就是用 TypeScript 写成的。
• Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境。NgModule 会把相关的代码收集到一些功能集中

本地环境搭建

1. 安装Node.js

2. 下载并安装 npm

npm install

3. 安装Angular CLI

npm install -g @angular/cli

4. 利用CLI创建新应用

ng new {project-name}

5. 利用CLI创建新组件：在对应文件夹下执行以下命令会生成一个以该组件命名的文件夹以及对应的文件

ng generate component {component-name}

6. 使用以下 CLI 命令在本地运行你的应用

ng serve

7. 构建用于生产的应用

ng build

自带库

• Angular 路由器：高级的客户侧导航功能与基于 Angular 组件的路由机制。支持惰性加载、嵌套路由、自定义路径匹配规则等。
• Angular 表单：统一的表单填报与验证体系。
• Angular HttpClient：健壮的 HTTP 客户端库，它可以支持更高级的客户端-服务器通讯。
• Angular 动画：丰富的动画体系，用于驱动基于应用状态的动画。
• Angular PWA：一些用于构建渐进式 Web 应用（PWA）的工具，包括 Service Worker 和 Web 应用清单（Manifest）。
• Angular 原理图：一些搭建脚手架、重构和升级的自动化工具。用于简化大规模应用的开发。

引入第三方组件

• 安装组件
• 在模块下 xxx.modules.ts 文件全局引入

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule
    // ...  
  ]
  // ...
})
export class AppModule {}

app.module.ts 文件说明

@NgModule({
  // imports： 用于引入外部组件，供全局使用
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    // 配置路由， path 指定路径，跳转到对应的 component
    RouterModule.forRoot([
      { path: '', component: ProductListComponent }
    ])
  ],
  // declarations： 用于申明自定义的 组件, 指令等
  declarations: [
    AppComponent,
    ContentDirective
  ],
  // bootstrap： 配置启动组件
  bootstrap: [AppComponent],
  // providers： 配置需要注入的service
  providers: [CartService, AdService]
})
export class AppModule {}

组件构成

• 带有@Component() 装饰器的TypeScript类
• HTML模板
• 样式文件