Angular 搭建购物车

ゝ一世哀愁。 2022-01-19 04:07 181阅读 0赞

*编者注：本篇博客重要的是第一章基本原理。*

## angular工程目录 ##

学习文档：[https://angular.cn/start][https_angular.cn_start]

用angular构建购物车源码：[https://github.com/Adalake/angular-shopCart.git][https_github.com_Adalake_angular-shopCart.git]

app目录 包含应用的组件和模块，我们要写的代码都在这个目录

index.html 整个应用的根html，程序启动就是访问这个页面

main.ts 整个项目的入口点，Angular通过这个文件来启动项目

--------------------

## 1. 基本原理（重要） ##

## 1.1 搭建本地开发环境和工作空间 ##

首先确保开发环境有node.js和npm，然后就可以使用 Angular CLI 来创建项目、生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。Angular CLI 中包含一个服务器，方便你在本地构建和提供应用。

控制台输入npm install -g @angular/cli 来安装angular CLI，ng new my-app新建工作空间，cd my-app进去工作空间，然后ng serve --open就可以启动开发服务器。

有了angular CLI就不用webpack了。

### 1.2 angular架构概览 ###

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。

Angular 的基本构造块是 *NgModule**模块*，它为component*组件*提供了编译的上下文环境。 组件定义html视图，组件使用service服务。

组件和服务都是简单的类，这些类使用*装饰器*来标出它们的类型，并提供元数据以告知 Angular 该如何使用它们。

*  组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。
 *  服务类的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过*依赖注入（DI）*使用该服务。

应用的组件通常会定义很多视图，并进行分级组织。 Angular通过 `Router模块提供的`服务来帮助你定义视图之间的导航路径。 路由器提供了先进的浏览器内导航功能。

### 1.3 补充 ###

装饰器是一些用于修饰 JavaScript 类的函数，在angular里表示这个类要接受一个元数据对象，该对象的属性用来描述这个类。

*  **对于模块**：`@NgModule()` 装饰器的类。模块可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。
 *  **对于组件**：`@Component()` 装饰器表明紧随它的那个类是一个组件，并提供模板和该组件专属的元数据。
 *  **对于服务**：@Injectable() 装饰器表明紧随它的那个类是一个服务类。该装饰器提供的元数据可以让你的服务作为依赖*被注入到*客户组件中。因此，组件可以通过服务来：从服务器获取数据、验证用户输入或直接把日志写到控制台等。

每个 Angular 应用都有一个*根模块*，通常命名为 `AppModule`。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多功能模块。它会把组件树和页面中的 DOM 连接起来。

**总结一下：通过以上就要知道模块、组件、服务、路由在angular框架中是怎么作用的。**

--------------------

## 2. 具体细节 ##

## **2.1 模块和组件** ##

app.component.ts：这个文件表示组件，组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html，例子如下：

/*这里是从Angular核心模块里面引入了component装饰器*/
    import {Component} from '@angular/core';
    
    /*用装饰器定义了一个组件以及组件的元数据  所有的组件都必须使用这个装饰器来注解*/
    @Component({
      /*组件元数据  Angular会通过这里面的属性来渲染组件并执行逻辑
      * selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
      *templateUrl  组件的模板，定义了组件的布局和内容
      *styleUrls   该模板引用那个css样式
      * */
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    /*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
    export class AppComponent {
      /*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
      title = '学习Angular';
    }

![这里写图片描述][SouthEast]

--------------------

app.module.ts：这个文件表示模块，与AppComponent类似，模块也需要装饰器来装饰。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

`@NgModule()` 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下：

declaration、exports、imports、bootstrap、providers（这些服务能被本应用中的任何部分使用。）

--------------------

把 `app-product-alerts` 组件（就是它显示的“nnn”按钮）的 `notify` **事件绑定到**商品列表组件的 `onNotify()`** 方法。**

父组件：商品列表组件；子组件：新商品提醒组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

@Component配置：selector、templateUrl、providers

--------------------

## **2.2 路由** ##

> 用法提示：\[[routerLink][]\]="\['/products', productId\]"    
> 
>        import \{ [ActivatedRoute][] \} from '@angular/router';

使用 `RouterLink` 指令定义一个链接。`routerLink` 定义了如何在组件模板中声明式的导航到指定路由（或 URL）。

`import ActivatedRoute` ：用于由 Angular 路由器加载的每个路由组件。它包含关于该路由，路由参数以及与该路由关联的其它数据的信息。

**<router-outlet></router-outlet>**：页面的占位符，动态加载，会被替换掉的。

RouterModule.forRoot：forRoot是用在根模块加载路由配置，而forChild是用在子模块加载路由配置。

## **2.3 服务与依赖注入** ##

对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建*服务*类。 服务类的定义通常紧跟在 “@Injectable()” 装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖*被注入到*客户组件中。**狭义的服务是一个明确定义了用途的类。**

在 Angular 中，要把一个类定义为服务，就要用 `@Injectable()` 装饰器来提供元数据，以便让 Angular 可以把它作为*依赖*注入到组件中。 同样，也要使用 `@Injectable()` 装饰器来表明一个组件或其它类（比如另一个服务、管道或 NgModule）*拥有*一个依赖。也就是说，你可以把一个服务*注入*到组件中，让组件类得以访问该服务类。

## **2. 4 父子组件传值** ##

传值都是子组件import Input、Output。

父传子：子组件通过@Input() 接收。使用@Input装饰变量input（要与父组件中\[\]中的变量一致），即可接收父组件中传来的值。即通过“\[输入属性\]=输入值”的方式传值，给属性打上中括号代表输入。

子传父：子组件需要实例化EventEmitter类来订阅和触发自定义事件。调用emit()方法触发当前实例上的事件。要依赖如click这样的事件来触发。父组件接收时是通过捕获发射事件得到值。

## **2.5 其它** ##

开发中我们经常在`ngOnInit`做一些初始化的工作，而这些工作尽量要避免在`constructor`中进行，`constructor`中应该只进行依赖注入、变量初始化，而不是进行真正的业务操作。

服务可用于跨组件共享数据。方法：在组件的ts先导入该服务，再在constructor中注入该服务。

在项目开发中我们要尽量保持构造函数简单明了，让它只执行简单的数据初始化操作，因此我们会把其他的初始化操作放在 ngOnInit 钩子中去执行。如在组件获取输入属性之后，需执行组件初始化操作等。

为应用启用HttpClient。

--------------------

在购物车里的product-list.component.ts的

> export class ProductListComponent \{
> 
> products = products;\}

这块相当于把 等号左边products这个products.ts赋值给了products。有点像：

> constructor(
> 
> private route: ActivatedRoute,
> 
> private cartService1: CartService,
> 
> ) \{ \}

但是constructor里面的CartService是更高级的东西，它有逻辑、数据、方法等。

--------------------

1. product-details.component.ts 里为啥不用products = products？

而product-list.component.ts 里有products = products。

2. 利用 async 管道修改配送组件的模板，以显示配送类型和价格：src/app/shipping/shipping.component.html

3.使用 `formGroup` 属性绑定把 `checkoutForm` 绑定到模板中的 `form` 标签上。src/app/cart/cart.component.html

## **2.6 表单** ##

> `FormControl` 实例用于追踪单个表单控件的值和验证状态。
> 
> `FormGroup` 用于追踪一个表单控件组的值和状态。
> 
> `FormArray` 用于追踪表单控件数组的值和状态。

FormBuilder 服务有三个方法：control()、group() 和 array()。这些方法都是工厂方法，用于在组件类中分别生成FormControl、FormGroup 和 FormArray。你可以使用 group() 方法，用和前面一样的名字来定义这些属性。

`FormBuilder` 服务是由 `ReactiveFormsModule` 提供的，它已经在之前修改过的 `AppModule` 定义过。在 `app.module.ts：`import \{ ReactiveFormsModule \} from '@angular/forms'; 。只要把它添加到组件的构造函数中就可以注入这个依赖。

**快速起步：注册ReactiveFormsModule ==》 生成并导入表单控件 ==》 在模板中注册该控件**

修改模板，为表单控件添加 `formControl` 绑定，`formControl` 是由 `ReactiveFormsModule` 的 `FormControlDirective` 提供的。

export class NameEditorComponent {
      name = new FormControl('');

使用这种模板绑定语法，把该表单控件注册给了模板中名为 `name` 的输入元素。这样，表单控件和 DOM 元素就可以互相通讯了。

--------------------

比较一下表单构造器和手动创建实例这两种方式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2][]               ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 3][]

--------------------

***profileForm* **这个 `FormGroup` 也通过 `FormGroup` 指令绑定到了 `form` 元素，在该模型和表单中的输入框之间创建了一个通讯层。 由 `FormControlName` 指令提供的 **`formControlName`** 属性把每个输入框和 `FormGroup` 中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯，它们还把更改传递给 `FormGroup`，这个 `FormGroup` 是模型值的权威数据源。

`form` 标签上，使用 `ngSubmit` 事件绑定来监听表单提交，并使用 `checkoutForm` 值调用 `onSubmit()` 方法：

## **2.7 管道 ** ##

[管道][Link 1] 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。

[https_angular.cn_start]: https://angular.cn/start
[https_github.com_Adalake_angular-shopCart.git]: https://github.com/Adalake/angular-shopCart.git
[SouthEast]: /images/20220119/f071e1dedc6c4545856bef414970ad86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20220119/5259e0a21938438d93f1689754956b11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20220119/49eea2f8ccbc43ce80ffb623472b31b4.png
[routerLink]: https://angular.cn/api/router/RouterLink
[ActivatedRoute]: https://angular.cn/api/router/ActivatedRoute
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190613130344833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 3]: /images/20220119/cd1866bd9fa5461099521600e2f6e8f9.png
[Link 1]: https://angular.cn/guide/pipes