![](https://img-blog.csdnimg.cn/72b66605970841acab3d647473fe234a.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Angular TypeScript -- 大地
文章平均质量分 53
Angular TypeScript -- 大地
CodeJiao
须知少年凌云志 曾许天下第一流
展开
-
TypeScript--类,泛型,接口综合案例:统一封装操作MySql底层类库
统一封装操作MySql底层类库/*功能:定义一个操作数据库的库 支持 Mysql Mssql MongoDb要求1:Mysql MsSql MongoDb功能一样 都有 add update delete get方法 注意:约束统一的规范、以及代码重用解决方案:需要约束规范所以要定义接口 ,需要代码重用所以用到泛型 1、接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范 2、泛型 通俗理解:泛型就是解决 类 接口 方法的复用性、*/泛原创 2021-03-13 23:20:39 · 257 阅读 · 1 评论 -
TypeScript--泛型(泛型类,泛型接口)
泛型泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 样用户就可以以自己的数据类型来使用组件。通俗理解:泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持(类型校验)引例同时返回 string类型 和number类型//同时返回 st原创 2021-03-13 22:29:57 · 524 阅读 · 0 评论 -
TypeScript--接口的继承,接口和类搭配使用
接口的继承interface Animal { eat(): void;}interface Person extends Animal { work(): void;}class Web implements Person { public name: string; constructor(name: string) { this.name = name; } eat() { console.log(this.name + "喜欢吃馒头"); }原创 2021-03-12 16:51:09 · 390 阅读 · 0 评论 -
TypeScript--泛型类
我们想用类来操作数据库,往里面添加数据。这里先不使用泛型类,把类作为参数/*定义一个User的类这个类的作用就是映射数据库字段 然后定义一个 MysqlDb的类这个类用于操作数据库 然后把User类作为参数传入到MysqlDb中*/class User { username: string | undefined; pasword: string | undefined;}class MysqlDb { add(user: User): boolean { co原创 2021-03-13 22:55:29 · 768 阅读 · 0 评论 -
TypeScript--数据类型,模板字符串
数据类型:2、typeScript中的数据类型typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型布尔类型(boolean)数字类型(number)字符串类型(string)数组类型(array)元组类型(tuple)枚举类型(enum)任意类型(any)null 和 undefinedvoid类型never类型/* typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验 写原创 2021-03-10 21:29:00 · 718 阅读 · 0 评论 -
Typescript 介绍 、Typescript 安装、 Typescript 开发工具
Typescript 介绍TypeScript 是由微软开发的一款开源的编程语言。TypeScript 是 Javascript 的超集,遵循最新的 ES6、Es5 规范。TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 java、C#这样的面向对象语言,可以让 js 开发大型企业项目。谷歌也在大力支持 Typescript 的推广,谷歌的 angular2.x+就是基于 Typescript 语法。最新的 Vue 、React 也可以集成 TypeSc原创 2021-03-10 20:04:34 · 439 阅读 · 0 评论 -
TypeScript--装饰器定义,属性装饰器,装饰器工厂
装饰器概念:装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为。通俗的讲装饰器就是一个方法,可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。常见的装饰器有:类装饰器、属性装饰器、方法装饰器、参数装饰器装饰器的写法:普通装饰器(无法传参) 、 装饰器工厂(可传参)装饰器是过去几年中js最大的成就之一,已是Es7的标准特性之一1.类装饰器:类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数,可以用来监视原创 2021-03-14 11:32:49 · 279 阅读 · 1 评论 -
TypeScript--模块,以及模块化封装DB库
模块的概念模块的的概念(官方): 关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块” 模块在其自身的作用域里执行,而不是在全局作用域里; 这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用 import形式原创 2021-03-14 10:10:35 · 460 阅读 · 0 评论 -
TypeScript--函数式接口,可索引接口,类类型接口
函数式接口函数类型接口:对方法传入的参数 以及返回值进行约束 批量约束// 加密的函数类型接口interface encrypt { (key: string, value: string): string;}var md5: encrypt = function (key: string, value: string): string { //模拟操作 return key + value;};console.log(md5("name", "zhangsan"));原创 2021-03-12 16:39:19 · 222 阅读 · 0 评论 -
TypeScript--方法装饰器,装饰器的执行顺序
方法装饰器 它会被应用到方法的 属性描述符上,可以用来监视,修改或者替换方法定义。 方法装饰会在运行时传入下列3个参数: 1、对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。 2、成员的名字。 3、成员的属性描述符。方法装饰器示例02:添加方法//方法装饰器一function get(params: any) { return function (target: any, methodName: any, desc:原创 2021-03-14 14:09:27 · 445 阅读 · 1 评论 -
TypeScript--静态属性,静态方法,抽象类,多态
静态属性,静态方法class Per { public name: string; public age: number = 20; //静态属性 static sex = "男"; constructor(name: string) { this.name = name; } run():void { /*实例方法*/ alert(`${this.name}在运动`); } static print():void { /*静态方法 里面原创 2021-03-12 10:13:08 · 188 阅读 · 0 评论 -
TypeScript--命名空间,命名空间块化
命名空间里面的属性和方法默认是私有的,如果想要在外部使用,则需要导出来。命名空间:在代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内同Java的包、.Net的命名空间一样,TypeScript的命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。命名空间和模块的区别:命名空间:内部模块,主要用于组织代码,避免命名冲突。模 块:ts的外部模块的简称,侧重代码的复用,一个模块里可能会有原创 2021-03-14 10:41:06 · 142 阅读 · 0 评论 -
TypeScript--类,属性的权限修饰符
TS中类的定义// ts中类的定义class Person { name: string; //属性 前面省略了public关键词 constructor(name: string) { //构造函数 实例化类的时候触发的方法 this.name = name; } getName(): string { return this.name; } setName(name: string): void { this.name = name;原创 2021-03-12 09:43:28 · 518 阅读 · 0 评论 -
TypeScript--函数
函数的定义es5// 函数的定义// es5定义函数的方法function run() { return "run";}// 匿名函数var run2 = function () { return "run2";};ts// ts定义函数的方法function getInfo(name: string, age: number): string { return `${name} : ${age}`;}// 匿名函数var run3 = function (原创 2021-03-11 11:11:51 · 177 阅读 · 0 评论 -
TypeScript--ts中自定义方法传入参数,对json进行约束,接口,可选参数,ts接口完整ajax封装
ts中自定义方法传入参数,对json进行约束示例:function printLabel(labelInfo: { label: string }): void { console.log("printLabel");}printLabel({ label: "张三" }); //正确的写法接口接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数原创 2021-03-12 13:46:58 · 5766 阅读 · 0 评论 -
angular--异步编程
1. 异步编程目前常见的异步编程的几种方法:1、回调函数2、Promise3、Rxjs1.1 准备工作创建一个asynDemo的项目ng new asynDemo;创建一个obtain的服务,并且再app.moudle文件中引入和声明ng g service services/obtain创建一个home组件,并且再app.moudle文件中引入和声明ng g component components/home现在的项目结构:home组件引入和声原创 2021-07-20 13:37:40 · 1519 阅读 · 0 评论 -
Angular--通过路由传值(通过动态路由传参)
1. Angular–通过路由传值1.1 传值的方法包含数据this.listOfSelected 的 component.js backToHome() { // taskListHome是要跳转的地址 this.router.navigate(['/taskListHome'], { // queryParams是传过去携带的参数:传过去的是一个对象 queryParams: { // listOfSelected是一个数组,我们把他转换为Json字符串传递过原创 2021-05-11 15:07:00 · 1151 阅读 · 5 评论 -
Angular--路由概述 配置路由 路由重定向 路由选中
1. Angular–路由概述 配置路由 路由重定向 路由选中1.1 准备工作1.1.1 Angular创建一个默认带路由的项目ng new angularDemo081.1.2 创建3个待会测试用的组件ng g component compnents/homeng g component compnents/newsng g component compnents/newsContent创建结果:1.2 找到app-routing.module.ts 配置路由1.2.原创 2021-04-14 13:01:31 · 870 阅读 · 2 评论 -
Angular--自定义模块
1. Angular–自定义模块当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组 件都挂载到根模块里面不是特别合适(影响效率)。所以这个时候我们就可以自定义模块来组织我们的项目。1.1 创建模块ng g module modules/userng g component modules/user1.2 在模块中创建组件或者服务ng g component modules/user/components/addressng g service mo原创 2021-04-15 19:36:08 · 1068 阅读 · 3 评论 -
Angular--UI框架Antd组件库介绍&安装&使用
1. Angular–UI框架Antd组件库介绍&安装&使用1.1 介绍:ng-zorro-antd是 Ant Design 的 Angular 实现,主要用于研发企业级后台产品,Ant Design是蚂蚁金服 Ant Design团队开发的一款优秀的前端框UI库架支持React、Angular、Vue。Ant Design 官网1.2 Angular U框架Ng-Zorro安装使用1.2.1创建项目安装 ng-zorro-antd提示:安装前建议安装最新版本的 yarn原创 2021-04-15 16:02:40 · 7219 阅读 · 6 评论 -
Angular--路由的嵌套(父子路由)
1. Angular–路由的嵌套(父子路由)1.1 准备工作1.1.1 创建项目ng new angularDemo1.1.2 创建组件1.2 Angular–路由的嵌套(父子路由)1.2.1 引入路由&配置路由import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './原创 2021-04-15 12:38:48 · 1292 阅读 · 2 评论 -
Angular--路由的js跳转&路由get传值js跳转
1. Angular–动态路由的js跳转&路由get 传值js跳转1.1 Angular–路由的js跳转1.1.1 动态路由的js跳转1.1.1.1 引入声明模块&编写方法 import { Router} from '@angular/router'; constructor(public router:Router) { } goNewsContent() { //动态路由 跳转 需要携带后面的参数 如果参数是动态的则不加引号 this原创 2021-04-15 10:54:34 · 725 阅读 · 0 评论 -
Angular--get传值&动态路由(routerLink进行传参跳转)
1. get传值1.1 get传值在一个组件的html文件传递数据 <li *ngFor="let item of list;let key=index;"> <a [routerLink]="['/newscontent']" [queryParams]="{aid:key}">{{key}}--{{item}}</a> </li>1.2 接收在另外一个组件的ts文件接收数据 import { ActivatedRo原创 2021-04-14 21:46:52 · 798 阅读 · 1 评论 -
Angular--使用Angular get 请求数据
1. Angular–使用Angular get 请求数据1.1 准备工作1.1.1 新建一个angular项目用ng new angularDemo041.1.2 在项目里面新建一个news组件ng g component components/news1.2 在app.module.ts 中引入HttpclientModule并注入app.module.tsimport { NgModule } from '@angular/core';import { BrowserMod原创 2021-04-14 10:53:15 · 2141 阅读 · 0 评论 -
Angular--Rxjs异步数据流编程
1. Angular–Rxjs异步数据流编程RxlS是一种针对异步数据流编程工具,或者叫响应式扩展编程;可不管如何解释RxJS其目标就是异步编程,Angular 引入RxJS为了就是让异步可控、更简单。1.1 准备工作1.1.1 创建一个angular项目ng new angularDemo031.1.2 创建一个home组件ng g component components/home1.1.3 创建一个requesr服务ng g service services/request原创 2021-04-14 09:51:15 · 781 阅读 · 0 评论 -
Angular 中的生命周期函数(生命周期钩子)
生命周期:官方文档:生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法。constructor() 构造函数中除了使用简单的值对局部变量进行初始化 之外,什么都不应该做。 (非生命周期函数)Angular 中的生命周期函数生命周期示例:1. 创建1个组件:lifecycleng g component components/lifecycle2. 定原创 2021-03-18 20:46:16 · 1594 阅读 · 1 评论 -
Angular 父组件通过@ViewChild 主动获取子组件的数据和方法
1. 创建2个组件:footer(子组件) & news(父组件)ng g component components/footerng g component components/news2. 调用子组件给子组件定义一个名称news.component.html<!-- 调用子组件给子组件定义一个名称 --><app-footer #footer></app-footer><br><hr><br>&l原创 2021-03-18 19:32:24 · 1146 阅读 · 0 评论 -
Angular 父组件给子组件传值(数据和方法)-@input
父子组件的概念是相对的:准备工作:首先我们先新建一个项目:打开命令行,跳转到要建立项目的目录输入:ng new anguderDemo04接下来在项目里面创建4个组件:控制台输入:ng g component components/footerng g component components/headerng g component components/homeng g component components/news一、父组件给子组件传值-@input父组件不仅原创 2021-03-18 15:40:20 · 1603 阅读 · 3 评论 -
Angular--操作CSS3,定义侧边栏动画
1. 新建一个组件打开命令行,进入Angualr项目输入:ng g component components/transition2. 定义组件结构transition.component.html<div class="content"> <div> <button (click)="showAside()">弹出侧边栏</button> </div> <div>原创 2021-03-18 13:42:24 · 369 阅读 · 0 评论 -
Angular中的Dom操作(原生 js、ViewChild、父子组件中通过 ViewChild 调用子组件的方法)
一、Angular 中的 dom 操作(原生 js)1.首先新建一个Angular项目:在想要建立项目的目录打开命令行输入:ng new angularDemo2. 然后创建一个home组件ng g component components/home3. 写出网页home.component.html<h2>这是一个home组件--DOM操作演示</h2><div id="box"> this is box</div><原创 2021-03-18 12:52:17 · 687 阅读 · 1 评论 -
Angular--服务(服务的概念、怎么创建和使用服务)==>可以实现非父子组件之间的通信
服务概述服务可以让不同的组件调用同一个方法。官方认为组件不应该直接获取或保存数据, 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。而服务就充当着数据访问,逻辑处理的功能。把组件和服务区分开,以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开,可以让组件类更加精简、高效,这是官方的一些定义。1. 创建服务命令行在当前项目目录输入:ng g service my-new-service 创建到指定目录下面ng g service services/s原创 2021-03-17 15:20:08 · 457 阅读 · 0 评论 -
Angular--实现ToDoList(事件清单)& 服务实现数据的持久化
ToDoListAngular实现ToDoList(事件清单)1. 导入双向数据绑定的模块app.module.tsimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms'; // 导入模块import { AppComponent } from './app.c原创 2021-03-17 13:56:34 · 394 阅读 · 1 评论 -
Angular--实现类似京东App搜索缓存功能实现&服务实现数据的持久化
京东AppAngular实现类似京东App搜索缓存功能实现1. 导入双向数据绑定的模块app.module.tsimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms'; // 导入模块import { AppComponent } from './app.co原创 2021-03-17 11:13:15 · 329 阅读 · 0 评论 -
Angular表单 Dom获取表单值 以及双向数据绑定
1. 首先新建一个项目进入到想要创建angular项目的文件夹,打开cmd输入:ng new 项目名2. 给项目新增一个组件cmd进入该项目,输入:ng g component components/form这段代码的意思是在当前项目的app目录下面创建一个components文件夹,并且新建一个form组件3. 导入双向绑定数据的模块app.module.tsimport { NgModule } from '@angular/core';import { BrowserMo原创 2021-03-16 09:38:57 · 1310 阅读 · 0 评论 -
Angular 管道、事件(包含表单事件)、事件对象、双向数据绑定(只针对于表单)
管道管道示例 public today = new Date();<h1>管道</h1>{{today | date:'yyyy-MM-dd HH:mm:ss'}}执行事件 (click)=”getData()”示例01: public run(): void { alert('这是一个自定义方法!!!'); }<button (click)="run()">执行事件</button>示例02: publi原创 2021-03-15 20:54:30 · 765 阅读 · 0 评论 -
Angular 图片、条件判断(*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle])
图片本地图片:我们在assets目录下面新建images文件夹并且往里面放入图片。<h1>引入图片</h1><img src="assets/images/虎牙.png" alt="虎牙">网络图片(绑定图片) public picUrl: string = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';<h1>引入图片</h1原创 2021-03-15 16:49:44 · 3551 阅读 · 0 评论 -
Angular 组件、数据绑定和数据循环
1.创建 angualr 组件ng g component components/header使用组件:<app-header></app-header>原创 2021-03-15 15:19:50 · 892 阅读 · 0 评论 -
Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件详解、 绑定数据
Angular 目录结构分析详细请看 angular目录结构app.module.ts定义 AppModule,这个根模块会告诉 Angular 如何组装该应用。/*这个文件是Angular 根模块,告诉Angular如何组装应用*///BrowserModule,浏览器解析的模块import { BrowserModule } from '@angular/platform-browser'; //Angular核心模块import { NgModule } from '@ang原创 2021-03-10 14:16:25 · 1144 阅读 · 0 评论 -
Angular 介绍、安装 Angular Cli、创建 运行 Angular 项目
怎么卸载和按照angular创建项目命令行切换到指定的目录输入 ng new 项目名如果失败,就进入该项目的命令行输入cnpm install安装依赖安装完成后,命令行输入ng serve --open运行项目出现以下界面,创建项目成功...原创 2021-03-10 12:45:34 · 1473 阅读 · 0 评论