[Angular 基础] - Angular 渲染过程 组件的创建

[Angular 基础] - Angular 渲染过程 & 组件的创建

之前的笔记为了推进度写的太笼统了（只有功能没有其他），当时学的时候知道是什么东西，但是学完后重新复习发现有些内容就记不清了，所以重新用自己的语言总结一下

安装 angular-cli 的指令为：

# 如果不确定是否有安装过，可以先卸载
npm uninstall -g angular-cli @angular/cli
# 重新安装 CLI
npm install -g @angular/cli

Angular 项目启动挂载过程

不涉及到 webpack/vite 编译，只是简单的加载过程

首先看一下 angular 项目的架构：

❯ tree --gitignore
.
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

4 directories, 16 files

其中 src 外面的代码都是配置代码，一般来说没有什么变更的需要，目前我能想到的变动的情况只有添加额外的 CSS 库需要变动 angular.json

src 里面则是实现的代码，这里面 index.html 的作用就是一个锚点，也就是组件在没有渲染时的初始界面，内容如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MyFirstApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

这与没有被 JS 重写的 HTML 一致：

在这里插入图片描述

下面的 script 也是在编译的时候添加到 HTML 网页中，具体的配置依旧在 angular.json 中：

{
  // 省略其他
  "options": {
    "outputPath": "dist/my-first-app",
    "index": "src/index.html",
    "browser": "src/main.ts",
    "polyfills": ["zone.js"],
    "tsConfig": "tsconfig.app.json",
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
    "scripts": []
  }
}

这里 main.ts 就是项目中 JS 文件的入口，其中主要的作用就是挂在对应的组件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// 这个作用类似于 React 中的 <App />
import { AppModule } from './app/app.module';

// 这个作用类似于 ReactDOM.render(<App />, el);
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

而 AppModule 就是一个 Angular 的组件

组件

首先过一下什么是 Angular 组件(component)，抛开具体的实现，单纯从概念上来说，React, Angular 和 Vue 的组件都是一样的：

  • 模块化的代码

    可复用的最小代码块

  • 对数据进行处理

    最简单的例子就是通过 AJAX 获取数据后渲染给用户看

  • 对用户交互进行反应

    这点也可以和上一点进行联动，如用户提供了数据之后，组件会对数据进行处理，并且处理过的数据重新渲染在 UI 上

核心概念虽然是一致的，不过具体的实现，如使用的模板——React 使用 JSX，Angular 使用 HTML template、生命周期、组件内传递数据的方式等则会有所不同。

组件的组成

首先看一下 Angular 项目的 src 结构：

❯ tree src
src
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets
├── favicon.ico
├── index.html
├── main.ts
└── styles.css

3 directories, 9 files

这个项目是通过 ng new my-first-app --no-strict --standalone false --routing false 运行的，也就是 angular cli 提供的模板文件。这里 app 就是一个组件，其中包含了 5 个文件。

其中最重要的两个核心文件为 ___.component.ts 和 ___.module.ts，而对大多数的组件来说，最核心的是前者的实现，大部分的 ___.module.ts 可能并不太会主动去修改。

下面也会解释为什么 css 和 html 并不一定是核心文件的原因

css

当前 CSS 文件是空的：

❯ cat src/app/app.component.css

目前的实现来说，每个 component 中都可以有对应的 CSS 文件，这个对应的 CSS 文件的 作用域(scope) 是当前的组件。

如添加了一个 .header 的 CSS：

