Angular

Angular

Angular 是一个 Web 框架，能够帮助开发者构建快速、可靠的应用。

由 Google 的专业团队维护，Angular 提供了广泛的工具、API 和库，简化和优化你的开发工作流程。Angular 为你提供了一个坚实的平台，可用于构建快速、可靠、能够随着团队规模和代码库规模扩展的应用程序。

Angular-cli

在装好nodejs和npm之后，全局安装Angualr-cli

# 安装angular-cli
npm install -g @angular/cli

# 展示angular-cli版本
ng version

# 新建一个angular项目
ng new [myapp]

# 安装项目依赖x
npm install

# 启动服务
ng serve

VScode ：Angular Language Service 插件安装

重要配置文件

文件名功能
angular.jsonangular框架配置文件
package.jsonNode.js 项目配置文件
tsconfig.jsonTs相关配置类

文件类型

Angular作为前端框架，同样也包含三大件（三个重要模块）

  • 类：Typescript-Componsent-Class
  • 模板:HTML-Template
  • 样式：CSS-Style

如果是一个小的模板，我们可以直接将其放入类中，而对于大的模板，我们将其独立成为一个模板文件（.html）

如果是一个小的样式，我们可以直接将其放入类中，而对于大的模板，我们将其独立成为一个样式文件（.css）

建立组件
ng generate component Home --standalone --inline-template
  • ng generate component：这是 Angular CLI 用来生成新组件的基本命令。
  • Home：指定新组件的名称为 Home。
  • --standalone：表示这个组件将是一个独立组件（standalone component），而不是依赖于 NgModule 的一部分。在 Angular 14 及以上版本中引入了这一特性，允许组件不隶属于任何模块而直接被导入和使用。
  • --inline-template：告诉 Angular CLI 将模板代码直接嵌入到组件类文件中，而不是创建单独的 HTML 文件来存放模板。这可以使文件结构更简洁，尤其适用于小型或简单的组件。

还有一些其他参数可以选择

  • --skip-tests：如果你不想生成测试文件，可以加上这个参数。
  • --inline-style：如果你想让样式也内联到 .ts 文件中，可以加上这个参数。默认情况下，样式会放在单独的 .css 文件中。
  • --flat：如果不希望为组件创建一个单独的目录，可以使用此参数。默认情况下，CLI 会为每个组件创建一个同名目录。
建立接口
ng generate interface housingLocation
  • ng generate interface：这是 Angular CLI 用来生成新接口的基本命令。
export interface HousingLocation {
  id: number;
  name: string;
  city: string;
  state: string;
  photo: string;
  availableUnits: number;
  wifi: boolean;
  laundry: boolean;
}

路由

在main.ts中导入angular框架的路由依赖