Angular 2+ 新建项目时报错 cannot-find-module

今天突然来劲想再建个 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...

2018
01-15

Angular 2+ 动画

前言 Angular 2+ 动画可以让你写出来的 Angular 2+ 代码显示效果不再那么地生硬,它可以让你在对元素切换时添加一些动画,这不仅仅是好看,因为它确确实实提升了用户体验,让用户感觉这个页面科技感满满的。 基本用法 入门示例 要想使用 Angular 2+ 中的动画效果,你必需做一些准备: 在app.module.ts 中引入 animations 模块 app.module.ts import { BrowserModule } from '@angular/platform-browse...

2018
01-15

Angular 2+ 管道

前言 Angular 2+ 管道的管道与AngularJS 中的管道作用一样,对一些数据处理,让它符合我们的预期展示效果。官方也为我们提示了不少的内置管道,我们可以直接在模板中使用它们。下面我们就来讲讲 Angular 2+ 中的管道。 Angular 2+ 内置管道 内置管道比 AngularJS 的要少,因为在Angular 2+中 去掉了一些管道。Angular 2+ 的内置管道包括但不限于: DatePipe:时间格式化 UpperCasePipe :大写 LowerCa...

2018
01-14

Angular 2+ 结构型指令

前言 结构型指令跟属性型指令很相似,但它们的实现原理有很大的不同,属性型指令一般都是为了更改元素的外观或行为比如:内置的NgStyle指令,而结构型指令更多的则是更改了 HTML 结构。 结构指令之旅 什么是结构型指令 结构型指令主要的作用是 HTML 布局,即增删元素。这个增删元素是彻底的,它不像样式中的 display:none 那样只是让你看不过,而是直接从 HTML 中移除了。这样可以使得 HTML 更精简。...

2018
01-14

Angular 2+ 属性型指令

前言 Angular 中的指令相信你已经已有听闻,或者早就已经在 AngularJS 中用得出神入化了,但到了 Angular 时代一切都已经成为了过去式,一切都得生来,虽然 指令的字义和作用基本没变,但写法已经大不相同了。本文我们就来看看 Angular 2+ 中的属性型指令。 首先我们得知道在 Anguglar 2+ 中什么才算是指令。 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令,三种指令中最常用的 结构型指令 — 通...

2018
01-11

Angular 2+ 动态组件

Angular 2+ 中的动态组件怎么用?这对于像我这样的初学者来说无疑是一个很大的挑战,特别是在看官方介绍文档和示例时,倍感压力。为此,本文用尽可能简单的例子来实现Angular 2+ 动态组件加载。 在实现动态组件之前,我们就要有心理准备,因为在这个简单的示例中涉及到了比较多的知识点,包括但不限于: ViewChild ViewContainerRef ComponentFactoryResolver AfterViewInit Directive ViewChild:属性装...

2018
01-09

Angular 2+ 组件样式

前言 angular 2+ 后样式的使用模式有了很大的改变,这可能给我们带来不少的好处,也符合 Angular 2+ 本身的初衷(模块化),第个模块都会有自己样式,互不影响。让我们在修改样式时,只需要关注当前模块就可以了。好了,下面我们开始组件的样式之旅。 组件样式之旅 给组件添加样式有很多种方法,大致跟我们平时引入样式的规则相同。下面我们就来看看组件引入样式的各种套路。 元数据中的样式 import ...

2018
01-08

Angular 2+ 组件间的数据交互