.header {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

页面上的显示则是：

在这里插入图片描述

可以看到，样式并不是直接作用于 .header 上，而是作用于 .header[_ngcontent-ng-c317606715]，后者则是随机生成的 Angular 元素的 属性(attribute,目前观测来看，同一个组件都会分享同一个)，这样可以有效防止命名冲突的问题

这个 CSS 文件是通过 @Component 这个 decorator 导入的，使用的属性为 styleUrls，接受的参数是一个数组：

@Component({
  styleUrls: ['./my-component.component.css']
})

在要写的 CSS 比较多的情况下，一般是会创建一个单独的 ___.component.css 文件，但是在 CSS 样式比较短的情况下，则可以省略文件，直接在 decorator 中添加 styles 即可，如：

@Component({
  styles: [`
    h1 {
      color: blue;
    }
    button {
      background-color: green;
      color: white;
    }
  `]
})

之前看的教程说 styles 和 styleUrls 二者只能存在一个，不过现在试了一下，如果二者不冲突的话是都会接受的，而且当前组件如果没有 CSS 的需求，也可以不用放 CSS。

html

这是对应组件的 HTML template，内容如下：

<div style="text-align: center">
  <h1 class="header">Welcome to {{ title }}!</h1>
  <img
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />
</div>
<h2>Here are some links to help you start:</h2>
<ul>
  <li>
    <h2>
      <a target="_blank" rel="noopener" href="https://angular.io/tutorial"
        >Tour of Heroes</a
      >
    </h2>
  </li>
  <li>
    <h2>
      <a target="_blank" rel="noopener" href="https://angular.io/cli"
        >CLI Documentation</a
      >
    </h2>
  </li>
  <li>
    <h2>
      <a target="_blank" rel="noopener" href="https://blog.angular.io/"
        >Angular blog</a
      >
    </h2>
  </li>
</ul>

其本身存在的意义就是生成一个对应的 HTML 模板，通过 module 导入到对应的 HTML   元素中。以目前的例子来说，这个 HTML 模板就是重置 index.html 中的 app-root 元素

每个模板也可以通过 Angular 提供的其他指令与数据的处理层进行交互，并完成数据的动态渲染，这一趴可以理解成传统的 View 层

一般 HTML Template 通过 @Component 中的 templateUrl进行导入：

@Component({
  templateUrl: './my-component.component.html'
})

在创建的 HTML 元素比较少的情况下，也不需要单独创建一个 HTML 模板文件，而是使用 template 创建对应的元素即可：

@Component({
  template: `
    <div>
      <h1>Hello, {{ name }}!</h1>
    </div>
  `
})

⚠️：尽管和 CSS 文件一样可以用两种方式进行创建，但是每个 @Component 必须要有一个 template 和 templateUrl。之前看的教程说template 和 templateUrl 只能二选一，我试着跑了一下，目前的版本是会优先选择 templateUrl 中的内容，而不会报错

spec

测试文件，目前不打算涉及，因此跳过

ts

这个可以理解成 ViewModel 层，它主要的作用就是：

  • 创建一个组件类

  • 处理元数据(metadata)

    这个 metada 指的是创建组件所需要的元数据，也就是 @Component 这个装饰器所需要的数据

  • 处理逻辑

    即处理 HTML Template 中需要渲染的数据，并直接与其交互

一个案例代码为：

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

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

  constructor() {}

  sayHello() {
    alert(this.title);
  }
}

这里的 @Component 是一个 TS decorator，说白了也是一个语法糖，大致的极简实现如下：

class Component {
  constructor(config) {
    this.selector = config.selector;
    this.template = config.template;
    this.render();
  }

  // 这样就不需要重复实现这个功能了
  render() {
    console.log(`${this.template} is mounted to ${this.selector}`);
  }
}

class SomeComponent extends Component {
  constructor(config) {
    super(config);
  }
}

const myComponent = new SomeComponent({
  selector: 'my-component',
  template: '<h1>Hello, world!</h1>',
});

这样的调用为：

❯ node ang.js
<h1>Hello, world!</h1> is mounted to my-component

我试了一下 TS 的实现：

type ComponentProps = {
  selector: string;
  template: string;
};

function Component(config: ComponentProps) {
  return function <T extends new (...args: any[]) => any>(constructor: T) {
    return class extends constructor {
      selector = config.selector;
      template = config.template;

      constructor(...args: any[]) {
        super(...args);
        this.render();
      }

      render() {
        console.log(`${this.template} is mounted to ${this.selector}`);
      }
    };
  };
}

@Component({
  selector: 'app-server',
  template: './server.component.html',
})
class ServerComponent {}

const serverComponent = new ServerComponent();

不过 TS Playground 上有显示报错就是了，不知道不在 TS Playground 能不能跑起来

module

这个文件用来处理当前组件与其他组件的交互，并最终返回一个 NgModule 供其他的模块使用

