社交网络应用从零开始第五天——Angular入门

实习实习我找找找

已于 2024-07-14 11:48:54 修改

阅读量215

点赞数 4

文章标签： angular.js javascript 前端

于 2024-07-12 14:55:53 首次发布

本文链接：https://blog.csdn.net/fm_1211/article/details/140371427

版权

教程传送门：
Angular 入门 - 学习 Web 开发 | MDN (mozilla.org)

Angular - 快速上手

Angular项目app下缺少 app.module.ts_angular 脚手架生成项目中没有生成 module.ts-CSDN博客

（环境配置请看社交网络应用从零开始第四天——安装Node.js和Angular CLI-CSDN博客）

ps：我写的主要是为了记录过程，方便下一次做

新建一个Angular项目

打开终端在自己习惯的目录下运行（项目名自己取）：

ng new 项目名 --routing=false --style=css --no-standalone --ssr=false

ng new 命令会在桌面上创建一个最小的 Angular 初始应用程序

附加属性--routing 和 --style规定了如何处理应用程序中的导航和样式。

--no-standalone解决没有app.module.ts的问题

--ssr=false表示项目初始化时，你选择不配置服务器端渲染。

使用以下 cd 命令导航到新项目：

cd 项目名

运行项目在项目文件夹目录使用以下命令：

ng serve

当命令行界面提示你有关分析的信息时，请回答 no。

在浏览器中，导航到 http://localhost:4200/ 以查看新的初始应用程序。如果你更改了任何源文件，应用程序都将自动重新加载。

运行好了长这样：

当 ng serve 命令正在运行时，你可能希望打开另一个终端选项卡或窗口以运行新命令。如果你在任何时候想要停止运行应用程序，请在终端中按 Ctrl + c

在VS code运行

首先，把你刚刚运行的项目关闭
然后打开VScode，打开你的项目文件夹
然后按快捷键 ctrl + shift + y 打开调试控制台，点击终端
在终端运行 ng serve --open 就行，--open可以在运行项目之后自动打开浏览器并访问 http://localhost:4200/

构建第一个angular应用

教程指路：Angular - 教程：英雄指南

一些命令存档

创建一个新组件

ng generate component 组件名

创建一个新服务

ng generate service 服务名

导入一些必要的类

import { Component, OnInit } from '@angular/core';
//让组件能够使用Angular的组件化和生命周期管理

import { Hero } from '../hero';
/*从项目的相对路径 '../hero' 处导入了Hero类。
这里的 ../hero 通常指向一个定义了Hero类的文件，比如hero.ts*/

对组件的一些定义

export class HeroesComponent implements OnInit{
/*
export: 关键字，表示这个类可以被其他模块导入和使用。
class HeroesComponent: 定义一个名为HeroesComponent的类。
implements OnInit: 表明这个类实现了OnInit接口，OnInit是Angular提供的一种生命周期钩子，允许
在组件初始化完成后执行代码。
*/

//hero: Hero: 声明一个名为hero的属性，其类型是Hero。Hero是在其他地方定义的类。
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
/*
= { id: 1, name: 'Windstorm' };: 初始化hero属性为一个具有id和name字段的对象。
这里hero被初始化为一个ID为1，名字为"Windstorm"的英雄对象。
*/

  constructor() { }
//构造函数，是类中特殊的方法，用于初始化类的实例。

  ngOnInit() {
//OnInit接口中定义的方法。当Angular初始化完组件并创建了DOM元素之后，就会调用这个方法。
  }
}

定义函数并返回数据

//定义一个getHeroes函数，并且返回一个 Hero 类型的数组（Hero[]）
getHeroes(): Hero[] {
    return HEROES;
  }

一些HTML代码

div和span

<div><span>id: </span>{{hero.id}}</div>
<!--
<div>标签：这是HTML的块级元素，通常用于组合其他元素，形成更大的布局单元。

<span>id: </span>：
<span>是一个内联元素，常用于对文本的样式进行局部控制或添加额外的结构层次。这里用于显示静态文
本'id:'，作为标签说明。

{{hero.id}}：
Angular的插值表达式，会从当前作用域的组件实例中读取hero对象的id属性的值，并将其插入到HTML中
相应的位置。
-->

插值绑定和管道

<h2>{{hero.name | uppercase}} Details</h2>
<!-- 在插值绑定中，管道运算符（|）后面的uppercase一词会启用内置的UppercasePipe。让
hero.name显示为大写 -->

label、input、双向数据绑定

<!-- 开始一个 div 容器，用于组织内部的表单元素 -->
<div>

  <!-- label是表单，，文本"name："是对表单的描述-->
  <label>name:

    <input [(ngModel)]="hero.name" placeholder="name">
    <!-- input 元素用于接收用户的文本输入 -->
    <!-- 使用 Angular 的 [(ngModel)] 指令进行双向数据绑定，这意味着 input 中的值将与组件中
    的 hero.name 属性保持同步，当用户在 input 中输入时，hero.name 会被更新，同样，如果 
    hero.name 发生变化，input 中显示的值也会自动更新 -->

    <!-- 结束 label 元素 -->
  </label>

  <!-- 结束 div 容器 -->
</div>

列表，列表项，选中样式和事件绑定

<h2>My Heroes</h2>
<ul class="heroes"><!--无序列表的开始标签，class="heroes"用于添加CSS样式。-->

<!--为数组中的每一个Hero生成一个<li>列表项-->
  <li *ngFor="let hero of heroes">
<!--
*ngFor是一个 Angular的复写器指令。它会为列表中的每项数据复写它的宿主元素,此处为<li>列表项。
也就是对于heroes数组中的每个元素hero，都要生成一个<li>元素
let hero定义了一个临时变量hero，用于存储每次迭代中的当前数组元素。
-->

  [class.selected]="hero === selectedHero"：
<!--
这是一个属性绑定，用于条件性地添加或移除selected CSS类。当hero对象与组件中的selectedHero属
性相等时，selected类会被添加到<li>元素上。这通常用于高亮显示当前选中的项，例如改变背景色或
文本颜色。
-->

  (click)="onSelect(hero)">
<!--事件绑定，当用户点击列表项时，会触发组件中的onSelect方法，并将当前的hero对象作为参数传递
-->

    <span class="badge">{{hero.id}}</span> {{hero.name}}
<!--class="badge"用于设置样式-->

  </li>
</ul>

后面又出现了*ngIf，感觉其实*ngIf就是if，*ngFor就是for

单项绑定和在组件间传递数据

<!--将子组件app-hero-detail的hero属性单向绑定到selectedHero，即将selectedHero传递给子
组件的hero-->
<app-hero-detail [hero]="selectedHero"></app-hero-detail>

<!--相应的，子组件的类里必须定义一个名为hero的输入属性，从父组件接收数据。-->
export class HeroDetailComponent {
  @Input() hero: Hero | null = null;
}