分类：Angular

2021
07-09

如何用DevUI搭建自己的Angular组件库

目录前言创建组件库关键配置修改目录布局调整库构建关键配置开发一个Alert组件组件功能介绍组件结构分解定义输入输出定义布局测试Alert组件开发态引用组件编写单元测试发布组件前言作为前端开发者，随着公司业务的不断发展和增长，业务对组件功能、交互的诉求会越来越多，不同产品或者团队之间公用的组件也会越来越多，这时候就需要有一套用于支撑内部使用的组件库，也可以是基于已有组件扩展或者封装一些原生三方库。本文会手把手... 继续阅读 >

2021
07-04

详解Angular数据绑定及其实现方式

目录前言什么是数据绑定？Angular中的数据绑定类型单向数据绑定InterpolationBindingPropertybindingandInterpolationTwo-wayBinding前言Web开发需要模型和视图之间的数据同步。这些模型基本上包含数据值，而视图则处理用户看到的内容。因此，如果您想知道这在Angular中是如何发生的，这篇有关Angular数据绑定的文章将为您提供帮助。下面提到的是此处讨论的主题：WhatisDataBinding?TypesofDataBindingin... 继续阅读 >

2021
07-04

详解React Angular Vue三大前端技术

目录一、【React】基本用法显著特点类组件虚拟DOM生命周期方法JSXJavaScript表达式超越HTML的架构ReactHooksHooks规则常用术语Flux架构的使用历史常用命令二、【Angular】Angular和AngularJS的区别历史组件化数据管理常用命令三、【Vue】概述历史组件化模板反应式系统变换效果路由生态系统官方工具官方程序库常用命令四、【小结】一、【React】React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Fac... 继续阅读 >

2021
06-23

Angular性能优化之第三方组件和懒加载技术

概述应该有很多人都抱怨过Angular应用的性能问题。其实，在搭建Angular项目时，通过使用打包、懒加载、变化检测策略和缓存技术，再辅助第三方组件，便可有效提升项目性能。为了帮助开发者深入理解和使用Angular，本文将以在线表格编辑为例，演示如何借助懒加载技术，在基于Angular的框架中实现在线导入导出Excel以及数据在线填报的功能。环境准备1.全局安装AngularCLI：npminstall-g@angular/cli2.使用AngularCLI创建一个... 继续阅读 >

2021
03-30

Angular CLI发布路径的配置项浅析

