[Angular] Day1. 认识 Angular

在2020年9月,我正式的从韧体工程师转职成为一位前端工程师,在自学前端的时候我是选择了 React 这个 Javascript 框架,做了几个作品後投履历面试最後找到目前任职的公司,一路上跌跌撞撞但也算顺利,不过唯一不太顺了就是目前任职的这间公司是使用 Angualr (崩溃!!/images/emoticon/emoticon20.gif),当初刚进到这间公司时也是从头开始 K Angualr 官方文档,看得真的是无煞煞,现在也进到这间公司快一年了,也使用过 Angular 做了几个专案与处理了几个问题,想说再次挑战自己从头开始认真看 Angular 官方文档并用自己的理解整理成笔记,希望能对新进的 Angular 开发者有些帮助。

https://ithelp.ithome.com.tw/upload/images/20210901/20124767Bd7CvcH5JV.png


What is Angular ?

开门见山的说 Angualr 是一个 Javascript 的框架,他是基於 TypeScript 进行开发的,它包括了:

  • 基於 Component 且用於构建 Web App 的框架
  • 他集成了许多 Library 涵盖了多种功能,包括 Router, forms, client-server...
  • 一套开发人员工具,提供开发者开发、构建、测试与更新程序码

记得当初主管跟我分享 Angualr 的好处,因为 Angular 拥有非常完整的功能,可以透过它提供的功能建立一个完整且大型的 Web App,而且就如他有非常完整的功能,当在面对多个开发者同时开发专案时,就会遵守共同的开发原则以减少多人开发的问题。


Angular applications: The essentials

Angualr 中有许多核心思想,了解这些核心思想对於之後的开发有非常好的帮助。

Components

Component 是构建一个 Web App 的最基本方块,每一个 Web App 都是由一个又一个大大小小的 Component 所组成的,在之前学习 React 的时候也是这个概念,但是 Angualr 的 Component 跟 React 非常不一样,他是一个带有 @Component() 装饰器的 TypeScript Class、HTML template, Style ,这边你可能听不懂,但没关系现阶段只要简单记住他是一个有 TypeScript、HTML、CSS 的小方块就好。

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

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
    `,
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}

当你要使用这个 Component 时,只需要在 HTML 中将你要用的 selector 当作 tag 使用就好

<hello-world></hello-world>

Templates

每一个 Component 都拥有自己的 HTML template,它用於在画面中呈现你这个 Component,当你的 Component 发生改变时 Angular 会自动更新并且重新渲染 DOM,他有许多非常好用的功能,比如说动态插入、事件绑定等等的,不过这个我们之後会专门讲解,在这里只要记得 Tmeplate 是用来在 UI 上显示 Component 内容的就可以了。

Dependency injection

Dependency injection 在 Angular 中是一个非常重要的观念,简单来说当你在写一般的 JavaScript 时,你可能写了一个 Class 里面存放了许多逻辑,当你在使用的时候你可能会需要使用 new 将这个Class 实例化成一个 Object,然後才能使用里面的 method 或 property,而当遇到需要使用 static method 时又可以不用实例化 class 就可以使用,需要考虑的事情就比较多一点。

而 Angualr 提供了 Dependency injection 让你再遇到上面的情况时可以无须理会是否需要将 Class 实例化,Angualr 会自动帮你处理这个过程,这样的方式可以让你编写可测试性高且更灵活的程序。

我举个简单的例子说明一下 Dependency injection 有多好用,我们先以一般 Javascript 的模式

// Create class
class HelloService {
	construct() {}

  sayHello() {
		console.log('hello world');  
	}

	static sayGoodBye() {
		console.log('good bye');
	}
}

// use Class
const helloService = new HelloService();

helloService.sayHello(); // hello world
HelloService.sayGoodBye(); // good bye -> static method need call class

上面的例子可以看到,当我们需要使用 Class 里面的 method 时需要先将它实例化才能使用内部的 method,而如果要使用 static method 则需要呼叫 Class 本体,那我们接着看 Angular 的操作。

// Create Class
import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
export class HelloService {
  sayHello() {
		console.log('hello world');  
	}

	sayGoodBye() {
		console.log('good bye');
	}
}

// user Class
import { Component } from '@angular/core';
import { HelloService } from './helloService.ts'

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
    `,
})
export class HelloWorldComponent {
  constructor(private helloServer: HelloService) {}

	sayHi() {
		this.helloServer(); // 'hello world'
	}

	sayBye() {
		this.sayGoodBye(); // 'good bye'
	}
}

上面可以看到我们在 Component 的 constructor 中注入了 helloServer,所以我们可以不需要实例化就可以使用 HelloService 内部的 method,如果这边看不懂没关系,这边只是大概介绍一个概念,之後也会详细说明。


Angular CLI

Angular CLI 是开发 Angular 应用程序的最快、直接且推荐的方式,就像 React 的 create-react-app 一样,可以透过指令快速建立出基本的 Angualr app,除了建立模板之外还有非常多好用的功能,我会在下一章节中仔细讲解 Angular CLI 是什麽。


First-party libraries

就如上面所提到 Angular 拥有非常多非常完善的资源提供你创建你的 Web App,所以当你在开发过程中遇到需要添加功能时,就可以添加相对应的模组来达成你的目的。

这边简单介绍几个 first party libraries

Name Description
Angular Router 基於 Component 的客户端导航与 Router,支援延迟载入、嵌套 Router、自定义路径匹配等等
Angular Forms 表单输入与表单内容验证
Angular HttpClient 可支援 client 端与 server 端的沟通
Angular Animations 驱动 app 动画

结论

本篇章大概介绍了什麽是 Angular 与使用它的好处,有提到许多比较难的观念,template 的操作与
Dependency injection 等等,现在可能看不太懂不过没关系,我们後面会详细讲解这些是干什麽的,当初我也是花了很多时间才大概了解他在干嘛的 ( 苦笑。


Reference


<<:  【Day1】下载VsCode来开启我们的前端测试不归路吧(╬•᷅д•᷄╬)

>>:  保护环0-处理故障

IOS Swift 还能更精简? Closure的其它用法你一定要知道!!

前言: 屁屁痛了一整晚昨天全程跪着打文章,都这样了你们该进来看一下了吧,顺带一提如果有对Swift其...

Eloquent ORM - 多型态关联

通常关联都是两两张资料表之间的关系,而多型态关联则是打破这个限制让一张表可以同时关连到两张以上的资料...

待更新

待更新待更新待更新待更新待更新待更新待更新待更新待更新待更新待更新待更新待更新待更新待更新待更新待更...

Day9-TypeScript(TS)的介面型别(Interface)Part 2

今天要来讲介面型别的使用范例。 通常我们会使用介面来定义函式型别,程序码如下, interface ...

生成模式-builder

今天要介绍的是生成模式中的 builder (生成器模式) 这模式的目的是从复杂物件的布局中抽取生成...