一个案例代码为：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  // Angular 只会渲染 bootstrap 中包含的组件
  declarations: [AppComponent],
  // 这里负责导入本模块中 components 要用的模块
  // 如与表单交互的 FormsModule
  imports: [BrowserModule],
  // service，现在暂时用不到，用到了再补
  providers: [],
  // 这里是导出的组件
  // React 中只能导出一个组件，Angular 则是一个数组
  bootstrap: [AppComponent],
})
export class AppModule {}

⚠️：main.ts 中使用的就是这个 AppModule

我个人的理解就是，以乐高作对比，component就像一个个乐高积木，拼成功的一个完成品(比如说 🚗、🌲、🏠 这种)就是一个 NgModule，NgModule 又可以组成更大的 NgModule，比如说乐高的城市主题就会包括消防车、飞机、警局等模块。

因此，对于大多数项目——也就是中小型项目来说，一个应用里面存在一个 app.module.ts 就足够了

新建组件

创建组件有两种方式：使用 angular-cli 和 手动创建

手动创建

  1. 手动创建一个新的文件夹包含 __component.html 和 __.component.ts 即可

    结构如下：

    ❯ tree src/app/
src/app/
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
└── serverï
    ├── server.component.html
    └── server.component.ts

    server 下面的就是新的组件，一般命名规范就是这样的

    其中 server.component.html 的内容为对应实现的模板：

    <h1>Hello from Server</h1>

    server.component.ts 将对应的 HTML Template 挂载到对应的 div 上——这里在这之前需要在 app.component.html 中创建对应的 HTML 元素，即 <app-server></app-server>。server.component.ts 中的代码如下：

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
})
export class ServerComponent {}

  2. 更新 App.module.ts 中的 declarations

    前文提过，Angular 只会使用 declarations 中提到的组件，因此不更新 declarations，无法正确渲染：

    // 导入，让 TS 可以找到 entry
import { ServerComponent } from './server/server.component';

@NgModule({
   // 提供信息给 Angular
   declarations: [AppComponent, ServerComponent],
   // ...其余不变...
})

这个时候 server.component.ts 和 server.component.html 中的内容就可以正确渲染了:

在这里插入图片描述

使用 cli

这里使用指令即可：

# generate 和 component 分别可以使用 g 和 c 来代替
# component 为 cli 支持创建的类型，除此之外还有 directive、service、class 等
# servers 为对应组件的名称，想要修改也可以用 folder/component 这样的结构
❯ ng generate component servers
CREATE src/app/servers/servers.component.css (0 bytes)
CREATE src/app/servers/servers.component.html (22 bytes)
CREATE src/app/servers/servers.component.spec.ts (608 bytes)
CREATE src/app/servers/servers.component.ts (203 bytes)
UPDATE src/app/app.module.ts (458 bytes)

此时的项目结构为主：

❯ tree src/app/
src/app/
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── server
│   ├── server.component.html
│   └── server.component.ts
└── servers
    ├── servers.component.css
    ├── servers.component.html
    ├── servers.component.spec.ts
    └── servers.component.ts

3 directories, 11 files

正常情况下，使用 cli 创建的组件会在对应的 module 中被自动添加到 declarations 中去

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/369430.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux 多线程 | 线程的互斥

Linux 多线程 | 线程的互斥

在前面的文章中我们讲述了多线程的一些基本的概念以及相关的操作&#xff0c;那么在本章中我们就将继续讲述与多线程相关的同步与互斥之间的问题。 首先我们使用一个例子引出我们的问题&#xff0c;又一个全局的变量g_val 100&#xff0c;这个变量是被所有的执行流所共享的&a…
阅读更多...
MySQL进阶45讲【10】MySQL为什么有时候会选错索引?

MySQL进阶45讲【10】MySQL为什么有时候会选错索引?