组件之间的交互 通过输入型绑定把数据从父组件传到子组件 这种数据交互比较简单,直接通过属性传入子组件,然后在子组件通过 @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>` ...

2018
01-07

Angular 2+ 模板语法必备套路

模板中的HTML 几乎所有的HTML语法都是有效的模板语法。<script> 被禁止(被忽略),<html>、<body>和<base>元素用在模板中是没有意义的。 插值表达式 ( {{…}} ) 把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值,可以调用宿主组件的方法,也可以作简单的数值运算,并把求值的结果转换成字符串。 <div> <h3>{{title}}</h3> //...

2018
01-07

Angular 2+ 执行 ng eject 后,我要回到过去

前言 ng eject 是什么?它的作用就是弹出 webpack.config 配置文件以及修改了 package.json 文件和 .angular-cli.json 文件里的一些默认配置。 在这里我们不关注 ng eject 的过多细节,因为本文要分享的是如何才能让我回到过去(ng eject 执行之前)。因为执行了 ng eject 命令后,之前的 ng 前端的命令行就没法使用了。所以你懂的…… 回顾 首先我们来看看 ng eject 命令执行后,我们再执行...

2018
01-07

Angular 2+ Object literal may only specify known properties, and ‘qq’ does not exist in type ‘Person’

这是一个很神奇的报错,因为你明明看懂了它报错的提示信息,但你就是偏偏没办法解决这个错误。这种也许就是别人口中常说的不解之迷吧!但这次,在这里,这个世界性难题已经知道并可以解决了。下面就是见证奇迹的时刻,擦亮眼睛,千万别走神了。 现在我们来看看几个关键的模块: person.ts export class Person { id: string; name: string; sex: string; age: string; phone: string; e...

2018
01-07

Angular 2+ ERROR TypeError: Cannot read property ‘name’ of undefined

Angular 2+ 给我们带来新鲜感的同步,也带来了前所未有的负作用,比如一些 AngularJS(Angular 1)中不会出现的报错。在 Angular 中却无情地出现了。正如本篇文章要分享的这个一样,在 AngularJS 中是的特定场景是不会出现 ERROR TypeError: Cannot read property ‘name’ of undefined 的,但在 Angular(Angular 2+) 中却出现了。 这种错误出现的情景:比如你要从服务器获取一个对象,然后在...

2018
01-06

Angular 2+ 入门级示例

这是一篇关于angular 2+ 的入门级示例。因为是入门级,所以在这里不会对很多概念性的东西作过多的介绍,而是通过一个接近实战的业务来对 Angular 2 进行介绍。这样才不会让人觉得假大空的印象。这个实战示例分为三个部分:列表页、详情页、编辑页。数据通过模拟服务器请来来返回一个 promise 对象。 首先们来先来看看这个实战例子的一个整体结构: 注意图片等静态资源要放到 assets 目录下。然后在.html ...

2018
01-05

Linux (centos)常用命令行整理

切换用户 这里收集的是 Linux(centos)中非常常用的一些命令行,但对于不是偶尔用下 Linux(centos) 的朋友来说,这样的整理也是很有必要的。下面收集的命令都是比较零碎的。 切换用户 # su root 比如从普通用户切换到 root 用户 跳到文件头部和底部 # :1 和 :$ 注意上面的是数字1,而不是英文的l。上面的命令行用法也很简单,打开文件后,直接冒号加 1 就可以跳到文件内容的关部,冒号加 $ 就可以...

2018
01-04

网站无法访问浏览器报 Error establishing a database connection 错误的解决方案

这个问题我相信很多写博客的朋友可能都已经见过了,对于一个网站来说这个错误导致的问题可以说是致命的,因为只要报这个错,网站就无法访问了。所以我们没有理由置之不理,必需采取行动。 云库网就是这两天才发现有这个问题的,这就好像上天跟我开了个玩笑一样,2018年1月1号,难道这是上天送给我的过年礼物吗?这似乎有点过分,但也只能双手合一含着泪把这个厚礼收下。 2018年的第一天访问网站时遇到这个 ...

2018
01-03

前端开发中的各种宽高获取整理

获取可视区的宽高 document.documentElement.clientWidth document.documentElement.clientHeight 获致滚动条滚动距离 // 主流浏览器中,用下面的代码获取值 document.documentElement.scrollTop document.documentElement.scrollLeft // 搜狗浏览器、360 浏览器、IE 浏览器中,用下面的代码获取值 document.body.scrollTop document.body.scrollLeft // 兼容写法 document.documentElemen...

2017
12-28

手机 APP 广告页适配方案

手机 APP 我不信你不用,作为前端开发人员,手机 APP 的 H5 页面适配问题也是逃掉的,因为那是命中注定的。下面要分享的这个只是前端 H5 页面适配中的冰山一角,但也是非常地常用的,它就是传说中的广告页。也就就是我们常常打开 APP 时第一屏所看到的图片页。 不要小看它,觉得就这么一小张图片有什么大不了的,但当你仔细分析的时候你就会发现其中的一些问题,比如:在不同屏幕的手机上要有一致的展示效...

2017
12-26

Echarts+百度地图实战大解密

数据展示有很多种方式,在前端里常用的就是通过 Echarts 实现数据的多种展示方式 ,因为 Echarts 它是完全免费的,还有它的强大,好用还真的让人无话可说,虽然用得不多,但感觉跟其它收费的都是那么好用,贴心。 首先我把官方的一个例子贴出来,原汁原味的代码:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/ 下面就是这个示例的效果图: 这个图都是官方的示例图,一点都没变,如果说有...

2017
12-25

对象(Object)的遍历方法整理

前言 对象的遍历与我们形影不离,不管是数组还是一个形如{ 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() 方法是用来遍历数组的,它可以...

2017
12-20

数组(Array)的属性和方法

平时数组使用得比较多,但常常会有些方法没记住它的用法,比如:某些方法眼熟但具体的用法却不太清楚。这样的情况在我身体已经发生了很多次,所以我有必要把数组的一些属性和方法整理出来,即使自己忘记了也可以有更加直接的查阅入口。说走就走的旅程,数组可以大致分成两块属性和方法。 Array 属性 Array 的属性其实也不多,那那么两三个,具体如下: Array.length 返回数组成员个数。 Array.prototy...

2017
12-17

《ES6 标准入门》学习笔记(第二十五章:读懂 ECMAScript 规格)

《ES6 标准入门》的第二十五章主要内容也不多,但信息量可以却不少。 上面的脑图只是把书中的向个大标题摘抄下来而已也没有什么很有用的信息,通过本章我们只需要知道一点就可以了,如果要想对 JavaScript 的某些特性不了解,那么就可以到官方查看规格文件。这也是你学习 JavaScript 最基本最全面的资料。http://www.ecma-international.org/。我们不妨来感受一下,就拿上面的相等运算符为例: 首先规格对...

2017
12-16

《ES6 标准入门》学习笔记(第二十四章:编程风格)

《ES6 标准入门》的第二十四章主要讲的是编程风格。这一章跟实践就很接近了,如果你此时可以写代码的话,那么这就可以说是一个实践了。 你还可以参考这个网站:http://jscs.info/ ,来学习更多的风格规范。 上面的脑图其实可以看作是对前面章节的一个简单的总结,让你看完这章后有豁然开朗的感觉。

2017
12-16

《ES6 标准入门》学习笔记(第二十二章:Module 的语法)

《ES6 标准入门》的第二十二章主要讲了 Module 的语法和基本套路。这章内容对于日后学习 angular 2+ 很有帮助。把这篇文章号透了,在 angular 的模块导入导出就如鱼得水了。 严格模式的一些限制: 变量必须声明后再使用 函数的参数不能有同名属性,否则报错 不能使用 with 语句 不能对只读属性赋值,否则报错 不能使用前缀 0 表示八进制,否则报错 不能删除不可删除的属性,否则报错 不能删除变量 delete...

2017
12-15

《ES6 标准入门》学习笔记(第二十章:Class 的继承)

《ES6 标准入门》的第二十章主要是讲 Class 的继承,在 ES6 中的继承跟其它语言的继承一样,通过 extends 关键字实现子类 继承父类。而在 ES6 之前,我们一般都是通过 call 来改变 this 的指向实现“另类”的继承。在 ES6 里我们就可以光明正大的跟原汁原味的继承谈恋爱了。 继承中讲到的 prototype 可能会比较绕一点,但它不难,只要你愿意把泡妞的心思贡献出那么千万份之一就足以把这个问题弄得一清二楚了...

2017
12-15