- 博客(36)
- 收藏
- 关注
RSS订阅翻译 Ionic 更换主题风格方案
需求最近涉及到的一个需求是——用户可更换页面风格，因此，查了一些资料后，写一下Ionic更换主题方案方案动态改变根标签类名，比如亮色风格时，class="light"，比如暗色风格时，class="dark"步骤1.在 src/theme 文件夹下，新建两种不同风格 light.theme.scss dark.theme.scss 2.在切换事件发生时，动态改...
2018-06-05 22:24:16
2677
原创 读书笔记（五）《影响力》罗伯特·西奥迪尼
用一句话概括这本书 常规的认知习惯，为人类避免了很多麻烦，但同时，也带来了漏洞。而《影响力》这本书，正是通过一些基本的范例，阐述了影响力（利用漏洞）武器所带来的威力。以下用简单的笔记记录下我对这本书的一些总结：对比心理汽车经销商，会在顾客掏钱买车之后才会建议顾客购买各种配件。为什么？因为当顾客买了车之后，相比之下，配件的价格就显得很低了。互惠为什么超市总喜欢提供“免费...
2018-05-01 15:29:23
2073
原创 Angular学习笔记（二十七）说一说Angular的组件样式
以下所有代码的演示地址： 戳这里 => demo展示组件样式独立组件之间的样式并不互相影响，也就是说，在A组件编写的样式不会渲染到B组件。app.component.html@Component({ selector: 'my-app', template: ` <h1>我是父组件的h1</h1> <detail...
2018-04-22 16:32:21
1229
原创 Angular学习笔记（二十六）在angular中使用ng-bootsrtap之初体验
最近在一个angular项目中使用ng-bootstrap，初步入门，所以记录一下。这里查看官方文档什么是ng-bootstrap概念：基于Angular 的 Bootstrap组件 构架：TypeScript+bootstrap 4 CSS框架 特点：其API在Angular是可用的，不需要第三方js如何使用ng-bootstrap1.全局安装ng-bootstr...
2018-04-15 14:23:43
582
原创 读书笔记（四）《奇特的一生》格拉宁
是否有人也和我一样，有时很想知道去年的今天自己在做着些什么事？或者说，想知道自己把时间都用在了什么地方上？有没有人想过，把时间的走向记录下来？确实有这样的人，不过他记录时间，目的不仅仅是想知道时间的走向，而是对自己的时间做出总结，并且规划未来，过好这一生。柳比歇夫是谁？柳比歇夫是《奇特的一生》中的主人公，苏联昆虫学家。而在本书中，作者的重点不在于他的学术研究，而在于他的时间统计法，以及他的生活。
2018-03-16 16:51:57
564
原创 使用localStorage进行跨标签页通讯
localStorage API什么是localStorage提起localStorage，往往还牵扯到sessionStorage，它们都是web Storage的API，表示浏览器端数据存储。而区别是，sessionStorage会随着页面的关闭而销毁，localStorage则可永久存储。标签页间通讯localStorage的增删改，都会触发其storage事件，通过监听这个...
2018-03-15 12:27:09
2736
原创 Angular学习笔记（二十五）http通讯和webSocket通讯
http通讯发送http请求 参考api文档处理http响应携带请求头部信息 需要注意的是： get(url: string, options?: RequestOptionsArgs): Observable<Response> 发送http请求返回的是个可观察者流，需要对其进行订阅获取相应消息。写一个用get方法请求的demo:stock.comp...
2018-03-07 09:12:59
1071
原创 Angular学习笔记（二十四）表单处理之模版式表单校验
响应式表单使用校验器的方式是将其挂在构造函数中，那么，模版式表单如何使用校验器？答案是 —— 指令如何创建指令？命令： ng g directive xxx如何编写自定义校验器的指令？import { Directive } from '@angular/core';import { NG_VALIDATORS } from '@angular/forms';imp...
2018-02-28 15:24:05
322
原创 Angular学习笔记（二十三）表单处理之显示提示消息
显示友好的错误消息查看API： hasError(errorCode: string, path?: string[]): boolean。 errorCode是返回验证errors消息为true的key值。比如required校验器的返回消息是{required:true}。 path是当前control的name值。<form [formGroup]="formGroup"...
2018-02-27 23:08:14
2279
原创 Angular学习笔记（二十二）表单处理之校验器
自定义校验器基本语法：xxx(params:AbstractControl):{[key:string]}:any{ renturn null;}传入参数类型是AbstractControl，是FormGroup、FormControl和FormArray的共同父类，传入参数声明了校验器用于什么对象类型（前面提到的3种）上返回值类型为任意类型，其中返回对象类型中的key...
2018-02-25 16:54:39
761
原创 Angular学习笔记（二十一）表单处理之响应式表单
响应式表单分2步走使用ts编写数据模型使用指令将数据模型与HTML连接编写数据模型，FormModule的3个类型 类名 解释 FormControl 基本单位，保存当前值，元素校验状态以及元素是否被修改 FormGroup 多个FormControl集合，可代表表单的一部分或整个表单，只要有一个FormControl对象无效，都会导致F...
2018-02-17 13:46:22
787
原创 Angular学习笔记（二十）表单处理之模版式表单
首先，Angular提供了2种表单处理方式一、模版式表单 二、响应式表单两种表单处理方式的不同点在于：模版式表单：其数据模型是通过组件模版中的相关指令来定义，因为受限于HTML的语法，所以只适用于简单的表单场景。响应式表单：使用TypeScript创建底层模型，运用特定的指令将模版和底层ts数据模型绑定。在此，我们先学习模版式表单。模版式表单指令 指令...
2018-02-17 13:46:05
472
原创 读书笔记（三）《刻意练习》——安德斯·艾利克森
起始日期：180116 读书笔记：180214写在前面：比起上一本书《有何有效阅读一本书》，在《刻意练习》上我花了比较多的时间。虽然都是学习法类的书籍，但是奥野宣之的风格比较轻松且中心点是——保持兴趣是阅读的第一步。而安德斯·艾利克森的风格比较严谨且富逻辑性。天真的练习 一旦某个人的表现达到了“可接受”的水平，并且可以做到自动化，那么，再多“练习”几年，也不会有什么进...
2018-02-14 13:15:27
1011
原创 Angular学习笔记（十九）周期钩子之OnDestroy
OnDestory定义：组件销毁前调用的最后一个钩子用途：用于反订阅流，消除定时器常在哪里出现：路由跳转时。当一个路由地址跳往另一个路由地址时，前一个路由地址对应的组件会被销毁，后一个路由对应的组件会被创建。销毁时会触发：当应用发生变化，所有的check方法都会被调用demo:app.component.html<a [routerLink]="['child...
2018-02-08 21:29:12
4392
原创 Angular学习笔记（十八）周期钩子之View钩子
AfterViewInit和AfterViewChecked定义：整个视图组装完毕时调用注意：AfterViewInit在AfterViewChecked之前调用子组件的View钩子（包括AfterViewInit和AfterViewChecked）调用完毕，父组件的View钩子才调用View钩子禁止改变视图中绑定的数据值，需放入另一个js周期中，如setTimeout排序
2018-02-07 17:35:10
861
1
原创 Angular学习笔记（十七）父组件调用子组件数据
ViewChild语法：@ViewChild(ChildDirective) child: ChildDirective;其中参数： - 类型：组件类名 - 字符串：包含模版本地变量的元素demo —— 组件类名参数：afterView.component.tsexport class AfterviewComponent implements OnInit { co
2018-02-06 16:03:51
964
1
原创 Angular学习笔记（十六）组件周期钩子之投影和AfterContentInit
投影定义：在运行时动态改变模版内容，父组件主动控制子组件的显示内容。指令：ng-content方法：在html中，父组件中引用子组件标签的写入要显示的内容，子组件使用确定投影点。多个投影点标识: 匹配class名为blue的显示内容 匹配header标签的显示内容 匹配name属性值为red的显示内容demo:app.component.htmlapp-after
2018-02-06 14:03:18
3278
1
原创 Angular学习笔记（十五）组件周期钩子之变更检测和DoCheck
变更检测Angular的变更检测机制配合zone.js来实现，保证组建变化和页面变化同步浏览器中任何异步事件都会触发检测机制检测模版所有绑定属性，若改变则相应区域会被更新需要注意的是：变更检测机制只会把组件属性的改变反应到模版上，不会改变组件值Angular如何进行变更检测每个组件都有属于自己的变更检测器，当任何一个变更检测器检查到变化，zone.js会根据组件的变更检测
2018-02-02 16:37:11
5726
原创 Angular学习笔记（十四）之生命周期钩子和OnChanges
组件生命周期先丢上一张组件生命周期钩子图 其中红色代表只执行一次（初始化类型的钩子），绿色代表执行多次（检测类型钩子）钩子解释 钩子 解释 constructor 实例化对象 ngOnchanges 初始化输入属性 ngOnInit 初始化（除输入属性外的）其他属性 ngDoCheck 组件变更检测 n
2018-02-02 16:31:43
8595
2
原创 读书笔记（二）《好好学习》——成甲
《好好学习》这本书其实我没有详细的读过，只是看过相关的推荐信息，然后在听书频道中听过原作者讲书，对此挺有感触的，所以决定先把想法写下来。毕竟，在《如何高效阅读一本书》中提过，keep住兴趣是阅读成长的第一步。什么是知识？在我们的生活中，充斥着各种各样的信息，我们有各种获取信息的渠道，比如微信公众号文章，微博简书豆瓣等等……然而，这些你所获取的信息是否能运用在你的生活上，还是说只是默
2018-01-28 21:59:02
1673
原创 Angular学习笔记（十三）之组件通讯输入/输出属性
组件通讯 需要做到组件通讯松耦合性，这样组件的重用性才高父子组件通讯输入 @Input()接收父组件信息，被@Input装饰器注解的属性输出 @Output()将自身信息告知父组件，被@Output装饰器注解，使用Rxjs中的EventEmitter发射事件输入属性demo写一个从父组件接收信息的demo子组件//html&l...
2018-01-25 15:01:03
814
原创 Angular学习笔记（十二）之管道
概念处理原始值到显示值的转换 如： {{date | date:'yyyy-MM-dd hh-mm-ss'}} 将原始值 Wed Jan 24 2018 21:20:53 GMT+0800 (中国标准时间) 通过date管道 转化成 2018-01-24 09-20-53Angular的常用内置管道uppercase 转换成大写英文//html:大写转
2018-01-24 22:09:43
428
原创 Angular学习笔记（十一）之响应式编程基础
观察者模式概念观察者模式以及在RXJS中对应的概念和代码样例 响应式编程概念异步数据流编程，可以创建任何事件流。一个简单的响应式编程demo观察流（数组），选出偶数流，计算平方，打印出来//app.moduleimport { FormsModule } from '@angular/forms';imports: [ FormsModule]
2018-01-24 10:37:21
478
原创 Angular学习笔记（十）之数据绑定
数据绑定 数据绑定：将组件的控制器的属性和方法与模版连接起来Angular默认使用单向数据绑定，双向数据绑定可选。AngularJs默认使用双向数据绑定，因为浏览器事件发生时，AngularJs会反复检查数据绑定表达式列表，直到所有数据都已经同步，但这样的做法相对来说更耗性能数据绑定分为3种绑定形式事件绑定DOM属性绑定HTML属性绑定事件绑定 给一个
2018-01-23 12:12:40
491
原创 Angular学习笔记（九）之注入器层级关系
注入器层级关系当在构造函数中声明需要注入服务时constructor(public stockService:StockService) { }，会先从子组件注入器查找是否有相关提供器注入，如没有则查找主组件注入器，再应用级注入器。 需要注意的是，Angular只有一个注入点——构造函数手工编写注入器（一般不推荐使用）import { Component, OnIni
2018-01-18 16:24:00
655
1
原创 Angular学习笔记（八）之提供器的声明方式
提供器的声明方式，常用的有3种使用类：useClass{ provide: MyService, useClass: MyMockService }使用工厂：useFactory使用工厂进行注入，就需要写一个返回任意对象的函数。{ provide: MyComponent, useFactory: ()=>{ if(islogin){ ret
2018-01-18 14:59:17
838
原创 Angular学习笔记（七）之注入器和提供器入门
基本概念注入器：Angular提供的类，一般不需调用，会自动通过组件的构造函数注入。constructor(productService:ProductService){...}提供器：为了让注入器明白，需要被注入的对象如何实例化。一般写在AppModule中的providers中，特殊情况写在组件@Component注解中//AppModule 中的写法@NgModul
2018-01-18 10:33:40
1662
3
原创 读书笔记（一）《如何有效阅读一本书》——奥野宣之
《如何有效阅读一本书》——奥野宣之全书根据“选书-购书-读书-记录-活用”五个步骤来展开，“读书是个麻烦活”，读完了发现，确实，读书不是一件容易的事儿。这是一本比较简短的书，排版与作者建议的读书笔记排版一样，看着舒心。“亚瑟叔·本华说过，读书最重要的是‘不读死书’，坚持‘只选好书、只读好书’的做法可能不太现实，但只要我们张弛有度地贯彻‘好书要细细研读，其他书就粗读略读’的原则，还是很可能实
2018-01-15 10:55:22
1461
1
原创 Angular学习笔记（六）之依赖注入入门
依赖注入模式及其好处什么是依赖注入？首先，当使用参数是对象的方法时，需先实例化对象，再传给它（方法）。如下所示var product = new Product();createShipment(product);于是，我们说：createShipment方法依赖Product类，而Product类注入给createShipment方法。 然而，当createShi
2018-01-12 10:22:03
479
原创 Angular学习笔记（五）之辅助路由和路由守卫
辅助路由 激活后，在任何页面都会显示相关的辅助路由组件。辅助路由的语法分3步1.页面插座，辅助路由的写法是带有name属性router-outlet>router-outlet>router-outlet name="aux">router-outlet>2.路径配置，名为aux的辅助路由可以用来显示xxx组件和yyy组件{path:'xxx',comp
2018-01-10 15:37:28
2639
原创 Angular学习笔记（四）之路由参数和嵌套路由
ActivatedRoute 路由参数当前激活的路由对象，保存这当前路由的信息，如路由地址，路由参数等。三种传参方式在查询参数中传递数据 => html形式如：股票信息 url形式如：/product?id=1&name=2 获取参数格式：ActivatedRoute.snapshot.queryParams["id"]和ActivatedRoute.queryParams
2018-01-05 17:42:49
2346
原创 Angular学习笔记（三）之路由基础
我们把angular应用叫做单页应用程序（SPA,single page app），因为服务器只提供一个页面，负责渲染各种页面的是JavaScript。单页应用的特点单页应用就是一组视图状态的集合 浏览器不会跳转，一直停在index页面只是把页面中的一部分内容替换路由器控制整个视图状态的对象每个应用都有一个路由器，需配置路由器满足你的需求为每一个视图分配唯一的url，则可
2018-01-05 11:37:51
609
原创 Angular学习笔记（二）之Angular的内置指令
内置指令是已经导入过的，可以在组件中直接使用ngIf语法：...，condition为true时显示，false时不显示div *ngIf="false">firstdiv> div *ngIf="a>b">seconddiv> div *ngIf="str=='yes'">thirddiv> div *ngIf="myFunc()">fou
2017-12-28 14:14:28
596
原创 Angular学习笔记（一）之Angular的启动和程序架构
一、启动1、项目前准备确定安装了Node.js使用npm命令安装TypeScript.js $ npm install -g typescript安装angular-cli自动构建项目工具 $ npm install -g @angular/cli新建项目angular-world $ ng new angular-world 2、目录说明项目目录说明 src文件夹目录说明 app文
2017-12-26 10:42:24
803
原创 JS原型链
所有引用类型都有构造函数（语法糖）var a = {} 就是 var a = new Object()var a = [] 就是 var a = new Array()function Foo(){...} 就是 var Foo = new Function(...)所有引用类型都有对象特性，即扩展属性var obj = {}; obj.a = 100;var arr = [];
2017-09-12 16:04:00
375
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人