1 前言 前面我们介绍过索引&#xff0c;在MySQL中一张表其实是可以支持多个索引的。但是&#xff0c;写SQL语句的时候&#xff0c;并没有主动指定使用哪个索引。也就是说&#xff0c;使用哪个索引是由MySQL来确定的。 大家有没有碰到过这种情况&#xff0c;一条本来可以执行得…
阅读更多...
VSCode snippets 自定义Vue3代码片段(持续更新）

VSCode snippets 自定义Vue3代码片段(持续更新）

在编写Vue代码时发现VSCode中的各类snippets插件无法提供一些常用的代码片段，为避免重复造轮子，提高编码效率，特意自己定义了一些代码片段。为方便初学者，提供了自定义代码片断的方法。 一、 自定义代码片断的方法 1.打开命令面板（Ctrl+Shift+P) 2. 输入 user Snippets…
阅读更多...
Hadoop3.x基础（3）- Yarn

Hadoop3.x基础（3）- Yarn

来源&#xff1a;B站尚硅谷 目录 Yarn资源调度器Yarn基础架构Yarn工作机制作业提交全过程Yarn调度器和调度算法先进先出调度器&#xff08;FIFO&#xff09;容量调度器&#xff08;Capacity Scheduler&#xff09;公平调度器&#xff08;Fair Scheduler&#xff09; Yarn常用命…
阅读更多...
C语言-2

C语言-2

自定义类型 基本认识 /*引入&#xff1a;学生&#xff1a;姓名&#xff0c;学号&#xff0c;年龄&#xff0c;成绩请为学生们专门定制一个类型&#xff08;创造一个类型&#xff09;结构体格式&#xff1a;struct 标识符 // 标识符即自定义类型的名称{成员; // 自己设置…
阅读更多...
【Unity知识点详解】自定义程序集

【Unity知识点详解】自定义程序集

今天来介绍一下Unity中的自定义程序集。在项目开发中我们经常接触到第三方插件的程序集&#xff0c;如DOTween、Newtonsoft.Json等。 使用自定义程序集有这么几个好处&#xff1a; 方便代码的的复用。当某一功能模块需要在多个项目中重复使用时&#xff0c;可以将代码编译成程…
阅读更多...
新书速览|Kubernetes从入门到DevOps企业应用实战

新书速览|Kubernetes从入门到DevOps企业应用实战

从0到1&#xff0c;从零开始全面精通Kubernetes&#xff0c;助力企业DevOps应用实践 本书内容 《Kubernetes从入门到DevOps企业应用实战》以实战为主&#xff0c;内容涵盖容器技术、Kubernetes核心资源以及基于Kubernetes的企业级实践。从容器基础知识开始&#xff0c;由浅入深…
阅读更多...
C#中使用OpenCvSharp4绘制直线、矩形、圆、文本

C#中使用OpenCvSharp4绘制直线、矩形、圆、文本

C#中使用OpenCvSharp4绘制直线、矩形、圆、文本 继之前的Python中使用Opencv-python库绘制直线、矩形、圆、文本和VC中使用OpenCV绘制直线、矩形、圆和文字&#xff0c;将之前的Python和C示例代码翻译成C#语言&#xff0c;很简单&#xff0c;还是借用OpenCvSharp4库中的Line、…
阅读更多...
基于腾讯云服务器搭建幻兽帕鲁服务器保姆级教程

基于腾讯云服务器搭建幻兽帕鲁服务器保姆级教程

随着网络游戏的普及&#xff0c;越来越多的玩家希望能够拥有自己的游戏服务器&#xff0c;以便能够自由地玩耍。而腾讯云服务器作为一个优秀的云计算平台&#xff0c;为玩家们提供了一个便捷、稳定、安全的游戏服务器解决方案。本文将为大家介绍如何基于腾讯云服务器搭建幻兽帕…
阅读更多...
Fink CDC数据同步（三）Flink集成Hive

Fink CDC数据同步（三）Flink集成Hive

1 目的 持久化元数据 Flink利用Hive的MetaStore作为持久化的Catalog&#xff0c;我们可通过HiveCatalog将不同会话中的 Flink元数据存储到Hive Metastore 中。 利用 Flink 来读写 Hive 的表 Flink打通了与Hive的集成&#xff0c;如同使用SparkSQL或者Impala操作Hive中的数据…
阅读更多...
从MySQL到TiDB：兼容性全解析

从MySQL到TiDB：兼容性全解析

MySQL 在高并发和大数据量场景下&#xff0c;单个实例的扩展性有限。而 TiDB 作为一款分布式NewSQL数据库&#xff0c;设计之初就支持水平扩展&#xff08;Scale-Out&#xff09;&#xff0c;通过增加节点来线性提升处理能力和存储容量&#xff0c;能够很好地应对大规模数据和高…
阅读更多...
AS-V1000 视频监控平台产品介绍：客户端功能介绍（一）

AS-V1000 视频监控平台产品介绍：客户端功能介绍（一）

目 录 一、引言 1.1 AS-V1000视频监控平台介绍 1.2平台服务器配置说明 二、软件概述 2.1 客户端软件用途 2.2 客户端功能 三、客户端功能说明 3.1 登陆和主界面 3.1.1登陆界面 3.1.2登陆操作 3.1.3主界面 3.1.4资源树 3.2 视频预览 3.2.1视频预览界面 3.2.…
阅读更多...
python 基础知识点（蓝桥杯python科目个人复习计划33）

python 基础知识点（蓝桥杯python科目个人复习计划33）

今日复习内容&#xff1a;以做题为主 例题1&#xff1a;小蓝的漆房 题目描述&#xff1a; 小蓝是一位有名的漆匠&#xff0c;他的朋友小桥有一个漆房&#xff0c;里面有一条长长的走廊&#xff0c;走廊两旁有许多相邻的房子&#xff0c;每间房子最初被涂上了一种颜色。 小桥…
阅读更多...
Lambda表达式（匿名函数）

Lambda表达式（匿名函数）

C11中引入了lambda表达式&#xff0c;定义匿名的内联函数。 我们可以直接原地定义函数而不用再跑到外面去定义函数跳来跳去。 同时在stl的排序上也有作用。 [capture] (parameters) mutable ->return-type {statement}下面逐一介绍各个参数的含义. [capture] : 捕获&#…
阅读更多...
喜讯！亚信安慧斩获第六届金猿奖两大奖项！

喜讯！亚信安慧斩获第六届金猿奖两大奖项！

近日&#xff0c;第六届金猿奖颁奖典礼在上海 “第六届金猿季&魔方论坛——大数据产业发展论坛”上隆重举行&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称“亚信安慧”&#xff09;凭借AntDB数据库获评“2023大数据产业年度创新技术突破” 、“2023大数据产业年度…
阅读更多...
解锁MyBatis Plus的强大功能：学习高级操作与DML技巧！

解锁MyBatis Plus的强大功能：学习高级操作与DML技巧！

MyBatisPlus 1&#xff0c;DML编程控制1.1 id生成策略控制知识点1&#xff1a;TableId1.1.1 环境构建1.1.2 代码演示AUTO策略步骤1:设置生成策略为AUTO步骤3:运行新增方法 INPUT策略步骤1:设置生成策略为INPUT步骤2:添加数据手动设置ID步骤3:运行新增方法 ASSIGN_ID策略步骤1:设…
阅读更多...
【数据结构 09】哈希

【数据结构 09】哈希

哈希算法&#xff1a;哈希也叫散列、映射&#xff0c;将任意长度的输入通过散列运算转化为固定长度的输出&#xff0c;该输出就是哈希值&#xff08;散列值&#xff09;。 哈希映射是一种压缩映射&#xff0c;通常情况下&#xff0c;散列值的空间远小于输入值的空间。 哈希运…
阅读更多...
thinkadmin的form.html表单例子

thinkadmin的form.html表单例子

<style>textarea {width: 100%;height: 200px;padding: 10px;border: 1px solid #ccc
阅读更多...
JUC并发工具类的应用场景详解

JUC并发工具类的应用场景详解

目录 常用并发同步工具类的真实应用场景 1. ReentrantLock 1.1 常用API 1.2 ReentrantLock使用 独占锁&#xff1a;模拟抢票场景 公平锁和非公平锁 可重入锁 结合Condition实现生产者消费者模式 1.3 应用场景总结 2. Semaphore 2.1 常用API 2.2 Semaphore使…
阅读更多...
VMware无法检测到插入的USB设备，虚拟机插拔USB无反应

VMware无法检测到插入的USB设备，虚拟机插拔USB无反应

原本正常使用的VMware虚拟机&#xff0c;在进行了重装软件后&#xff0c;发现虚拟机插拔USB设备都无法检测到&#xff0c;没有任何的反应和提示。 通过一系列的操作发现&#xff0c;在新安装了VMware workstation 软件后&#xff0c;存在一定的概率性会发生VMware虚拟机无法自…
阅读更多...
最新文章

Copyright @ 2022~2023