雷雨天的雷胖子

目录一、概述二、get请求三、post请求四、Jsonp请求五、第三方模块axios请求数据一、概述Angular5.x以后get、post和服务器交互使用的是HttpClientModule模块。二、get请求第一步：在app.module.ts中引入HttpClientModule，并注入import { HttpClientModule } from '@angular/common/http';...imports: [HttpClientMod

一、概述

目录一、概述二、详解三、实例一、概述生命周期函数也叫生命周期钩子，是组件在创建、更新、销毁时会触发的一系列方法。注意，Angular指令中也有生命周期函数，暂时忽略。二、详解Angular组件中主要有八个生命周期函数，如下所示。constructor使用简单的值对局部变量进行初始化。ngOnChanges()主要用在父子组件传值。父组件给子组件传...

一、概述父子组件是一种相对关系，比如在根组件中引入首页组件，则它们就形成一种父子关系，根组件为父，首页组件为子。二、子组件获取父组件传参Angular中提供了@Input来实现子组件获取父组件传递的数据。父组件不仅可以给子组件传递简单的数据，还可以把自己的方法以及整个父组件传给子组件。传递简单数据第一步：父组件调用子组件时传入数据export class AppCom...

目录一、概述二、原生JS操作Dom三、ViewChild操作Dom四、父组件中通过ViewChild调用子组件一、概述Angular中可以用原生JS操作Dom，也可以用Angular提供的ViewChild装饰器来操作Dom。ViewChild底层对原生JS进行了封装。二、原生JS操作Dom基本示例<div id="box">this is a...

目录一、概述二、详解一、概述Angular是基于模块化、组件化的开发方式，组件之间相互隔离，默认情况下组件之间没法相互调用彼此的方法。基于此，可以将各组件都需要的功能放到服务里面，哪个组件需要使用服务中的方法，只须引入服务即可。服务实现了组件间方法的共享。二、详解创建服务// 在services目录下创建服务> ng g service services/...

目录一、概述二、详解一、概述双向数据绑定即MVVM，表示数据改变会影响视图，视图改变会影响数据。Angular中TS中的属性就是Model，html代码就是View。MVVM只是针对表单，即表单里面才有双向数据绑定。二、详解在app.module.ts中引入并配置FormsModule模块import { FormsModule } from '@angular/...

目录一、概述二、引用事件三、表单事件一、概述Angular模板中使用小括号引用事件。$event为事件对象。二、引用事件以click事件为例。onClick(e) { var dom: any = e.target; // 当前dom对象}<button (click)="onClick($event)"></button>...

目录一、概述二、常用内置管道三、自定义管道一、概述管道就是我们可以在html模板中调用的一些方法。管道分为两类，其一Angular内置管道，其二自定义管道。内置管道中最常用的是日期格式化方法。html模板中通过符号 | 调用管道。二、常用内置管道日期格式化public today: any = new Date();<p>{{today |...

目录一、概述二、属性ngClass三、属性ngStyle一、概述Angular中不建议使用dom操作改变class。ngClass属性用来给标签动态绑定class。ngStyle属性用来给标签动态绑定CSS样式。二、属性ngClass实例1<style> .className{ color: red; }</...

目录一、概述二、ngIf指令三、ngSwitch指令一、概述Angular中使用*ngIf和*ngSwitch这两个指令来进行条件判断。二、ngIf指令export class NewsComponent implements OnInit { public flag: boolean = true; constructor() { ...

目录一、概述二、详解一、概述静态资源存放在assets文件夹。二、详解普通引入方式直接在html模板中通过相对路径引用。<h2>引入图片</h2><img src="assets/images/nine.png" alt="">通过TS中定义的图片地址加载资源export class NewsComp...

目录一、概述二、循环实例一、概述Angular模板中使用*ngFor指令来循环数据。二、循环实例实例1public list: any[] = [1, 2, 3];public list: Array<any> = [1, 2, 3];public list: Array<number> = [1, 2, 3];publi...

目录一、标签动态绑定属性三、绑定html一、标签动态绑定属性标签的某属性值从TS中定义，然后动态绑定到标签属性。第一步：在TS文件中定义数据public title = '我是一个新闻组件'; 第二步：在html模板中绑定属性值使用中括号动态绑定数据，代码如下所示。<div [title]="title"></div>三、...

目录一、概述二、定义TS属性三、绑定TS属性一、概述TS中的属性也叫数据，定义属性不是定义变量，不能用var关键字。二、定义TS属性属性修饰符属性修饰符表示声明属性的几种方式。public 共有属性, 默认, 可以在这个类里使用, 也可以在类外面使用protected 保护类型, 它只有在当前类和它的子类里面可以访问private 私...

目录一、概述二、创建组件三、调用组件一、概述Angular是模块化、组件化的开发模式，所有的页面都由组件构成。组件可以扩展html在构建应用时候的不足，创建一个组件就是创建一组新的标签，即组件可以扩展html标签。二、创建组件创建组件的命令如下所示。> ng g component components/news在app.modules.ts中引入...

目录一、概述二、初始结构三、结构详解一、概述组件中TS文件用于编写页面的逻辑代码。二、初始结构import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls:...

目录一、概述二、初始结构三、结构详解一、概述app.module.ts是Angular的根模块，告诉Angular如何组装应用。根模块用来引导并运行应用。可以为根模块的输出类取任何名称，默认名称为AppModule。二、初始结构import { BrowserModule } from '@angular/platform-browser';import { NgM...

目录一、概述二、主目录三、src下目录分析一、概述新创建的Angular项目目录如下所示。二、主目录e2e端对端测试文件，正常情况下不用理会。node_modules存放项目中各类npm依赖包。执行npm install命令时，会将package.json中记录的依赖安装在此文件夹。src开发工作目录，项目源代码和资源都放在此文件夹。...

目录一、概述二、环境搭建三、创建项目四、运行项目五、开发工具一、概述Angular是一款来自谷歌的开源web前端框架，诞生于2009年，由Misko Hevery等人创建，后被谷歌收购。Angular是一款优秀的前端JS框架，用于谷歌多款产品。Angular基于TypeScript创建，与Vue和React相比，Angular更适合中大型企业级项目。学习Angu...

目录一、概述二、详解一、概述Observable翻译为可观察对象，是RxJS中的一个对象，可以用来处理异步事件，例如http请求。实际上，在Angular中，所有的http请求返回的都是Observable。Observable和promise本质上是相同的，都是生产者主动向消费者push产品，而消费者被动接收。但两者也有很大区别，Observable可以发送任意多值，并且在被订阅...