refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/latest/cookbook/component-communication.html https://angular.cn/docs/ts/latest/guide/displaying-data.html https://angular.cn/docs/ts/latest/guide/user-inp…

前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大家深入了解组件的其它知识,组件的校验,组件的通信等等. 本章目标 学会组件简单的校验 学会父组件向子组件传递数据 学会子组件向父组件传递数据 父组件向子组件传递数据 父组件向子组件传递数据实现的方式特别简单,只用使用props进行数据传递就可以了. 语法:props['属性1',‘属性2’,...]…

Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于本人非专业前段,代码写的自己都感觉是"一塌糊涂",十分混乱.现在看到Angular2十分火爆,跑了跑它的The Tour of Heroes的例子,感觉非常不错,代码组织的井井有条,于是乎决定学习一下Angular2,然后用它将之前的NiceMark重写一下…

1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于本人非专业前段,代码写的自己都感觉是"一塌糊涂",十分混乱.现在看到Angular2十分火爆,跑了跑它的The Tour of Heroes的例子,感觉非常不错,代码组织的井井有条,于是乎决定学习一下Angular2,然后用它将之前的NiceMark重写一下. 2. 整体感知 它组织代码的…

TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的多! 上面这个图解就是TextView派生出的一些类(图来自 疯狂Android讲义),TextView有许多的xml属性,下面就在例子中举一些我觉得常用的,其他属性如果要用到的话,到时候在查阅资料! 常规TextView属性 最常见的属性是 更改字体的大小.颜色.类型.样式,下面就分别举例了更改字…

前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇博客的内容也比较简单,看过我博客的人都知道我所写的每一篇博客都是非常的详细的,所以大家不要担心学不会.我会尽量将所学的知识讲解的通俗易懂,让大家学习起来更加快乐,那么一起来看看吧! 本章目标 学会使用全局组件和局部组件 学会ref引用 初识组件 解释:组件系统是 Vue 的另一个重要概念,因为它是一…

1.什么是服务注册中心? 在学习服务注册与发现时,我们要先搞明白到底什么是服务注册与发现. 在这里我举一个生活中非常普遍的例子——网购来简单说明,网购在我们日常生活中已经是非常普遍了,其实网购中的(商家—菜鸟驿站—买家),就组成了一个非常简单的注册发现逻辑.在我们购买商品之后,需要拿到这件商品,如果是普通的点对点服务,商家直接将商品快递给买家,如果买家临时有事不在家,这个时候将会收货失败. 当引入注册中心—菜鸟驿站之后,商家发货后只需要将商品发送给菜鸟驿站(服务注册),买家在合适的时间通过快递号…

更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008672478 https://stackoverflow.com/questions/45438304/insert-a-dynamic-component-as-child-of-a-container-in-the-dom-angular2 https://stackoverflow.com/q…