前言项目发布总需要根据具体情况配置打包，AngularCLI提供了方便的打包工具“ngbuild”。其中关于发布路径的配置有几样，这里总结汇总它们。base-href它指定的是项目构建的目录结构，例如设置为"deploy-test"，最后的打包结果就在dist/deploy-test目录下。项目新建时，在index.html下默认是<basehref="/"rel="externalnofollow">，也就是指定这个应用相对根目录运行。这时候，页面的相对路径会基于这个配置，例如![... 继续阅读 >

2020
12-16

angular *Ngif else用法详解

Angular中常用的指令有用来遍历的*ngFor、控制元素显示隐藏的*ngIf，今天学习一下*ngIf这个常用的指令。NgIf指令ngIf指令用于根据表达式的值，在指定位置渲染then或else模板的内容。then模板除非绑定到不同的值，否则默认是ngIf指-令关联的内联模板。else模板除非绑定对应的值，否则默认是null。简单形式<div*ngIf="condition">...</div><!--Angular2.x中使用template--><ng-template[ngIf]="condition"><div... 继续阅读 >

2020
10-10

Angular+Ionic使用queryParams实现跳转页传值的方法

最近，在做电商项目，项目中需要实现:点击编辑按钮,跳转页面完成添加地址，修改地址功能。使用到angular传参,简单做一总结：1，发送界面ts//编辑地址EditorAddress(item){console.log("选中的地址");console.log(item);this.router.navigate(['/editor-address'],{queryParams:item})}2，接收界面tspublicpersonName:string=""publicphone:string=""publicareaInfo:string=""publicdetailedAddress:string=""pu... 继续阅读 >

2020
10-08

Angular利用HTTP POST下载流文件的步骤记录

Angular/VueHTTPPOST下载流文件HTTPPOST请求流文件转成excel在使用Angular开发项目时，通常会有下载文件的功能项。一般是后台返回下载地址，通过<a>标题或者使用window打开下载地址新窗口，浏览器则会识别出流文件进行文件下载。但是，有时候进行http异步请求，后台返回的并不是下载地址，而是直接返回一个文件流，这时如何使用http请求回来的文件流转换成文件下载？其实并非Angular框架存地这样的情况，其他PWA如Vue,Re... 继续阅读 >

2020
10-08

通过angular CDK实现页面元素拖放的步骤详解

通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能，如元素在页面中随意拖动、在特定区域内拖动亦或对列表进行拖放排序等等。CDK.TheComponentDevKit(CDK)isasetoftoolsthatimplementcommoninteractionpatternswhilstbeingunopinionatedabouttheirpresentation.ItrepresentsanabstractionofthecorefunctionalitiesfoundintheAngularMateriallibrary,withoutanysty... 继续阅读 >

2020
10-08

angular中的post请求处理示例详解

前言项目angular中使用jQuery请求，想替换为angular自身请求，结果发现后台没法获取?⑹???裕?檠?柿戏治鲆幌拢?龈鲎芙帷?/p>步骤如下：首先，angular和jQuery中请求是不同的。如下：jQuery：请求contentType是：application/x-www-form-urlencoded;charset=UTF-8该类型数据被编码成以'&'分隔的键-值对,同时以'='分隔键和值.非字母或数字的字符会被百分比编码:这也就是为什么这种类型不支持二进制数据(应使用multipart/... 继续阅读 >

2020
10-01

Angular8 简单表单验证的实现示例

简单表单校验傻瓜式校验直接复制Antd中demo<formnz-form[nzLayout]="'inline'"[formGroup]="validateForm"(ngSubmit)="submitForm()"><nz-form-item><nz-form-controlnzErrorTip="Pleaseinputyourusername!"><nz-input-groupnzPrefixIcon="user"><inputformControlName="userName"nz-inputplaceholder="Username"/></nz-input-group></nz-form-control></nz-form-item><nz-form-item><nz-form-con... 继续阅读 >

2020
09-29

在Angular中实现一个级联效果的下拉框的示例代码

实现一个具有级联效果的下拉搜索框，实现的结果如下图所示我们主要通过这个组件，来学习一些细微的逻辑，比如:如何计算input框内文字的长度；如何获取光标的位置；如何实现滚动条随着上下键盘的按动进行移动......具体需求如下级联搜索最多不超过三级，以”.“作为级联搜索的连接符搜索框跟着文本框中的”.“进行向后移动，向右移动的最大距离不能超过文本框的宽度当用户修改之前的级联内容，则不进行搜索，并隐藏搜索框；... 继续阅读 >

2020
09-29

关于AngularJS中几种Providers的区别总结

原文：https://xebia.com/blog/differ...什么是Provider?AngularJS文档对provider的定义:provider是一个带有$get()方法的对象。injector调用$get方法创建一个新的service的实例。provider还有一些其他的方法，可以用来配置provider。AngularJS使用$provide注册新的providers。providers基本上都会创建一个新实例,但每个provider只创建一次。$provide提供了6种方法创建自定义provider,我会用简单的代码示例分别解释他们。6种... 继续阅读 >

2020
09-29

用Angular实现一个扫雷的游戏示例

最近想找些项目练练手，发现去复刻一些小游戏还挺有意思的，于是就做了一个网页版的扫雷。点击这里看看最终的效果。创建应用该项目使用的是monorepo的形式来存放代码。在Angular中，构建monorepo方法如下：ngnewsimple-game--createApplication=falsenggenerateapplicationmine-sweeper在这里，因为该项目以后还会包含其他各种其他的应用，所以个人觉得使用monorepo构建项目是比较正确的选择。如果不想使用monore... 继续阅读 >

2020
09-25

小谈angular ng deploy的实现

AngularCLI在8.3.0发布过一个新命令ngdeploy，可以将Angular应用部署到远程服务器或云存储上面，例如：Firebasehosting、Azure、GitHubpages等等，这也是算是AngularCLI最后一个将Angular应用从开发到部署打通全能选手工具了。快速入门这里我以ng-deploy-oss为示例，演示如何将Angular应用部署到七牛云。1、创建一个新项目ngnewhello-world--defaults2、添加ng-deploy-ossngaddng-deploy-oss命令行会让你... 继续阅读 >