Sometimes we might have some expensive function to calcuate state directly from template: <div class="chip"> {{ calculate (item.num)}} </div> calculate(num: number) { return fibonacci(num); } The ´calculate´ function is a pure functi…

Explaining how Pipes only change by default when your Pipe input parameters change and not when your data changes. It also shows you how to make an “unpure” pipe if you always want your pipe to update. import {Pipe} from 'angular2/angular2'; @Pipe({…

For example you make a function to get rating; getRating(score: number): string { let rating: string; console.count('RatingPipe'); if(score > 249000){ rating = "Daniel Boone"; } else if(score > 200000){ rating = "Trail Guide"; }…

First, how to use a build in pipe: <div class="pipe-example"> <label>Uppercase Pipe: {{ message | uppercase }}</label> </div> <div class="pipe-example"> <label>Lowercase Pipe: {{ message | lowercase…

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filesize' }) export class FileSizePipe implements PipeTransform { transform(size: number, extension: string = 'MB') { return (size / (1024 * 1024)).toFixed(2) + extension; } } import…

For example we want to create a pipe, to tranform byte to Mb. We using it in html like: <div> <div *ngFor="let file of files"> <p>{{ file.size | filesize: 'MB' }}</p> </div> </div> Create pipe: import {Pipe, P…

以下为自定义过滤器 import { Pipe, PipeTransform, Injectable } from '@angular/core'; import { DomSanitizer} from '@angular/platform-browser'; @Pipe({ name: 'weekPipe' }) //数字转中文 export class WeekPipe implements PipeTransform { transform(value: any, args?: any)…

背景 最近在公司开发的一个项目需要在 Angular 上展示图文,并且需要同时支持 Markdown 和 HTML 对于同时支持 Markdown 和 HTML ,应该要分为编辑和渲染两部分考虑. 对于编辑,目前尚未找到同时支持两种格式的编辑器.我个人认为 Markdown 最好的开源编辑器是 Editor.md,最好的 HTML 编辑器是 UEditor,虽然他们俩都已经很久很久没更新过-- 所以在编辑页面就只能提供两个编辑器的切换,对于 Markdown 和 HTML 分部用各自的编辑器.…

一.安装gulp(已经安装了node环境) npm  install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "devD…

常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http://www.bejson.com/http://www.kjson.com/ //提供fake的数据:http://jsonplaceholder.typicode.com/users /posts 100 posts/comments 500 comments/albums 100 albums/…