前言我们在开发过程中经常会遇到在页面上实现全局搜索的需求，例如：表格搜索，通过关键词检索整个表格，过滤出我们需要的数据。在Angular6 中我们可以通过Filter + Pipe 的方式来实现这个功能。下面我们看一下实现代码。 经人提醒，代码排版太乱。后续考虑将一个完整版的demo放到GitHub上，敬请期待。 实现代码第一步新建一个名为 filter.pipe.ts 的文件，这部分是实现的核心代码： import { Pipe, PipeTransform } from @angular...
使用AngularJS上传文件 前台是Angular页面后台使用SpringBoot/SpirngMVC上传文件html<div><input id="fileUpload" type="file" /><button ng-click="uploadFile()">上传</button> </div> js $scope.upload = function(){var form = new FormData();var file = document.getElementById("fileUpload").files[0];form.append(file, file);$http({method: POST,url: /upload,data: form,headers: {Content-Type: undefined},transform...
问题描述 附件上传 检定结果以附件形式上传。这里先不考虑api。 实现的任务就是，点击选择文件，选择之后可以清楚掉该文件。 插件介绍 用到了项目映入过的一个插件，angular-file-upload。 angular-file-upload AP：https://github.com/nervgh/angular-file-upload 进入正题，我们如何安装，还是老样子安利波npm npm install angular-file-upload插件很简单，就是一个指令，我们在它提供给我们的指令中声明一个uploader对象，这个对...
Angular2中有两个比较好用的上传文件的第三方库，一个是ng2-file-upload，一个是ng2-uploader。ng2-uploader是一个轻便的上传文件的支持库，功能较弱，而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。 ng2-file-upload文件上传 1、安装ng2-file-upload模块 npm install ng2-file-upload --save2、如果使用systemjs打包，需要在配置systemjs.config.js文件 A、在System.config的...
最近抽空学习了一下Angular6，之前主要使用的是vue，所以免不了的也想对Angular6提供的工具进行一些封装，今天主要就跟大家讲一下这个http模块。 之前使用的ajax库是axios，可以设置baseurl，公共头部；集中捕捉错误等，由于Angular6的依赖注入机制，是不能通过直接修改http模块暴露的变量来封装的，但是通过官方文档我们知道可以通过拦截器（HttpInterceptor） 来实现这一功能。 拦截器可以拦截请求，也可以拦截响应，那么通过 拦...
1.package.json中 "dependencies": {..."vertx3-eventbus-client": "3.5.2",}, 然后 npm install，或者： npm install vertx3-eventbus-client@3.5.22.angular-cli.json中"scripts": [..."../node_modules/vertx3-eventbus-client/vertx-eventbus.js"], 3.创建一个eventbus.service.ts用来通信导入eventbus： import { EventBus } from vertx3-eventbus-client;声明eventbus: declare var EventBus: any;4.创建eventbus实例，监听...
考评员查询，因为整体的数据量比较小，所以我们可以将分页放到前台进行处理。 其实分页的原理也很简单，我们根据分页选择的页码数和每页数据条数决定当前显示的是数组中的第多少项到多少项，然后再构造分页的参数传入已有的分页指令。 // 初始化分页参数 $scope.pageParams = {size: $stateParams.size, // 每页数据条数page: $stateParams.page, // 页码数last: undefined, // 是否首页first: undefined, // 是否...
在Angular应用开发中，组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景，也就是让两个或多个组件之间交互的方法。根据数据的传递方向，分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。父组件向子组件传递子组件通过@Input装饰器定义输入属性，然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据，子组件可通过setter或ngOnChanges()来截听输入属性值的变化。先定义两个组件，...
1 前提准备 1.1 新建一个angular4项目 参考博文：点击前往1.2 去zTree官网下载zTree zTree官网： 点击前往2 编程步骤从打印出zTree对象可以看出，zTree对象利用init方法来实现zTree结构；init方法接收三个参数 参数1：一个ul标签的DOM节点对象 参数2：基本配置对象 参数3：标题信息数组 2.1 在index.html中引入相关js、css<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>TestZtree</title><base href="/" r...
简介使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1>使用方括号将HTML标签的一个属性值绑定到一个表达式上 <img [src]="imgUrl" alt="">使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上 <button (click)="onClickButton($event)">按钮绑定事件</button> 注意在开始下面的例子之前，请先确认已经新建了一个工程。如果没有，请查看：Angular2学习笔记之A...
前言：在开发中现在需要使用echarts来制作图标，所以就在网络上各种找资料，最后发现ngx-echarts轮子可用。那么就走一波. 方式： 使用echarts和ngx-eachrts两个依赖，借助于ngx..，是因为echarts是基于js编写，没有ts文件。所以就使用ngx-echarts来使用即可。 第一步：安装依赖npm install echarts --save npm install ngx-echarts --save第二步：在Module中引入import { NgxEchartsModule } from ngx-echarts; @NgModule({imports...
最近在做一个双向折叠组件，如下图所示，页面是分为两组，左边页面是Summary Panel,主要是一组列表，右边页面是Detail Panel，展示左边列表中某一项的具体信息，我们把它记作“Middle State”。我们还看到有“<”和“>”两组按钮，这就是我们要做的“双向折叠组件”。点击左边的“<”，Summary Panel折叠起来，Detail Panel铺满整个页面，我们把它记作“Left State”，如下图：在Summary Panel折叠状态下，点击“>”，又回到“Midd...
Angular2的动画系统赋予了制作各种动画效果的能力，致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。 animations元数据属性在定义@Component装饰。就像template元数据属性！这样就可以让动画逻辑与其应用代码紧紧集成在一起，这让动画可以更容易的出发与控制。一.在app.mudule.ts中引入: import { BrowserAnimationsModule } from @angular/platform-browser/animations;并在@NgModule中...
前言 在开始本文的正文之前，我们先来看一下angular2中将带标签的文本输出在页面上的相关内容，为了系统性的防范XSS问题，Angular默认把所有值都当做不可信任的。 当值从模板中以属性（Property）、DOM元素属性（Attribte)、CSS类绑定或插值表达式等途径插入到DOM中的时候， Angular将对这些值进行无害化处理（Sanitize），对不可信的值进行编码。 h3>Binding innerHTML</h3><p>Bound value:</p><p class="e2e-inner-html-interpol...
这次我们说一下nodejs+angularjs多图片上传的问题此前也在网站看了很多篇文章，有关的内容说多不多，说少也不少，但我一一试过以后有成功的，也有没有成功的，折磨了我很长时间，最终也是成功实现了，于是想写下这篇文章，分享我的代码，也希望后人不要踏进我的坑。首先说一下nodejs所以依赖的插件 multiparty 和 fs，可以用npm工具来安装 npm install multiparty --save npm install fs --save 先贴出我nodejs的后台代码（注意：...