前言 本文主要介绍的是angular.js+node.js实现下载图片处理，下载有两种方式，下面话不多说，来看看详细的介绍吧。 第一种： 不指定完整路径，然后发送get给server让server自己去拼接路径，然后用express的res.download来做下载： Express:var filePath = path.join(savePath, file[0].name); console.log(Download file: + filePath); res.download(filePath);angular:$http.get(url).success(function (data) {var bin = new $w...
一、angular根据环境配置禁用调试： // Disable debug data for production environment // @link https://docs.angularjs.org/guide/production $compileProvider.debugInfoEnabled( app.applicationEnvironment !== production); $logProvider.debugEnabled( app.applicationEnvironment !== production);上面就是根据当前的环境是不是生产环境，来禁用调试了。 二、然后angular单页web如果要禁用复制和剪切 其实实现也很简单，动...
最终实现效果： index.html <!DOCTYPE html> <html><head><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script><script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>...
在使用angular2进行图片上传的时候，遇到了各种各样的问题。在多番尝试之后最终成功上传图片，下面将我的方法分享给大家： nodejs 后台代码 var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require(fs); //引入body-parser //包含在请求正文中提交的键/值对数据。 //默认情况下，它是未定义的，并在使用body-parser中间件时填充。 var bodyParser = r...
之前在AngularJS2中一种button切换效果的实现（二）中实现了按钮的切换效果，但是方法比较low，这次我们使用Angular2的指令来实现。 指令实现hover效果 import { Directive, ElementRef, HostListener, Input } from @angular/core; @Directive({selector: [myHighlight] }) export class HighlightDirective {constructor(private el: ElementRef) { }@HostListener(mouseenter) onMouseEnter() {this.highlight(red);}@HostListe...
之前用三目表达式和ng-class实现了按钮切换效果，似乎达到了我的预期，但是我觉得还有改进空间，网上找了一些资料，大概还有以下几种实现方式： 路由 <button class="btn1" routerLink="component1" routerLinkActive="active" type="submit">btn1</button> <button class="btn2" routerLink="component2" routerLinkActive="active" type="submit">btn2</button> .active {background-color: white; }将button切换的页面写成一个c...
前言 如果说模块系统是Angular2的灵魂，那其组件体系就是其躯体，在模块的支持下渲染出所有用户直接看得见的东西，一个项目最表层的东西就是组件呈现的视图。而除了直接看的见的躯体之外，一个完整的“生物”还需要有感觉器官，用来感知外界与其的交互，这就是指令要做的事情。 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件，继续上文打的比方的话这就像是一个“器官”，功能是呈现图片，并感知用...
实现ng2-router路由，嵌套路由 首先配置angular2的时候router模块已经下载，只需要引入即可import {RouterModule, Routes} from "@angular/router";我们要创建一个嵌套路由，所以需要创建以下文件 index.htmlapp.module.tsapp.component.tshome.component.tslist.component.tslist-one.component.tslist-two.component.ts实现效果： 路由，单机“首页”加载home.component.ts单机"列表“加载list.component.ts列表中包含嵌套路由，...
整理文档，搜刮出一个Angular 2实现自定义 双向绑定 属性的代码，稍微整理精简一下做下分享。 import { Component, OnInit, Output, Input, EventEmitter } from @angular/core;@Component({selector: twoway,template: `<input [(ngModel)]="username"><p>Hello {{username}}!</p>` }) export class TwoWayComponent implements OnInit {constructor() { }usernameValue: string;@Output() usernameChange = new EventEmitter();@...
本文实例讲述了jQuery插件FusionWidgets实现的AngularGauge图效果。分享给大家供大家参考，具体如下： 1、设置AngularGauge图的数据源 AngularGauge.xml： <?xml version="1.0" encoding="UTF-8"?> <chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="差" upperLimitDisplay="好"numberSuffix="%" showValue="1" baseFontSize="16" showBorder="1"><colorRange><color minValue="0" maxValue="60" code="FF0000"/><color ...
在 Angular 中，我们不应该试图直接修改 DOM 的内容，当需要更新 DOM 内容的时候，应该修改的其实是我们的数据模型，也就是 $scope 中的数据，Angular 会帮助我们将修改之后的数据展示在页面中。 但是，在有些情况下，比如我们有一个搜索框，希望将搜索的关键字在正文中高亮出来，这时候就会感觉比较吃力了，filter 可以帮助我们处理这种情况。 实际上，很多时候，我们的数据是不能直接输出到 DOM 中的，典型的比如日期，或者货币等...
本文实例分析了Angular组件化管理实现方法。分享给大家供大家参考，具体如下： 在做sass产品页面的时候，往往每个页面的header和footer都是一样的，还有最近我做的页面，类似datetimepicker这种组件，其实都是可以复用的代码，所以如果能把这些公用的UI组件提取出来，对于维护就会方便很多啦！！ angular框架就支持这种组件化管理，不过也有优缺点，我先来说实现方法哈！ index.html：没有用到路由，所以js都是src生引进来的 <head...
本文实例讲述了AngularJS路由切换实现方法。分享给大家供大家参考，具体如下： 之前有在服务器端接触到angular路由切换，今天想在本地实现路由，捣鼓半天终于成功了，特把步骤整理分享下，免得大家走弯路！ 1.首先引入angular.min.js和angular-route.min.js 2.然后我们来写框架index.html，index里面装的是所有页面都有的nav导航和footer页脚（我这个demo里只有nav），模板文件page1.html，page2.html，也就是中间路由切换的部分 i...
有时我们在前端可能会有这样的需求： 1、每隔一段时间刷新一下页面中的数据2、根据需要可以暂停和启用刷新接下来我们就来看下AngularJS的实现方法： 首先我们了解到AngularJS中$interval可以用来处理间歇性处理一些事情，那么我们的间歇性刷新就使用interval来实现。 $interval使用方法： 1、启动一个定时任务 $interval(function(){},n1,n2);第一个参数function是指我们的定时任务要触发的事件，第二个参数n1是指每隔多少毫秒触发...
今天我们来看看一种只实现分页没有查询的例子吧，先看效果：采用了Angular-UI中的分页组件，关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节（其中ui-router等我也建议你多看看） 注意：必须按照官网上引入相应的js和css才能生效，千万不要忘记了。 HTML代码如下： <div class=""><table class="table"><thead class="hed"><tr><th>省份1</th><th>省份2</th><th>省份3</th><th>省份4</...