angular
背太阳的牧羊人
管它什么真理无穷,进一寸有一寸的欢喜。
展开
-
angular 好的学习demo(国外)
Angular 2/4 - Communicating Between Components with Observable & Subjectsocket.io-with-rxjs-in-angular-2.0Angular and RxJS: Create an API Service to Talk to a REST Backend原创 2017-11-20 17:45:01 · 469 阅读 · 0 评论 -
Angular 动画
angular animation现在是angular默认之外的一个官方组件库,在angular2的时候它是作为核心组件库的一部分,到了angular4的时候为了减小核心库的体积,就把它单独移出了核心组件,但是这并不说明它不重要,angular动画是angular应用中重要的组成部分,而且它也是官方内建提供的支持,只不过不在angular core核心组件里了, 安装动画库:cnpm i --sav原创 2017-10-05 13:07:53 · 506 阅读 · 0 评论 -
Angular Material Menu 组件
menu原创 2017-10-05 13:04:54 · 2423 阅读 · 1 评论 -
Angular Material Autocomplete 组件
autocomplete举个栗子 invite.component.html文件<form> <h3 md-dialog-title>邀请组员</h3> <div md-dialog-content> <md-input-container> <input mdInput type="text" placeholder="组员姓名" [mdAutocomplete]="原创 2017-10-04 14:47:52 · 2309 阅读 · 1 评论 -
Angular Material Dialog 组件
dialog对话框很特殊,需要在模块中的entryComponents中引用 传递数据:const dialogRef = dialog.open(YourDialog,{data:'your data'});接收数据:constructor(@Inject(MD_DIALOG_DATA) public data:ang){};举个栗子 new-project-component.ts文件:im原创 2017-10-04 10:54:32 · 5869 阅读 · 2 评论 -
Angular Material GridList组件
GridList用途:用于相似数据的展示,尤其是图片,类似相册等 行为很像表格,有colspan , rowspan 属性,还可以跨行跨列原创 2017-10-04 10:18:48 · 1850 阅读 · 0 评论 -
Angular 依赖性注入
依赖性注入 依赖性注入其实是一种设计模式,对应的还会有依赖性注入的框架,对于复杂的项目来说需要一个相对工程化的框架来帮我们处理这些事情,而angular就提供了一个比较完整的依赖性注入框架 这个框架当中有几个主要角色: 第一个:Injector 为注入者,你用这个注入者的api去创建你依赖的实例,但是怎么创建呢?是通过构造函数创建还是通过工厂方式还是其它方式,那就是Provider 它来告原创 2017-10-03 19:21:51 · 877 阅读 · 0 评论 -
Angular Material主题
如果要自定义主题的话,style.scss中引入的material的内建主题样式就不需要了,下面一行代码就从style.scss中移除掉@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; //这段是引入material的核心主题新建一个文件专门自定义主题theme.scss建立主题的时候首先把angular mater原创 2017-10-03 16:39:55 · 4292 阅读 · 1 评论 -
Material 组件 list
List用途:一般用于列表<md-list>和<md-nav-list>一个是普通显示的列表,一个是导航的列表 引入时间的一个类库:date-fns cnpm install –save date-fns 然后再添加针对date-fns的@types npm install –save-dev @types/date-fns date-fns针对typescript可以用的类型也装好了pa原创 2017-10-03 14:49:22 · 2335 阅读 · 0 评论 -
Material 组件 card和button
Buttonmd-button是以指令的形式提供的 标准按钮:md-button , md-raised-button , md-icon-button 浮动按钮:md-fab , md-mini-fab原创 2017-10-03 14:02:07 · 657 阅读 · 0 评论 -
Material 组件 input
input指令:mdInput在<md-input-container>内部,有前缀后缀mdInput指令必须在<md-input-container>组件内部使用,这么设计的主要原因是它有一些小动画,还有一些错误信息和提示信息的布局,所以要放在<md-input-container>组件内部<md-error>:只有验证不通过时才出现,对两种类型表单都是如此。 <md-hint>:当error显原创 2017-10-03 11:35:30 · 4824 阅读 · 0 评论 -
UI整体布局
变化的内容只在Main当中,Header,Footer,以及侧滑菜单任何页面看起来都差不多,所以在这种情况下,我们希望把Header,Footer,侧滑菜单放到CoreModule核心模块当中,因为核心模块中放那些只加载一次的组件或者服务flex布局自适应的布局方式,flex是对它之内的元素进行排布,只对这个容器内的直接子元素起作用,对它的孙子元素是没有影响的原创 2017-10-02 18:44:29 · 902 阅读 · 0 评论 -
开发环境搭建
Material UI组件的用法以及如何自定义主题和加载svg资源 Redux管理应用状态安装node的目的是使用npm管理项目依赖的软件包 由于网络的原因,cnpm和yarn作为替代的包管理工具 下载时间过长或者失败 cnpm是位于国内的镜像,是淘宝团队维护的 cnpm的安装: npm i -g cnpm @angular/cli的安装: cnpm i -g @angular/cl原创 2017-10-02 17:28:09 · 207 阅读 · 0 评论