所谓的延迟加载通常是：直到用户交互时才加载。如何实现延迟加载呢？ 需要搞清楚三个方面： 1、html元素的哪个属性需要延迟加载？ 2、需要对数据源的哪个字段进行延迟加载？ 3、通过什么事件来触发延迟加载？ 自定义的Directive的页面表现大致是这样：{{cust.name}}Total Cusotmers: {{::customers.length}} 以上， ● delay-bind表示要从数据源中取出的某个字段值 ● attribute表是html元素属性，对该属性延迟赋值 ● trigger表示...
AngularJS 是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展 HTML 的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如 JQuery 等）合作融洽。100/var app=angular.module("myNoteApp",[]); app.controller("myNoteCtrl",function($scope){ $scope.message = ""; //显示变更数量 $scope.left = function() {return 100 - $scope.message.length;}; //清除...
循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。 用AngularJS就爽多了，语法和JSP类似：ng-repeat directive我的购物车序号商品单价数量金额操作{{$index + 1}}{{item.name}}{{item.price | currency}}{{item.quantity * item.price | curr...
本来在看vue.js没多久，最近在赶一个项目用回了angular2，还是先把ng2搞定吧，毕竟还不怎么懂。这两天我做的是用户表单数据的提交，大部分很简单，双向绑定就完事了，主要还是沟通的问题哈哈哈哈，虽然沟通的时候有点暴躁想甩锅，不过出了门还是高高兴兴吃饭高高兴兴回去。好了切入问题。这几天做得最久的是仿照微信UI做的图片上传/显示缩略图/预览/删除功能，要求图片1--9张。下面来记录下如何实现微信的图片预览/删除功能。 样式...
在项目中常常会使用 ngFor指令，之前只会使用它，具体如何实现的却不得而知。终于这几天有时间"研究"了下它是如何实现的，顺便自己写个简单的 ngFor指令：repeat 说到指令就不得不提一下TemplateRef和ViewContainerRef TemplateRef 可以理解为dom渲染模板，指令通过TemplateRef的模板来创建dom元素 ViewContainerRef 可以理解为TemplateRef的容器，在调用ViewContainerRef上的createEmbeddedView时，传入TemplateRef和context就能创...
本文实例讲述了AngularJS实现的鼠标拖动画矩形框。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical}body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin: 0;padding: 0;overf...
本文实例讲述了Angular2实现的秒表及改良版。分享给大家供大家参考，具体如下： 初版 代码： export class Watches {id: number;str: string; } export let watcheList: Watches[] = [{id: 0, str: 123456 }, {id: 1, str: 564822 }] //watchList 是一个静态类 watchList = watcheList; watchStr: string; //判断是否是第一次点击startWatch num: number = 0; //分 秒 毫秒 minute: number = 0; second: number = 0; millisecond: ...
我经常思考，在面临一个不确定问题时，以往的经验究竟有无辅助作用？如果把经验遗忘会产生何种程度的影响？在上下求索未果之后，如何找回曾经的感觉，恰若灵光一现？凡此种种，终是要思考总结的，这篇文章便是我的反思之作。 本篇文章会记述一些实用的svg与png之间的转换技巧并强调一种思考原则。 概述技巧svg和png图片转换和下载解决chrome data url too large下载问题解决@ViewChild未及时刷新问题原则永远从问题最近的地方开始分...
前言本文基于 angular v7.2.7，初次编写于2019-4-17。 虽然代码是基于angular 7.2.7，但是语法是基于 angular 4.X 以上均可使用 。在项目开发过程中，我们经常需要跟后端进行文件交互，常见的诸如 图片上传，excel 导入与导出等。这里我们只讨论关于excel 的导入与导出。 Excel 导入excel 导入在angular 中其实非常简单，只需要安装 xlsx插件 就可以了。 安装 xlsx 插件npm install xlsx --save在component 中导入import * as XLSX...
几乎每个web应用都会用到表单，Angular 为我们提供了几个内置 validators (验证器)，但在实际工作中为了满足项目需求，我们经常需要为应用添加一些自定义验证功能。angular内置验证器 required - 表单控件值非空email - 表单控件值的格式是 emailminlength - 表单控件值的最小长度maxlength - 表单控件值的最大长度pattern - 表单控件的值需匹配 pattern 对应的模式（正则表达式）需求：设置成绩占比时，如果总占比不是100%，则无法...
angular里面对于表单验证，设置了很多指令。 也就是说不用自己写一些逻辑，直接绑定指令就行。 ng-app 启动你angular的模块 ng-controller 控制器，启动你angualr里面的逻辑代码作用在页面上 ng-options 循环你select里面的option标签，很好用的 ng-submit，表单提交执行的 novalidate 表单form配合后期检测的 ng-model 实现双数据绑定 ng-show 根据一定的逻辑实现显示 ng-cloak 绑定在节点上，防止节点渲染，angular指令...
简介 写一份自定义的angular脚手架吧 写之前我们先解析一下antd的脚手架 前提 先把 Angular Schematic这篇文章读一遍,确保了解了collection等基础 antd脚手架 克隆项目 git clone https://github.com/NG-ZORRO/ng-zorro-antd.git 开始 打开项目在schematics下的collection.json为入口,查看内容一共定了了4个schematic,每个schema分别指向了各文件夹的子schema.json,factory指向了函数入口，index.ts ng-add/schema.json {// 指定sc...
ngDraggable.js是一款比较简单实用的angularJS拖拽插件，借助于封装好的一些自定义指令，能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;?ng-drop:是否允许放入拖拽元素?ng-drop-success($data, $event):拖拽元素放入的回调;$data：放入元素数据；$event拖拽事件对象?ng-drag:元素是否允许拖拽?ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象?ng-drag-data:拖拽数据官方链接：https://git...
需求：方案一 最开始就是用最简单的方法，前台请求数据，然后通过select和option在页面上显示，但是写了一会儿发现出现了许多类似下面的重复的代码： // 初始化年级选项 initGradeOptions() {this.gradeService.getAll().subscribe((res) => {this.gradeOptions = res;}, () => {console.log(get gradeOption error);}); } <nz-select nzPlaceHolder="请选择所属年级" formControlName="grade"><nz-option *ngFor="let grade of gr...
需求描述要求批量导出数据，以excel的格式。 选择方式前台 + 后台 之前在别的项目中也遇到过导出的问题，解决方式是直接在前台导出将表格导出。 这次没有选择前台导出的方式，是由于需要导出所有的数据，所以考虑直接在后台获取所有的数据，然后就直接导出，最后前台触发导出API。 后台实现导出使用的是POI，在上一篇文章中，我已做了基本的介绍，这里就不做介绍配置了，参照：POI实现将导入Excel文件 创建表格首先先建立一张表，这...