当前位置： 首页 > news >正文

一文带你入门，领略angular风采（上）！！！

news 来源：原创 2024/5/19 12:28:42

话不多说，上代码！！！

一、脚手架创建项目

1.安装脚手架指令

npm install -g @angular/cli

2.创建项目

ng new my-app(ng new 项目名)

3.功能选择

4.切换到创建好的项目上

cd my-app

 5.安装依赖

npm install

6.运行项目

npm start或者ng serve --open

跑起来的效果如下：

 7.目录结构分析

 8.app.moudles.ts文件功能概述

9.app.component.ts功能概述

 二、创建组件以及使用

1.创建组件指令

这句话的意思是创建一个header组件在components文件夹下，注意，components文件夹不用自己手动创建，输入以下命令，所有自动创建好。

ng g component components/header

2.组件使用

首先在生成好的header.components.ts找到selector后面跟的就是组件名

 

其次在app.component.html进行使用，注意命令安装组件的时候会在app.moudle.ts 自动帮你引入和注册！

效果如下：

 3.定义数据，绑定并使用数据

在header.component.ts文件定义

 在header.component.html使用

效果如下：

 4.ts定义使用以及定义属性的几种方法

header.component.ts：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

  public title = "我是头部区域"
  //ts语法指定类型
  fonts: string = "我是字符串"
  // 声明属性的几种方式
  // public 共有属性    可以在这个类里面使用，也可以在类外面使用（属性前不加，默认public）
  //protected 保护类型 只有在当前类和他的子类里面可以访问
  //private 私有类型  只有在当前类才可以访问这个属性
  protected userinfo = {
    username: "zs",
    age: "18"
  }
  // 定义不赋值
  public message: any
  //构造器
  constructor() {
    this.message = "给属性赋值"
    this.title = "我是改变头部区域的"
  }

  //方法
  ngOnInit() {
    // this.message = "给属性赋值"
  }
}

header.component.html：

<h2>789</h2>
<p>{{title}}</p>
<p>{{fonts}}</p>
<h6>{{userinfo.username}}</h6>
<h6>{{userinfo.age}}{{message}}</h6>

5.*ngFor 数据循环

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  msg = "提示消息"
  content = "<h1>我是标签元素</h1>"
  arr = [111, 222, 333]
  cars: Array<any> = [
    {
      cate: "奔驰",
      list: [
        { title: "奔驰1", price: "30w" },
        { title: "奔驰2", price: "30w" },
        { title: "奔驰3", price: "30w" }
      ]
    },

  ]
  constructor() {

  }
  ngOnInit() {

  }
}
<h2>789</h2>
<!-- []用来绑定属性，不加就是字符串 -->
<div [title]="msg" class="color">
  div盒子
</div>
<!-- 标签渲染 -->
<div [innerHTML]="content">
</div>
<!-- 注意此处只能使用let -->
<H2 *ngFor="let item of arr">{{item}}</H2>

<ul>

  <li *ngFor="let item1 of cars">{{item1.cate}}

    <h2>{{item1.cate}}</h2>
    <ol>
      <li *ngFor="let item2 of item1.list">{{item2.title}}</li>
    </ol>
  </li>
</ul>

6.img，*ngIf，ngSwitch，ngClass，ngStyle的使用

header.component.ts：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  //列如后台请求的图片地址如何渲染
  picUrl = "https://ts2.cn.mm.bing.net/th?id=OIP-C.xJt38dVPSj9s_WyNDvE08QHaJQ&w=223&h=279&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
  arr = [111, 222, 333]
  flag: boolean = false
  num: number = 3
 attr: string = "red"
  constructor() {

  }
  ngOnInit() {

  }
}

header.component.html：

<!-- 图片引入 ，注意angular图片引入不需要../，只需要文件名逐级选择即可-->
<img src="assets/imgs/favicon.ico" alt="">
<!-- []动态绑定 -->
<img [src]="picUrl" alt="" />
<!-- 获取下标方法 -->
<p *ngFor="let item of arr;let key=index" [ngClass]="{'color1':key==0,'color2':key==1,'color3':key==2}">
  {{key}}--{{item}}
</p>
<!-- *ngIf判断使用 -->
<p *ngIf="flag">显示与隐藏</p>
<!--ngSwitch使用  -->
<span [ngSwitch]="num">
  <p *ngSwitchCase="1">
    苹果
  </p>
  <p *ngSwitchCase="2">
    橘子
  </p>
  <p *ngSwitchDefault>
    桃子
  </p>
</span>

<div class="color1">
  ngClass演示1(尽量不要用dom来改变class)
</div>
<!-- ngClass的多种用法，可以绑定变量，布尔 -->
<div [ngClass]="{'color2':true,'color3':!flag}">
  ngClass演示2
</div>
<div [ngClass]="{'color2':true,'color3':!flag}">
  ngClass演示2
</div>
<!--ngStyle使用  -->
<h1 [ngStyle]="{'color': 'red','fontSize':'12px'}">style</h1>
<p [ngStyle]="{'color': attr}">style另外的用法</p>

header.component.scss：

.color1 {
  color: red
}

.color2 {
  color: blue
}

.color3 {
  color: orange
}

7.管道符使用

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  today: any = new Date()
  constructor() {
    console.log(this.today);

  }
  ngOnInit() {

  }
}

<p>{{today|date:"yyyy-MM-dd HH:mm:ss"}}</p>

 三、点击及键盘事件以及双向数据绑定的使用