工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig = [{ path: 'app/:id', component: AppComponent, children: [ { path: 'share', component: AppShareComponent }, { path: 'issue', component: AppIssueCompo…

RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, 大致上是这样的概念. 1.某些场景下它比promise好用, 它善于过滤掉不关心的东西. 2.它是观察者模式 + 迭代器模式组成的 3.跟时间,事件, 变量有密切关系 4.世界上有一种东西叫 "流" stream, 一个流能表示了一段时间里,一样东西发生的变化. 比如有一个值, 它在某段时…

2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 "ng" 指的是 angular2 哦! ECMA 6 中, 每一个 .js 文件都是一个模块. ng 中的模块则指的是一组被封装起来的组件, 指令, 管道, 它们可以来自不同的 .js 文件. 所以 ng 模块可以说是 ECMA 模块的更上一层封装. 这正是我们需要的. import { NgMo…

Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道 最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 先上个效果图: 环境&版本信息声明 运行ng -v @angular/cli: 1.2.0 node: 8.1.2 os: win32 x64 @angular/* 4.2.5 ... 好吧,那就顺便写个笔记/教程/备…

Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa…

在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们. 模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule.HttpModule.RouterModule. NgModule的…

refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookbook/dynamic-form.html http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel https://scotch.io/tutorials/how-to-implement-a-custom-va…

前言: 在这里,我描述三个场景,即系统的注册与登录,及登录后的操作: 1.注册场景,前端页面传入用户名密码,通过一个api接口传到后台,在后台对这用户及密码进行保存: 2.登录场景,前端用户传入用户名及密码,通过api接口传到后台,在后台进行配对,如果配对成功,则在后台派发(返回)一个令牌(id_token,下同),通过这个令牌作为用户已经登录的唯一凭证,需要保存到用户本地存储(localStorage),以后作后续操作: 3.登录后操作,当用户需要授权操作时,那么首先得获取本地存储(local…

每个angular2应用程序默认使用app目录来创建(可以自己制定,但是eclipse插件生成的会自动使用app) 每个程序应当至少有一个angular模块即根模块.根模块使用@NgModule({})装饰器装饰,是应用程序的入口. 每个angular程序也至少有一个组件,根组件.组件使用@Component装饰.装饰器内可以添加元数据如 selector,templete等. 插值表达式{{exp}}在templete模板中使用,取组件中的值. 双向绑定[(ngModule)] 作用在输入表单…

Angular2 这里 Angular2 是指采用 TypeScript 语言的 Angular 2.0及以上版本.与采用 JavaScript 语言的 AngularJS 相比,Angular2 不仅底层语言有变化,框架结构也完全不同. Angular CLI Angular CLI 是用来实现诸如创建 Angular 工程,添加 Angular 组件,测试打包发布 Angular 应用程序等一系列功能的一个命令行工具. CLI 是 Command Line Interface(命令行界面)的…

TypeScript: TypeScript变量声明:let和const是JavaScript里相对较新的变量声明方式,const是对let的一个增强,它能阻止对一个变量再次赋值. var作用域或函数作用域let是词法作用域或块作用域使用var声明时,它不在乎你声明多少次:你只会得到1个 Angular2: 1.组件: 组件是 Angular 应用中的基本构造块. 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作.组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据.…

今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: // 方式二:(复杂组件)类组件[ES6],这是一个基本的类组件 class Component extends React.Component{ render(){ return <div>类组件B</div>; } } 在这里我要将上面的类组件进行相对的完善,使它支持数据变量的操作,…

更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-material-dialog-not-closing-after-navigation 今天发现一些场景可能导致 dialog 不会关闭. 比如当子组件打开一个 dialog 后 某一个操作把父组件给销毁了.这个时候 dialog content 会一起销毁掉, 因为 content 是 under…

前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实用工具 Bootstrap--字体图标 Bootstrap--下拉菜单 Bootstrap--按钮组 Bootstrap--按钮下…

前面都是用ListView控件来配合Adapter做的一些实例,这次我们来见识一下GridView与Adapter之间的爱恨情仇.... GridView是用于在界面上按行.列分布的方式来显示多个的组件,与ListView相似,但是比ListView高级,因为他可以一下子有多个列,而ListView只有一列. GridView设置一个简单的图片浏览器 大概功能就是 点击一下图片,然后下方显示放大的图... 主布局代码: <?xml version="1.0" encoding=&…

AdapterView是一个非常重要的组件之一,他非常灵活,所以得好好学...AdapterView本身是一个抽象类,派生出来的子类用法也十分相似,只是界面有一定的区别,因此本节把他们归为一类 AdapterView的特性有:AdapterView 继承了ViewGroup,即它的本质是一个容器 .AdapterView可以包括多个列表项,并且将他们合适的显示.AdapterView与适配器Adapter是有着千丝万缕的关系的,一般都是AdapterView调用setAdapter()方法来填充…

ImageView是集成了View的组件,它的主要工作就是显示一些图片啊,虽然他的用法一句话概括了,但是我觉得学起来应该不会太简单,正所谓 短小而精悍么 :) ImageView 派生了 ImageButton与QuickContactBadge两个类,ImageButton 与 Button的区别在于Button生成的按钮显示的文字,而ImageButton上面显示的是图片,当然我们也可以给Button设置他的background来添加一些图片:ImageButton是非常灵活的一个组件,因为…

参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/docs/ts/latest/api/    -@angular/router 部分 ng2 路由的概念和游览器类似, 和 ui-router 也类似, 下面会把具体功能逐一解释 1. html5 和 hash # ng2 默认模式是 html5, 在开发阶段我们喜欢使用 hash 模式, 这样可以不用部…

1.接口奇葩验证 interface Abc { name : string } function abc(obj : Abc) { } let ttc = { name: "adad", age: 12 }; abc(ttc); //no error abc({ name: "adad", age: 12 }); //error 对象字面量会有特别的检查, 所以一个 no error ,一个 error. 2. readonly const data: strin…

refer : http://blog.thoughtram.io/angular/2016/09/15/angular-2-final-is-out.html ( search Dependency Injection ) 小说明 : 大致流程 : 我们负责写 providers, angular 会维护好 injector, 当我们声明需要 service 时, injector 会依据我们的 provider 来创建出 service 单列 : 一个 service 在一个 injecto…

今天来写一个组件,相信很多人都会用到的——ViewStack. ViewStack组件无疑是UI中很重要的一个组件,可惜react-native并没有内嵌进去,需要开发者自己去实现. 实现原理很简单,就是根据索引来显示一个子视图,用一个render即可完成: render(){ return( <View> {this.props.children[this.props.index]} </View> ); } 这样,一个最简单的ViewStack就完成了,那怎么使用呢: <…

第一次写单元测试. 以前一直都有听说 TDD 的事情. 今天总算是去尝试了一下. 先说说 TDD 的想法, 是这样的, 开发项目的流程 : 确定需求 -> 写类,接口,方法的名字(不写具体实现代码哦) -> 写测试代码 -> 这时测试的话一定是全部 fail 因为实现代码还没写嘛 -> 写实现代码 -> 运行测试 ... 这样的流程适合需要敏捷开发的项目, 如果你的项目经常需要扩展, 而且扩展往往是不在预计范围内的, 那么你必然需要使用敏捷开发模式和流程. 也只有把测试写好,…