![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Angular
空城里的往日时光
这个作者很懒,什么都没留下…
展开
-
Angular—数据交互详解
目录一、概述二、get请求三、post请求四、Jsonp请求五、第三方模块axios请求数据一、概述Angular5.x以后get、post和服务器交互使用的是HttpClientModule模块。二、get请求第一步:在app.module.ts中引入HttpClientModule,并注入import { HttpClientModule } from '@angular/common/http';...imports: [HttpClientMod原创 2020-06-14 10:46:39 · 694 阅读 · 0 评论 -
Angular—RxJS异步数据流编程
一、概述原创 2020-04-12 13:44:00 · 333 阅读 · 0 评论 -
Angular—生命周期函数
目录一、概述二、详解三、实例一、概述生命周期函数也叫生命周期钩子,是组件在创建、更新、销毁时会触发的一系列方法。注意,Angular指令中也有生命周期函数,暂时忽略。二、详解Angular组件中主要有八个生命周期函数,如下所示。constructor使用简单的值对局部变量进行初始化。ngOnChanges()主要用在父子组件传值。父组件给子组件传...原创 2020-03-28 08:42:39 · 2385 阅读 · 0 评论 -
Angular—父子组件通信
一、概述父子组件是一种相对关系,比如在根组件中引入首页组件,则它们就形成一种父子关系,根组件为父,首页组件为子。二、子组件获取父组件传参Angular中提供了@Input来实现子组件获取父组件传递的数据。父组件不仅可以给子组件传递简单的数据,还可以把自己的方法以及整个父组件传给子组件。传递简单数据第一步:父组件调用子组件时传入数据export class AppCom...原创 2020-03-22 14:16:29 · 436 阅读 · 1 评论 -
Angular—Dom操作
目录一、概述二、原生JS操作Dom三、ViewChild操作Dom四、父组件中通过ViewChild调用子组件一、概述Angular中可以用原生JS操作Dom,也可以用Angular提供的ViewChild装饰器来操作Dom。ViewChild底层对原生JS进行了封装。二、原生JS操作Dom基本示例<div id="box">this is a...原创 2020-03-14 18:53:35 · 1418 阅读 · 0 评论 -
Angular—自定义服务
目录一、概述二、详解一、概述Angular是基于模块化、组件化的开发方式,组件之间相互隔离,默认情况下组件之间没法相互调用彼此的方法。基于此,可以将各组件都需要的功能放到服务里面,哪个组件需要使用服务中的方法,只须引入服务即可。服务实现了组件间方法的共享。二、详解创建服务// 在services目录下创建服务> ng g service services/...原创 2020-03-11 11:44:58 · 158 阅读 · 0 评论 -
Angular—双向数据绑定
目录一、概述二、详解一、概述双向数据绑定即MVVM,表示数据改变会影响视图,视图改变会影响数据。Angular中TS中的属性就是Model,html代码就是View。MVVM只是针对表单,即表单里面才有双向数据绑定。二、详解在app.module.ts中引入并配置FormsModule模块import { FormsModule } from '@angular/...原创 2020-02-11 18:15:39 · 335 阅读 · 0 评论 -
Angular—Angular模板中定义事件
目录一、概述二、引用事件三、表单事件一、概述Angular模板中使用小括号引用事件。$event为事件对象。二、引用事件以click事件为例。onClick(e) { var dom: any = e.target; // 当前dom对象}<button (click)="onClick($event)"></button>...原创 2020-02-11 17:18:35 · 874 阅读 · 0 评论 -
Angular—管道pipe
目录一、概述二、常用内置管道三、自定义管道一、概述管道就是我们可以在html模板中调用的一些方法。管道分为两类,其一Angular内置管道,其二自定义管道。内置管道中最常用的是日期格式化方法。html模板中通过符号 | 调用管道。二、常用内置管道日期格式化public today: any = new Date();<p>{{today |...原创 2020-02-11 16:54:10 · 410 阅读 · 0 评论 -
Angular—属性ngClass、属性ngStyle
目录一、概述二、属性ngClass三、属性ngStyle一、概述Angular中不建议使用dom操作改变class。ngClass属性用来给标签动态绑定class。ngStyle属性用来给标签动态绑定CSS样式。二、属性ngClass实例1<style> .className{ color: red; }</...原创 2020-02-11 15:56:45 · 1098 阅读 · 0 评论 -
Angular—条件判断
目录一、概述二、ngIf指令三、ngSwitch指令一、概述Angular中使用*ngIf和*ngSwitch这两个指令来进行条件判断。二、ngIf指令export class NewsComponent implements OnInit { public flag: boolean = true; constructor() { ...原创 2020-02-11 15:14:13 · 2220 阅读 · 0 评论 -
Angular—引用图片等静态资源
目录一、概述二、详解一、概述静态资源存放在assets文件夹。二、详解普通引入方式直接在html模板中通过相对路径引用。<h2>引入图片</h2><img src="assets/images/nine.png" alt="">通过TS中定义的图片地址加载资源export class NewsComp...原创 2020-02-11 14:59:49 · 2959 阅读 · 0 评论 -
Angular—数据循环
目录一、概述二、循环实例一、概述Angular模板中使用*ngFor指令来循环数据。二、循环实例实例1public list: any[] = [1, 2, 3];public list: Array<any> = [1, 2, 3];public list: Array<number> = [1, 2, 3];publi...原创 2020-02-11 15:03:33 · 1695 阅读 · 0 评论 -
Angular—标签动态绑定属性、绑定html
目录一、标签动态绑定属性三、绑定html一、标签动态绑定属性标签的某属性值从TS中定义,然后动态绑定到标签属性。第一步:在TS文件中定义数据public title = '我是一个新闻组件'; 第二步:在html模板中绑定属性值使用中括号动态绑定数据,代码如下所示。<div [title]="title"></div>三、...原创 2020-02-11 12:29:42 · 3152 阅读 · 1 评论 -
Angular—定义TS属性、绑定TS属性
目录一、概述二、定义TS属性三、绑定TS属性一、概述TS中的属性也叫数据,定义属性不是定义变量,不能用var关键字。二、定义TS属性属性修饰符属性修饰符表示声明属性的几种方式。public 共有属性, 默认, 可以在这个类里使用, 也可以在类外面使用protected 保护类型, 它只有在当前类和它的子类里面可以访问private 私...原创 2020-02-11 12:15:04 · 1995 阅读 · 0 评论 -
Angular—创建组件、调用组件
目录一、概述二、创建组件三、调用组件一、概述Angular是模块化、组件化的开发模式,所有的页面都由组件构成。组件可以扩展html在构建应用时候的不足,创建一个组件就是创建一组新的标签,即组件可以扩展html标签。二、创建组件创建组件的命令如下所示。> ng g component components/news在app.modules.ts中引入...原创 2020-02-09 19:09:38 · 470 阅读 · 0 评论 -
Angular—根组件app.component详解
目录一、概述二、初始结构三、结构详解一、概述组件中TS文件用于编写页面的逻辑代码。二、初始结构import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls:...原创 2020-02-09 16:29:02 · 1541 阅读 · 0 评论 -
Angular—根模块app.module详解
目录一、概述二、初始结构三、结构详解一、概述app.module.ts是Angular的根模块,告诉Angular如何组装应用。根模块用来引导并运行应用。可以为根模块的输出类取任何名称,默认名称为AppModule。二、初始结构import { BrowserModule } from '@angular/platform-browser';import { NgM...原创 2020-02-09 16:13:26 · 714 阅读 · 0 评论 -
Angular—工程目录结构
目录一、概述二、主目录三、src下目录分析一、概述新创建的Angular项目目录如下所示。二、主目录e2e端对端测试文件,正常情况下不用理会。node_modules存放项目中各类npm依赖包。执行npm install命令时,会将package.json中记录的依赖安装在此文件夹。src开发工作目录,项目源代码和资源都放在此文件夹。...原创 2020-02-09 15:49:38 · 438 阅读 · 0 评论 -
Agnular—环境搭建、创建项目、运行项目
目录一、概述二、环境搭建三、创建项目四、运行项目五、开发工具一、概述Angular是一款来自谷歌的开源web前端框架,诞生于2009年,由Misko Hevery等人创建,后被谷歌收购。Angular是一款优秀的前端JS框架,用于谷歌多款产品。Angular基于TypeScript创建,与Vue和React相比,Angular更适合中大型企业级项目。学习Angu...原创 2020-02-09 13:35:52 · 313 阅读 · 0 评论 -
Angular—RxJS之Observable
目录一、概述二、详解一、概述Observable翻译为可观察对象,是RxJS中的一个对象,可以用来处理异步事件,例如http请求。实际上,在Angular中,所有的http请求返回的都是Observable。Observable和promise本质上是相同的,都是生产者主动向消费者push产品,而消费者被动接收。但两者也有很大区别,Observable可以发送任意多值,并且在被订阅...原创 2020-01-19 15:06:13 · 1552 阅读 · 0 评论