首先app.moudle.ts引入数据双向绑定方法并声明


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

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
// 1.用于数据双向绑定，双向数据绑定只针对form表单
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [ 
    AppComponent, HeaderComponent
  ],
  imports: [ 
    BrowserModule,
    AppRoutingModule,
    //2.声明双向绑定
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent] 
})

export class AppModule { }
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  num = 1
  keywords: any = ''
  constructor() {
  }
  ngOnInit() {

  }
  change() {
    alert("触发了")
  }
  changeTitle() {
    this.num++
  }
  keydown(e: any) {
    console.log("键盘按下了", e);

  }
}

<button (click)="change()">按钮</button>
<button (click)="changeTitle()">点击+1</button>
<h1>{{num}}</h1>
<!-- 键盘按下事件 -->
<input type="text" (keydown)="keydown($event)">
<input type="text" [(ngModel)]="keywords">
<p>{{keywords}}</p>

四、angular中的service服务

1.angular中的服务

①组件中的方法无法彼此调用

②公共的方法存在服务（service）中，可被其他组件共享调用

③服务与服务之间可以相互调用

2.创建服务的指令

ng g service services/common（ng g service 文件名/服务名）

3.在app.moudle.ts文件引入并声明服务


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

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FormsModule } from '@angular/forms';
//1.引入服务
import { ComoonService } from './services/comoon.service';
import { FooterComponent } from './components/footer/footer.component';
@NgModule({
  declarations: [
    AppComponent, HeaderComponent, FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    //2.声明双向绑定
    FormsModule
  ],
  //2.声明服务
  providers: [ComoonService],
  bootstrap: [AppComponent]
})

export class AppModule { }

4.任何组件使用服务时，引入并使用

import { Component } from '@angular/core';
//1.引入服务
import { ComoonService } from '../../services/comoon.service';
//2.导入的是一个类,此方法可以使用，不推荐
var storage = new ComoonService()
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent {
  //推荐写法，这个语法可以理解为和上面不推荐方法的语法一样，只是推荐这样使用
  constructor(public word: ComoonService) {
    console.log(this.word.out());
  }
  // constructor() {
  //   console.log(storage.out());
  // }
}

5.commoon.service.ts文件定义的方法

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

@Injectable({
  providedIn: 'root'
})
export class ComoonService {

  constructor() {

  }
  out() {
    return "service"
  }
}

相关文章：

  • 嵌入式学习笔记——STM32硬件基础知识
  • 2023年“网络安全”赛项浙江省金华市选拔赛 任务书
  • Qt安装与使用经验分享；无.pro文件；无QTextCodec file；Qt小试；界面居中；无缝；更换Qt图标；更换Qt标题。
  • MyBatis常用的俩种分页方式
  • Python---正则表达式
  • 基于flask+bootstrap+echarts+mysql的鱼村小馆订餐后台管理系统
  • 逻辑优化-rewrite
  • ECharts可视化库--常用组件
  • 【FPGA】Verilog：时序电路应用 | 序列发生器 | 序列检测器
  • 【软件使用】MarkText下载安装与汉化设置 (markdown快捷键收藏)
  • 【前端必看】极大提高开发效率的网页 JS 调试技巧
  • VMware虚拟机安装Linux教程
  • 统计软件与数据分析—Lesson2
  • 【玩转c++】vector讲解和模拟底层实现
  • Scrapy框架（高效爬虫）
  • CNN 在图像分割中的简史：从 R-CNN 到 Mask R-CNN
  • Git 使用集
  • HTTP中GET与POST的区别 99%的错误认识
  • Java 23种设计模式 之单例模式 7种实现方式
  • JavaScript的使用你知道几种？(上)
  • JS+CSS实现数字滚动
  • Laravel深入学习6 - 应用体系结构：解耦事件处理器
  • leetcode388. Longest Absolute File Path
  • magento2项目上线注意事项
  • Promise初体验
  • uva 10370 Above Average
  • 互联网大裁员：Java程序员失工作，焉知不能进ali？
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？
  • 前端技术周刊 2018-12-10：前端自动化测试
  • 微信小程序：实现悬浮返回和分享按钮
  • 小程序 setData 学问多
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • 走向全栈之MongoDB的使用
  • 06-01 点餐小程序前台界面搭建
  • Linux权限管理(week1_day5)--技术流ken
  • 交换综合实验一
  • #Z0458. 树的中心2
  • #宝哥教你#查看jquery绑定的事件函数
  • (17)Hive ——MR任务的map与reduce个数由什么决定？
  • （C语言）字符分类函数
  • (ZT)薛涌：谈贫说富
  • （翻译）Quartz官方教程——第一课：Quartz入门
  • （附源码）node.js知识分享网站 毕业设计 202038
  • (简单) HDU 2612 Find a way，BFS。
  • (三)模仿学习-Action数据的模仿
  • (十六)一篇文章学会Java的常用API
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • .form文件_一篇文章学会文件上传
  • .NET Core WebAPI中使用swagger版本控制，添加注释
  • .NET Reactor简单使用教程
  • .NET 程序如何获取图片的宽高（框架自带多种方法的不同性能）
  • .NET版Word处理控件Aspose.words功能演示：在ASP.NET MVC中创建MS Word编辑器
  • .sdf和.msp文件读取
  • @ModelAttribute注解使用