一篇带你看懂Angular架构

首先我们先明确几个概念，Angular是以TS为基础的组件化，模块化开发

那么TS目前我们可以浅显地认为，是在声明变量的时候要求设置变量类型

组件化，相信前端的朋友都不陌生，和我们用其他框架所说的组件是一个东西

模块化，一个模块里面包含很多组件，而模块的划分是按照功能划分的，比如一个购物软件，我们会有用户模块，这里包含了用户登录组件、信息修改组件等，还会有商品模块，包含了商品列表组件，商品详情组件

路由：Angular是单页应用

一、Angular安装

npm i -g @angular/cli  //下载cli，Angular的内置框架

ng new myPro //创建项目，最后是项目名

cd myPro  //进入项目文件
ng serve //开启服务，端口号420

下载cli时最好在C盘全局下载，而创建项目时，可以进入你希望存放项目的目录下执行

二、项目架构

那么让我们看一下每个文件具体内容

三、组件

组件由三个部分组成，<组件名称>.component.ts   <组件名称>.component. html       

<组件名称>.component.css

.component.ts

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

@Component({
  selector: 'app-root', //选择器，可以理解为声明组件名称，一旦有人使用组件，就会定位到这里
  templateUrl: './app.component.html', //引入组件的.html文件
  styleUrls: ['./app.component.css'] //引入组件的.css文件
})
export class AppComponent { //这里是组件逻辑的编写，是面向对象编程，学过java的很容易理解啦
  title = 'Demo';        //总之这里声明了这个组件会用到的属性和方法，这里也可以调用生命周期方法
                         //和java不一样的是这里也可以进行异步编程
}

.component.html和.component.css和正常的html，css文件一样，没什么要特殊说明的

四、模块

@NgModule({
  declarations: [AppComponent],     // 声明属于本模块的组件/指令/管道
  imports: [BrowserModule, AppRoutingModule], // 导入其他模块，导入之后我们就可以使用其他模块的组件了
  providers: [],                   // 注册服务，注册后我们可以在本模块中使用这些服务
  bootstrap: [AppComponent]        // 指定根组件，因为这个模块是根模块，指定根组件后第一个渲染的组件就是AppCompnent
})
export class AppModule { }

五、指令

Angular的指令分三种

1.组件也属于一种指令，组件指令

2.属性指令，顾名思义，用来设置样式的

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

使用：

<p appHighlight>这段文字会有黄色背景</p>

3.结构指令，添加或移除 DOM 元素来改变布局结构。

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  constructor(
    private templateRef: TemplateRef<any>, //获取指令所控制的模板内容
    private viewContainer: ViewContainerRef //Angular 用于管理视图（添加/删除）的容器
  ) {}
}

使用

<p *appUnless="shouldHide">这段文字在shouldHide为false时显示</p>

4.Angular中有内置指令

//常用结构指令
*ngIf //条件显示
*ngFor // 循环
*ngSwitch // 多条件选择

//常用属性指令
ngClass // 动态添加/移除 CSS 类
ngStyle // 动态设置样式
ngModel // 双向数据绑定

六、管道

管道一般是用来简单处理格式的，比如把获得的时间戳，变为显示在页面上的时间

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

@Component({
  selector: 'app-date-example',
  template: `
    <p>当前时间: {{ currentDate }}</p>
    <p>格式化时间: {{ currentDate | date }}</p>    //这里 | date 就是在使用管道
    <p>完整格式: {{ currentDate | date:'full' }}</p>
    <p>自定义格式: {{ currentDate | date:'yyyy-MM-dd HH:mm:ss' }}</p>
    <p>时区转换: {{ currentDate | date:'medium':'GMT+8' }}</p>
  `
})
export class DateExampleComponent {
  currentDate = new Date();
}

也可以自定义管道

可以多个管道一起使用

<p>最后更新时间: {{ lastUpdated | date:'yyyy-MM-dd' | uppercase }}</p>

七、服务

服务一般封装的是服务全局的功能，组件通过依赖注入的方式使用

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

@Injectable({
  providedIn: 'root' // 注册为全局单例服务
})
export class DataService {
  private data: string[] = ['Angular', 'React', 'Vue'];

  constructor() { }

  // 获取所有数据
  getData(): string[] {
    return this.data;
  }

  // 添加新数据
  addData(item: string): void {
    this.data.push(item);
  }

  // 删除数据
  removeData(index: number): void {
    this.data.splice(index, 1);
  }
}

在组件中使用服务

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data-list',
  template: `
    <h2>框架列表</h2>
    <ul>
      <li *ngFor="let item of items; let i = index">
        {{ item }} <button (click)="removeItem(i)">删除</button>
      </li>
    </ul>
    <input [(ngModel)]="newItem" placeholder="添加新框架">
    <button (click)="addItem()">添加</button>
  `
})
export class DataListComponent {
  items: string[];
  newItem = '';

  constructor(private dataService: DataService) {
    this.items = this.dataService.getData();
  }

  addItem(): void {
    if (this.newItem.trim()) {
      this.dataService.addData(this.newItem);
      this.newItem = '';
      this.items = this.dataService.getData(); // 刷新列表
    }
  }

  removeItem(index: number): void {
    this.dataService.removeData(index);
    this.items = this.dataService.getData(); // 刷新列表
  }
}

以上就是对Angular大体框架的介绍，希望能帮助大家初步认识Angular，更好地理解Angular架构，本人也是刚刚学习Angular，未来更深入学习后会继续和大家分享学到的知识