angular的subscribe

angular中可以使用observable和subscribe实现订阅,从而实现异步. 这里记录一个工作中的小问题,以加深对subscribe的理解.前端技能弱,慢慢积累中. 本来希望的是点击一个按钮后出现一个loading的模态框,实际发现并没有出现loading的模态框. 按钮和模态框的代码,点击删除按钮后,出现模态框,删除按钮消失 <div *ngIf = "rotateState === 0"> loading 模态框 </div> <div *

对Promise的一些深入了解

1.介绍promise和模仿Promise.all和Promise.race promise的设计主要是解决回调地狱(接收结果用回调函数来处理,但必须传入回调函数)的问题,由一层层嵌套回调函数改为由then来执行. 例如: // callback用于接收返回结果, 异步方式 fs.readFile("filePath", callback); // 还有一种方式 cosnt { promises: fs } = require("fs"); // 用promise包

TypeScript: Angular 2 的秘密武器（译）

本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白开场白主要分为三部分: 感谢了ng-conf的组织者. 阐述了TypeScript是JavaScript的超集,并不是另外一种语言. 引用了他的两个朋友最喜欢的TypeScript特性. 由于开场白内容不太重要,所以不再详述.下面开始讲解Dan Wahlin最喜欢的TypeScript的特性. 类型支持(Type Support

后端学 Angular 2 —— 组件间通信

1. 父组件向子组件传递信息使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量例子: import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'my-input', template: ` <h1>I am your father!</h1> <p>{{content}}</p> <input-child [co

Angular数据双向绑定

Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-control

[Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing

[Angular2 Form] Use RxJS Streams with Angular 2 Forms

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the va

Redux你的Angular 2应用--ngRx使用体验

Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1

Angular 2.0 从0到1：Rx--隐藏在Angular 2.x中利剑

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0到

Angular 2.0 从0到1 （七）

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0到

Angular 2.0 从0到1 （六）

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0到

Angular 2.0 从0到1 （四）

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八) 番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0

[Angular 2] ROUTING IN ANGULAR 2 REVISITED

Let's say we have a list of contacts, click each contact, we can render a new route to get the detail. Define the routers: //contact-list.router.ts import {ContactListComponent} from "./contact-list-component.component"; import {ContactDetailCom

[Angular 2] Handle Reactive Async opreations in Service

When you use ngrx/store and you want to fire a service request. When it sucessfully return the response, you need to dispatch action to tell the store update. So one pattern can be considered to follow is: import {Http, Headers} from '@angular/http';

[RxJS + AngularJS] Sync Requests with RxJS and Angular

When you implement a search bar, the user can make several different queries in a row. With a Promise based implementation, the displayed result would be what the longest promise returns. This is the problem which we want to solve. <!DOCTYPE html> &

[Angular 2] ngrx/store

@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJS. The result is a tool and philosophy that will transform the way you approach state management in your Angular 2 applications. This lesson takes an

[Angular 2] Passing Template Input Values to Reducers

Angular 2 allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the

[Angular 2] Using ngrx/store and Reducers for Angular 2 Application State

ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular 2 application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

[Angular 2] implements OnInit, OnDestory for fetching data from server

Link: https://angular.io/docs/js/latest/api/core/OnInit-interface.html, https://www.youtube.com/watch?v=bY92HFyaBvo export interface OnInit exported from angular2/core defined in angular2/src/core/linker/interfaces.ts (line 79) Implement this interfa

[RxJS] Basic DOM Rendering with Subscribe

While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can still do basic subscribe blocks and manually update the DOM on your own. const Observable = Rx.Observabl

巴特西

angular的subscribe