Angular--Hello(TODO)

最近有个小错误,因为最近还是在看thingsboard,最近终于看到前端的代码,突然发现怎么全是ts的文件,仔细一看原来并不是之前认为的AngularJS,而是Angular。。。我tm真的无语了,又要去重新学。。。

Angular的结构比起AngularJS真的复杂很多,以前还可以说是传统HTML+JS结构的扩展。新的版本真的大变了。

以前的AngularJS只要一个html就是开炫,现在是要一堆文件,就算摸清楚最小系统,也要折腾一番,唉,好吧。。。

1 环境配置

手动配置Angular的环境也是堪称折磨,尤其是package.json,tsconfig.json。所以一般都用自动配置。

首先是安装node.js,安装的原始命令是:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

因为众所周知的原因,这个命令很大概率要超时,必须换成。

curl -o- https://gitee.com/mirrors/nvm/raw/v0.39.7/install.sh | bash

之后source ~/.bashrc

然后升级nvm install --lts

然后全局安装 Angular CLI

npm i -g @angular/cli

后面用到的ng命令,就是Angular CLI工具。这个工具的帮助如下:

创建项目(这一步 CLI 会自动生成配置和依赖),

ng new hello-angular --minimal --routing=false --style=css

cd hello-angular

ng serve -o # 默认 http://localhost:4200

2 典型的Angular

在上一步生成的代码基础上,做了一些修改。如下:

main.ts

TypeScript 复制代码
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HelloAngular</title>
    <base href="/" />
  </head>
  <body>
    <app-root></app-root>  <!-- 👈 Angular 根组件挂载点 -->
  </body>
</html>

app.ts

TypeScript 复制代码
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; // ✅ 加上这个!
import { TodoService, TodoItem } from './todo.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, CommonModule],  // ✅ 把 CommonModule 加入 imports
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class App {
  newTitle = '';

  constructor(public todo: TodoService) {}

  add() {
    if (this.newTitle.trim()) {
      this.todo.add({ title: this.newTitle.trim(), done: false });
      this.newTitle = '';
    }
  }

  toggle(item: TodoItem) {
    this.todo.toggle(item);
  }

  remove(item: TodoItem) {
    this.todo.remove(item);
  }
}

todo.service.ts

TypeScript 复制代码
import { Injectable } from '@angular/core';

export interface TodoItem {
  title: string;
  done: boolean;
}

@Injectable({ providedIn: 'root' })
export class TodoService {
  list: TodoItem[] = [];
  add(item: TodoItem) { this.list.push(item); }
  toggle(item: TodoItem) { item.done = !item.done; }
  remove(item: TodoItem) { this.list = this.list.filter(i => i !== item); }
}

app.config.ts

TypeScript 复制代码
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    
  ]
};

app.component.html

html 复制代码
<h1>📝 Angular Todo (standalone)</h1>

<input
  placeholder="输入待办事项"
  [(ngModel)]="newTitle"
  (keyup.enter)="add()"
/>
<button (click)="add()">添加</button>

<ul>
  <li *ngFor="let item of todo.list">
    <input type="checkbox" [checked]="item.done" (change)="toggle(item)" />
    <span [class.done]="item.done">{{ item.title }}</span>
    <button (click)="remove(item)">🗑</button>
  </li>
</ul>

app.component.css

html 复制代码
.done { text-decoration: line-through; color: #888; }
li   { margin: 4px 0; }
概念 代码位置 说明
组件 (Component) AppComponent UI 单元 + 逻辑
模板 (Template) app.component.html HTML + Angular 指令 (*ngFor, [(ngModel)])
服务 (Service) TodoService 业务数据与方法,注入到组件
注入 (DI) constructor(public todo: TodoService) 将服务注入组件
双向绑定 [(ngModel)]="newTitle" 表单输入 ↔ 组件字段
事件绑定 (click)="add()" 用户操作触发方法

3 框架小解毒

3.1 组件定义和模板编译

首先是定义各种组件。

TypeScript 复制代码
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, CommonModule], 
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

这里的app-root就对应了html中的<app-root></app-root>

对于template或者templateUrl里面的内容,框架会再进行编译,并且在前端重新生成,

3.2 运行时加载

在框架加载后,会根据main.js重新对app-root字段处理,这个就是重新加载之后的。

3.3 代码流程

在main.ts里面导入了App

TypeScript 复制代码
bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

在App中定义了Service,通过@Component和HTML关联。

TypeScript 复制代码
export class App {
  newTitle = '';

  constructor(public todo: TodoService) {}

  add() {
    if (this.newTitle.trim()) {
      this.todo.add({ title: this.newTitle.trim(), done: false });
      this.newTitle = '';
    }
  }

  toggle(item: TodoItem) {
    this.todo.toggle(item);
  }

  remove(item: TodoItem) {
    this.todo.remove(item);
  }
}

至于Service,感觉就有点类似H文件,完全是数据结构和方法的申明。

TypeScript 复制代码
export interface TodoItem {
  title: string;
  done: boolean;
}

@Injectable({ providedIn: 'root' })
export class TodoService {
  list: TodoItem[] = [];
  add(item: TodoItem) { this.list.push(item); }
  toggle(item: TodoItem) { item.done = !item.done; }
  remove(item: TodoItem) { this.list = this.list.filter(i => i !== item); }
}

现在的标签也改成ng开头了,比如ngModel,ngFor等等。

相关推荐
上单带刀不带妹5 分钟前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
11054654011 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax1 小时前
在图片没有加载完成时设置默认图片
前端
OEC小胖胖2 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
你怎么知道我是队长2 小时前
C语言---编译的最小单位---令牌(Token)
java·c语言·前端
一枚前端小能手3 小时前
🔥 Vue状态管理越写越乱,Pinia拯救了我
前端
cloudcruiser3 小时前
Apache HTTP Server:深入探索Web世界的磐石基石!!!
前端·其他·http·apache
一个专注api接口开发的小白3 小时前
手把手教程:使用 Postman 测试与调试淘宝商品详情 API
前端·数据挖掘·api
芜青4 小时前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax
织_网4 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron