前言 这篇文章没什么技术含量，只是把官方的 DEMO 拷贝过来，样式修改了下而已，没有别的。这篇文章的重点是对官方 DEMO 代码注解，把那些我认为很可能让你困惑的地方作一些备注。 动态表单 我们直接上码： app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; impor...
前言 关于 ES6 中的 super 关键字估计大家跟我一样还见得比较少，不过没关键，在文我们就来初探下 super 关键字。 super 关键字 在讲 super 关键字之前，我们先来看一段超简单的代码： class parent{ constructor(){} } class children extends parent{ constructor(){} } 其实在上面什么都没有做的类中的 constructor 构造方法我们也可以不写，因为类中如果没有显式地定义构造函数的话...
前言 ES6 中的构造函数详解，在 ES5 中也已经有类似的实现了，只是在 ES6 这里换了一种方式来实现而已。 构造函数之旅 ES6 之前 在 ES6 以前我们会像下面这样定义构造函数并生成实例的： function Person(p){ this.name = p.name; this.age = p.age; } person.prototype.say = function(){ console.log(this.name,this.age); } // 并通过 new 来创建一个实例 var xiaoming =...
前言 JavaScript 中的定时器你一定用了不少，比如 setTimeout、setInterval 等。但我们对他的了解又有多少呢？我承认我以前一直用它只是因为他能为我延迟几秒执行某些操作，它确确实实为我解决了不少问题，还有一些比较“奇葩”（由于技术水平有限，未能找出原来）的问题也是通过定时器来解决的。但我慢慢地发现，我对定时器的了解也只是表面上的，而它的运行机制我却不闻不问，也就是我只看到了它成功的一...
前言 使用响应式表单，我们可以在组件中创建表单控件的对象树，响应式表单可以让使用响应式编程模式、测试和校验变得更容易。 来看看演示效果： Angular 2+ 响应式表单之旅 app.component.html <site-list></site-list> app.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', sty...
前言 表单验证远处不在，但你知道在 Angular 2+ 中怎么用了吗？或许你早已知道，或许你还一头雾水，知道的可以跳过，不知道的可以留步。 表单验证之旅 在《Angular 2+ 表单》 已经有分享过表单的验证了,但只是模板驱动验证的，本文我们换一种方式来实现同样的功能，这种方式叫做响应式表单的验证，不管叫法如何变，但关键的东西还是一亲的：验证用户输入的合法性。 响应式表单的验证 下面用一个图来...
Echarts 3.x 这篇文章收集了 Echarts 在平时开发中常用的一些配置项，没有过多的语言，直接上码。有了它可以让你更省时，因为这引会更加直接的让你找到你想要的，而不用在官方文档中一个一个点开查找。 容器边距 grid:{ top:100, left:45, right:25, bottom:45 } 渐变 series: [{ name: '销售量', type: 'bar', itemStyle:{ normal:{ col...
前言 在平时的开发中，表单吧说是最常用的了，比如内容的发布页面、登陆页面等，所以在 Angular 2+ 中的表单用法我们必需得会。下面就来看看 Angular 表单。 表单之旅 我们直接来看一个例子，通过这个例子把有关表单的一些常用的东西都融合进去，好例子一个就够！ 在做之前，我们不妨先看看效果图： app.component.ts <div class="container"> <div [hidden]="submitted"> <h...
前言 事件相信你已经不陌生，比如鼠标事件、键盘事件等，我们可以通过这些事件来触发一些方法以达到我们想要的目的，这再正常不过了，下面我们就来看看有关 Angular 2+ 中的事件。 用户输入 先来看看下面这个简单的事件绑定 <button (click)="clickFn()">Click me!</button> 在 Angular 中我们使用“()” 来绑定事件，等号右边为要执行的方法。 通过 $event 对象取得用户输入 监听keyup事...
什么是 SwitchButton 相信你早已有听闻，在这里就不用多说了，现在我们还是来看看怎么用 Angular 做下个 SwitchButton 。 在做之前，我们先来看看效果图： 效果你都见得多了，下面我们来看看代码，首先我们先来看看这个 SwitchButton 的 .html switch-button.component.html <div class="switch-button" [ngStyle]="myStyle" [ngClass]="{'switch-button-close':trigger.status}" (click)="triggerFn(...
前言 本文要分享的是一个多级菜单效果，也就是传说中的树形结构菜单，理论上支持无限级菜单，当然数据结构要一定的要求，但这都不是什么难事，因为我们可以把数据组装成所需要的结构。下面这个例子虽然不是很完美好，但是估计也够用了。这个多级菜单是模仿 Angular 官方的左侧菜单效果来做的，效果的相似度应该达到 99%，本文内容有点多（主要是代码），因为我想把所有的代码都贴出来，尽量不让你幻想缺...
今天突然来劲想再建个 Angular 项目练练手，谁知道报错了。 报错 E:\study>ng new navMenu create navMenu/e2e/app.e2e-spec.ts (290 bytes) create navMenu/e2e/app.po.ts (208 bytes) create navMenu/e2e/tsconfig.e2e.json (235 bytes) create navMenu/karma.conf.js (923 bytes) create navMenu/package.json (1320 bytes) create navMenu/protractor.conf.js (722 bytes) create navMenu/README.m...
前言 Angular 2+ 动画可以让你写出来的 Angular 2+ 代码显示效果不再那么地生硬，它可以让你在对元素切换时添加一些动画，这不仅仅是好看，因为它确确实实提升了用户体验，让用户感觉这个页面科技感满满的。 基本用法 入门示例 要想使用 Angular 2+ 中的动画效果，你必需做一些准备： 在app.module.ts 中引入 animations 模块 app.module.ts import { BrowserModule } from '@angular/platform-browse...
前言 Angular 2+ 管道的管道与AngularJS 中的管道作用一样，对一些数据处理，让它符合我们的预期展示效果。官方也为我们提示了不少的内置管道，我们可以直接在模板中使用它们。下面我们就来讲讲 Angular 2+ 中的管道。 Angular 2+ 内置管道 内置管道比 AngularJS 的要少，因为在Angular 2+中 去掉了一些管道。Angular 2+ 的内置管道包括但不限于： DatePipe：时间格式化 UpperCasePipe ：大写 LowerCa...
前言 结构型指令跟属性型指令很相似，但它们的实现原理有很大的不同，属性型指令一般都是为了更改元素的外观或行为比如：内置的NgStyle指令，而结构型指令更多的则是更改了 HTML 结构。 结构指令之旅 什么是结构型指令 结构型指令主要的作用是 HTML 布局，即增删元素。这个增删元素是彻底的，它不像样式中的 display:none 那样只是让你看不过，而是直接从 HTML 中移除了。这样可以使得 HTML 更精简。...
前言 Angular 中的指令相信你已经已有听闻，或者早就已经在 AngularJS 中用得出神入化了，但到了 Angular 时代一切都已经成为了过去式，一切都得生来，虽然 指令的字义和作用基本没变，但写法已经大不相同了。本文我们就来看看 Angular 2+ 中的属性型指令。 首先我们得知道在 Anguglar 2+ 中什么才算是指令。 在 Angular 中有三种类型的指令： 组件 — 拥有模板的指令，三种指令中最常用的 结构型指令 — 通...
Angular 2+ 中的动态组件怎么用？这对于像我这样的初学者来说无疑是一个很大的挑战，特别是在看官方介绍文档和示例时，倍感压力。为此，本文用尽可能简单的例子来实现Angular 2+ 动态组件加载。 在实现动态组件之前，我们就要有心理准备，因为在这个简单的示例中涉及到了比较多的知识点，包括但不限于： ViewChild ViewContainerRef ComponentFactoryResolver AfterViewInit Directive ViewChild：属性装...
前言 angular 2+ 后样式的使用模式有了很大的改变，这可能给我们带来不少的好处，也符合 Angular 2+ 本身的初衷（模块化），第个模块都会有自己样式，互不影响。让我们在修改样式时，只需要关注当前模块就可以了。好了，下面我们开始组件的样式之旅。 组件样式之旅 给组件添加样式有很多种方法，大致跟我们平时引入样式的规则相同。下面我们就来看看组件引入样式的各种套路。 元数据中的样式 import ...
组件之间的交互 通过输入型绑定把数据从父组件传到子组件 这种数据交互比较简单，直接通过属性传入子组件，然后在子组件通过 @Input 来获取值，代码如下： parent.component.rs import { Component } from '@angular/core'; @Component({ selector: 'parent-component', template: `<child-component *ngFor="let site of parentSites" [site]="site"></child-component>` ...
模板中的HTML 几乎所有的HTML语法都是有效的模板语法。<script> 被禁止（被忽略），<html>、<body>和<base>元素用在模板中是没有意义的。 插值表达式 ( {{…}} ) 把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值，可以调用宿主组件的方法，也可以作简单的数值运算，并把求值的结果转换成字符串。 <div> <h3>{{title}}</h3> //...
前言 ng eject 是什么？它的作用就是弹出 webpack.config 配置文件以及修改了 package.json 文件和 .angular-cli.json 文件里的一些默认配置。 在这里我们不关注 ng eject 的过多细节，因为本文要分享的是如何才能让我回到过去（ng eject 执行之前）。因为执行了 ng eject 命令后，之前的 ng 前端的命令行就没法使用了。所以你懂的…… 回顾 首先我们来看看 ng eject 命令执行后，我们再执行...
这是一个很神奇的报错，因为你明明看懂了它报错的提示信息，但你就是偏偏没办法解决这个错误。这种也许就是别人口中常说的不解之迷吧！但这次，在这里，这个世界性难题已经知道并可以解决了。下面就是见证奇迹的时刻，擦亮眼睛，千万别走神了。 现在我们来看看几个关键的模块： person.ts export class Person { id: string; name: string; sex: string; age: string; phone: string; e...
Angular 2+ 给我们带来新鲜感的同步，也带来了前所未有的负作用，比如一些 AngularJS（Angular 1）中不会出现的报错。在 Angular 中却无情地出现了。正如本篇文章要分享的这个一样，在 AngularJS 中是的特定场景是不会出现 ERROR TypeError: Cannot read property ‘name’ of undefined 的，但在 Angular（Angular 2+） 中却出现了。 这种错误出现的情景：比如你要从服务器获取一个对象，然后在...
这是一篇关于angular 2+ 的入门级示例。因为是入门级，所以在这里不会对很多概念性的东西作过多的介绍，而是通过一个接近实战的业务来对 Angular 2 进行介绍。这样才不会让人觉得假大空的印象。这个实战示例分为三个部分：列表页、详情页、编辑页。数据通过模拟服务器请来来返回一个 promise 对象。 首先们来先来看看这个实战例子的一个整体结构： 注意图片等静态资源要放到 assets 目录下。然后在.html ...
这个问题我相信很多写博客的朋友可能都已经见过了，对于一个网站来说这个错误导致的问题可以说是致命的，因为只要报这个错，网站就无法访问了。所以我们没有理由置之不理，必需采取行动。 云库网就是这两天才发现有这个问题的，这就好像上天跟我开了个玩笑一样，2018年1月1号，难道这是上天送给我的过年礼物吗？这似乎有点过分，但也只能双手合一含着泪把这个厚礼收下。 2018年的第一天访问网站时遇到这个 ...
获取可视区的宽高 document.documentElement.clientWidth document.documentElement.clientHeight 获致滚动条滚动距离 // 主流浏览器中，用下面的代码获取值 document.documentElement.scrollTop document.documentElement.scrollLeft // 搜狗浏览器、360 浏览器、IE 浏览器中，用下面的代码获取值 document.body.scrollTop document.body.scrollLeft // 兼容写法 document.documentElemen...
手机 APP 我不信你不用，作为前端开发人员，手机 APP 的 H5 页面适配问题也是逃掉的，因为那是命中注定的。下面要分享的这个只是前端 H5 页面适配中的冰山一角，但也是非常地常用的，它就是传说中的广告页。也就就是我们常常打开 APP 时第一屏所看到的图片页。 不要小看它，觉得就这么一小张图片有什么大不了的，但当你仔细分析的时候你就会发现其中的一些问题，比如：在不同屏幕的手机上要有一致的展示效...
数据展示有很多种方式，在前端里常用的就是通过 Echarts 实现数据的多种展示方式 ，因为 Echarts 它是完全免费的，还有它的强大，好用还真的让人无话可说，虽然用得不多，但感觉跟其它收费的都是那么好用，贴心。 首先我把官方的一个例子贴出来，原汁原味的代码：http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/ 下面就是这个示例的效果图： 这个图都是官方的示例图，一点都没变，如果说有...
前言 对象的遍历与我们形影不离，不管是数组还是一个形如{ key:value} 的对象，很多时候我们都得遍历一个对象。为此有必要把遍历对象的方法整理成章，以备必时之需。 数组遍历 for 循环 for 循环可以说是最原始的遍历方法，常常被用来遍历数组。 let arr = [1,2,3,4,5,6,7]; for(var i=0;i<arr.length;i++){ console.log(i,arr[i]); } forEach() forEach() 方法是用来遍历数组的，它可以...