Angular学习1

最新推荐文章于 2026-05-15 05:23:42 发布

原创最新推荐文章于 2026-05-15 05:23:42 发布 · 833 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular

WEB学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了使用Angular CLI创建新项目的步骤，包括配置环境、安装依赖、创建组件和应用模块。文章详细讲解了Angular组件的模板、样式和数据绑定，特别是ngModel指令的双向数据绑定功能。同时，展示了如何通过CLI生成新组件、定义Hero类以及使用管道进行数据格式化。最后，更新了项目文件，展示了如何在组件间传递数据。

一、配置安装

1、需要知识

html+css+js+es6+Typescript

2、安装配置

下载nodejs

下载npm

下载cnpm

建议如下代码，换成淘宝源

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、下载

输入cnpm install -g @angular/cli后开始下载

下载完成后输入 ng v，出现如下安装成功

4、创建新的项目

ng new angular01

(如果出现如下错误)

建议，回到C盘，卸载angular

用下面的命令

npm uninstall -g @angular/cli

然后重新用npm安装

npm insatll -g @angular/cli

安装后重新执行命令(下面是跳过安装以来)

ng new angular02 --skip-install

npm有点慢，可以用cnpm

创建好如下依赖库

打开项目

ng serve --open

结果如下：

5、项目导入VS code

用vs code 打开刚刚创建的项目

下载Angular相关插件

然后就可以进行相关开发了

二、目录结构分析

e2e端对端

node_modules各种依赖

src 写代码，定义各种组件

package.json 项目配置文件，名称，版本，所需依赖等

tsconfig 是ts的配置文件

package.json与src最重要

app

assets 静态文件

app--app,modules.ts

三、初步操作

Angular 组件

你所看到的这个页面就是应用的外壳。这个外壳是被一个名叫 AppComponent 的 Angular 组件控制的。

The page you see is the application shell. The shell is controlled by an Angular component named AppComponent.

组件是 Angular 应用中的基本构造块。它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。

修改应用标题

用你最喜欢的编辑器或 IDE 打开这个项目，并访问 src/app 目录，来对这个起始应用做一些修改。

你会在这里看到 AppComponent 壳的三个实现文件：

app.component.ts— 组件的类代码，这是用 TypeScript 写的。
app.component.html— 组件的模板，这是用 HTML 写的。
app.component.css— 组件的私有 CSS 样式。

<h1>{{title}}</h1>

双花括号语法是 Angular 的插值绑定语法。这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。

浏览器自动刷新，并且显示出了新的应用标题。

以上

你使用 Angular CLI 创建了初始的应用结构。
你学会了使用 Angular 组件来显示数据。
你使用双花括号插值显示了应用标题。

2、创建自己的组件

ng generate component heroes

这样会生成相应的文件

你要从 Angular 核心库中导入 Component 符号，并为组件类加上 @Component 装饰器。

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。

CLI 自动生成了三个元数据属性：

selector— 组件的选择器（CSS 元素选择器）
templateUrl— 组件模板文件的位置。
styleUrls— 组件私有 CSS 样式表文件的位置。

可以定义属性

在.html中调用

然后做的就是显示视图就可以了，在根组件中写入heroes

<h1>{{title}}</h1>
<app-heroes></app-heroes>

3、创建Hero类

在app目录下创建文件hero.ts，定义类

export interface Hero {
  id: number;
  name: string;
}

导入，并创建对象

页面显示

通过管道来使输出大写

**[（ngModel）]**是Angular的双向数据绑定语法。

这里把hero.name属性绑定到了HTML的textbox元素上，刹车数据流可以双向流动：从hero.name属性流动到textbox，并且从textbox流回到hero.name。

    <label>
        <input [(ngModel)]="hero.name"  placeholder="name"/>
    </label>

它属于一个可选模块FormsModule，您必须自行添加此模块才能使用该指令。

它属于可选FormsModule，您必须选择使用它。

会报错

应用模块

这些信息被称为元数据（元数据）。

有些元数据位于装饰器中，你会把它加到组件类上。@Component@NgModule

最重要的装饰器位于顶部类AppModule上。@NgModule

Angular CLI在创建项目的时候就在src/app/app.module.ts中生成了一个AppModule类。这里也就是你要添加FormsModule的地方。

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

imports: [
  BrowserModule,
  FormsModule
],

加入到app.modules.ts中就可以了

小节

您使用CLI创建了第二个组件HeroesComponent。
你把HeroesComponent添加到了壳组件AppComponent中，刹车显示它。
你使用UppercasePipe来格式化英雄的名字。
你用ngModel指令实现了双向数据绑定。
你知道了AppModule。
您把它FormsModule引入了AppModule，煞Angular能识别并应用ngModel指令。
你知道了把组件声明到AppModule是很重要的，并认识到CLI会自动帮你声明它。

4、最终改动

app.commponent.html

<h1>{{title}}</h1>
<p>{{date}}</p>
<!-- <input type="text"> -->
<app-heroes></app-heroes>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { from } from 'rxjs';

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent
 ]
})
export class AppModule { }

heroes.component.html

<h2>{{task.name}} details</h2>
<div>
    
    <label>输入你要查询的项目
        <input [(ngModel)]="task.name"  placeholder="name"/>
    </label>
    <div>项目名称: {{task.name|uppercase}}</div>
    <div>项目id:{{task.id}}</div>
    <div>等待人数:{{task.wait_number}}人</div>
    <div>等到时间:{{task.wait_time}}分</div>

    
</div>

heroses.component.ts

import { Component, OnInit } from '@angular/core';
import { wait_info} from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  task:wait_info={
    name:'Roller coaster',
    id:20,
    wait_number:10,
    wait_time:10,
    wait_pre:10,
  }
  constructor() { }
  ngOnInit(): void {
  }
}

hero.ts

export interface wait_info {
    name:string;
    id:number;
    wait_number:number;
    wait_time:number;
    wait_pre:number;
}