JavaScript
文章平均质量分 87
yanyi24
这个作者很懒,什么都没留下…
展开
-
Angular 权限管理的两种解决方案
Angular 权限管理的两种解决方案在做后台管理系统的时候,权限管理应该是必备的功能点了。这一节我们介绍两种方案来确定用户权限。首先,我们面板是这个样子,先让大家有一个基础印象:准备工作首先我们通过 cli工具新建了一个 heroes模块,所有工作我们都将在这个模块中完成;其次新建了 heroes-add、 heroes-list、 heroes-login、 heroes-modify四个页面模块,来分别实现不同的功能;最后通过子路由的方式配置了项目的路由信息,以便让项目跑起来。封原创 2021-05-28 15:30:15 · 3167 阅读 · 0 评论 -
angular 详解HTTP拦截器 看这一篇就够了
HTTP拦截器前面我们介绍了Angular 全家桶中 HTTP 部分的基础用法,能够满足开发中的基本需求。为了让我们的教程更贴近实战,拦截器是我们绕不过的话题。拦截器可以用一种常规的、标准的方式对每一次 HTTP的请求/响应任务执行从认证到记日志等很多种隐式任务。如果没有拦截机制,那么开发人员将不得不对每次 HttpClient调用显式实现这些任务。比如每次设置请求头中的 token。编写拦截器要实现拦截器,就要实现一个实现了 HttpInterceptor接口中的 intercept()方法原创 2021-04-08 14:19:17 · 3877 阅读 · 1 评论 -
angular http模块
http使用 HTTP与后端服务进行通信是开发中绕不过的问题。本节将介绍 Angular中内置的 HTTP模块,也就是 @angular/common/http中的 HttpClient服务类。准备工作按照惯例,我们还是建一个单独的模块进行介绍。ng g m http-studyng g c http-study -c OnPushng g s http-study/http-study并引入 HttpStudyService:// http-study.component.ts原创 2021-04-08 14:16:36 · 1365 阅读 · 0 评论 -
angular表单验证
表单验证通常,我们都需要对用户的表单输入做验证,以保证数据的整体质量。Angular也有两种验证表单的形式:使用属性验证,用于模板驱动表单;使用验证器函数进行验证,用于响应式表单。验证器(Validator)函数验证器函数可以是同步函数,也可以是异步函数。同步验证器:接受控件实例,然后返回验证错误信息或 null。在实例化一个 FormControl时把它作为构造函数的第二个参数传进去;异步验证器 :接受实例并返回一个 Promise或 Observable,稍后会发出一组验证错误或原创 2021-04-08 14:13:30 · 3444 阅读 · 7 评论 -
angular表单
表单angular 中提供了两种表单形式:响应式表单和模板驱动表单。理论准备选择适合你的表单形式:响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比,更加健壮:它们的可扩展性、可复用性和可测试性都更高。适用于比较复杂的表单。模板驱动表单依赖模板中的指令来创建和操作底层的对象模型。它们很容易添加到应用中,但在扩展性方面不如响应式表单。适用于简单的表单。无论哪种形式的表单,都会有下面4个常用基础类:FormControl实例用于追踪单个表单控件的值和验证状态;Fo原创 2021-04-08 14:09:12 · 736 阅读 · 0 评论 -
angular 异步路由
异步路由在日常的开发中,我们的程序可能有很多模块,如果我们还是按照在打开程序时就全部加载所有内容的常规方式,就会出现加载缓慢的问题。使用异步路由,就能解决这个问题。懒加载路由顾名思义,懒加载就是最初不加载,在需要的时候才加载组件。我们将改造前面的 admin组件为懒加载模式。实现方式也很简单,只需要简单的三步:将原来的 admin-routing中 admin配置的 path设为空(''):// admin-routing.module.ts{ path: '', compo原创 2021-04-08 14:05:20 · 935 阅读 · 1 评论 -
angular 路由守卫
路由守卫所谓守卫,不就是把守出入口以控制进出的作用吗?路由守卫也就是掌控用户导航到应用不同场景的手段。简介到本系列教程目前为止,任何用户都能在任何时候导航到任何地方。但有时候出于种种原因需要控制对该应用的不同部分的访问。可能包括如下场景:该用户可能无权导航到目标组件或者需要先登录(认证)才能访问;在显示目标组件前,你可能得先获取某些数据;在离开组件前,你可能要先保存修改或者根据用户意愿判定是否保持。你可以往路由配置中添加守卫,来处理这些场景。 守卫返回一个值,以控制路由器的行为:如原创 2021-04-08 14:02:20 · 3921 阅读 · 0 评论 -
angular 多级路由
多级路由多级路由,又称子路由,是前端框架中不可或缺的一部分。多级路由前面我们已经有了一个用户的列表,这次我们的需求是: 点击每个用户数据,展示详情信息在本页面。先创建一个 user组件,用来展示详情信息:ng g c components/router-study/user/user -s -t -c OnPush --flat使用 children配置子路由:// router-study-routing.module.tsimport {UserComponent} from原创 2021-04-08 13:58:53 · 1533 阅读 · 0 评论 -
angular路由参数路由跳转
路由参数及跳转本节介绍路由参数及跳转相关。准备工作首先,我们需要将上一节的 CommentService、 UserService抽离成单独的文件,以便多处使用。ng g s components/router-study/comment/commentng g s components/router-study/user/user复制上节代码到对应文件:// comment.service.ts@Injectable()export class CommentService {原创 2021-04-08 13:57:07 · 1118 阅读 · 0 评论 -
angular 路由初体验
angular 路由-1.0 初体验任何一个前端框架,页面路由是绕不过的话题。从现在开始,介绍 angular 路由。准备工作为了更形象的演示,我们先模拟一些数据。在 src/app下创建一个 data文件夹储存数据。// src/app/data/data.type.tsexport interface Comment{ postId: number; id: number; name: string; email: string; body: string;}ex原创 2021-04-08 13:52:00 · 368 阅读 · 0 评论 -
Number Animate--JS快速改变页面数字变化过程动画
通过定时器,快速修改页面上数字变化。原文阅读…// 判断是否是数字function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n);}/***判断一个数有几位小数*@param {number} number*/function getDecimalPoint(number) { if(!isNumeric(number)) {return;} var num = parseFloat(nu原创 2021-01-14 10:04:52 · 971 阅读 · 0 评论