heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ]; @Component({ selector:'heroes', styleUrls: [ 'heroes.c…

Let's see how to track index when we use 'ngFor: <li *ngFor="#hero of heros | async, #i = index"> <hero-item [hero]="hero" (changed)="thisHero = $event;" [index]="i"></hero-item> </li> #i = i…

Angular 2 VS. React: 血色将至 原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blood-66595faafd51#.g1eaz7lye 转发来自:http://www.zcfy.cc/article/142 Angular2 已升级到 Beta 版并有可能成为 2016 年最火的新框架.尖峰时刻到了,让我们看看它如何应对 2015 年新宠 React. 声明:我很享受在 Angu…

黄玄 · 3 个月前 本文译自 Angular 2 versus React: There Will Be Blood ,其实之前有人翻译过,但是翻得水平有一点不忍直视,我们不希望浪费这篇好文章. 本文由 @李凌豪@黄玄 联合翻译,转载请保留原文链接 ;) Angular 2 已经发布 Beta 版,而且似乎很有信心在 2016 年成为热门框架.是时候进行一场巅峰对决了,我们来看看它如何与React 这个 2015 年的新宠抗衡. 免责声明:我之前很喜欢使用 Angular 1,不过在 2015…

DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎Star) 引言 "他在正午.黄昏,在一天里的许多时刻去感受它.记录它,结果也就让我们看到了那么多的不同.他描绘它的角度没变,但它的面目却极大地改变了." 19世纪著名的印象派画家莫奈,喜欢对着同一处景物,分别画出对象在不同时间,不同光线下的色彩变化. 比如不同季节的三株白杨: 比如一天中不…

上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着上一篇 环境搭建 的文章,我们这一篇来讨论Angualr2的项目结构和几本组件的编写模式 Angular-cli.json里面配置了项目的几本信息,包括版本名字之类的 package.json 是npm包配置 tslint你可以自行百度下,是一种标准化代码检查的东西 其他的不用特别去关心,我们项目的…

1 MatGridListModule简介 对相似数据的展现,尤其是像是图片的展示 使用起来很像表格 官方文档:点击前往 2 MatGridListModule提供的指令 2.1 mat-grid-list 2.1.1 指令说明 一个二维的列表视图 <md-grid-list cols="4" rowHeight="1:1"> <md-grid-tile>测试01</md-grid-tile> <md-grid-tile&g…

1 MatGridListModule简介 对相似数据的展现,尤其是像是图片的展示 使用起来很像表格 官方文档:点击前往 2 MatGridListModule提供的指令 2.1 mat-grid-list 2.1.1 指令说明 一个二维的列表视图 <md-grid-list cols="4" rowHeight="1:1"> <md-grid-tile>测试01</md-grid-tile> <md-grid-tile&g…

In previous artical, we introduce the how to use *ngFor. The limitation for previous solution to display all the heros is we hard cord all heros in our heroes component. First, in real world app, we cannot hard cord;  Seond, even we don't hard code,…

This lesson covers Angular 2’s version of looping through data in your templates: ng-for. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loo…

In this post, we are going to create our own structure directive *ngFor. What it should looks like in HTML? <div> <ul> <li *myFor="let item of items; let i = index;"> {{ i }} Member: {{ item.name | json }} </li> <templ…

<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Welcome to {{ title }} </h1> <h1>循环数据 显示数据的索引(key)</h1> <ul> <li *ngFor="let item of list;…

ngFor ngForOf指令通常使用缩写形式*ngFor为集合中的每个项呈现模板的结构指令.该指令放置在元素上,该元素将成为克隆模板的父级. <li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li> 一般使用是: const list = [{age: '16'}, {age: '18'}, {age: '15'}] <li *ngFor="let item…

You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms that change your data as you make a selection. /** * Created by wanzhen on 23.10.2015. */ import {Component, View, NgFor, FORM_DIRECTIVES} from 'angul…

We want the start-pipe more flexable to get param, so when using it, we pass a second param as status: <li *ngFor="#todo of todoService.todos | started : 'started'"> It will be handled as a second param which is an array of the transform()…

1.定义属性 2.绑定属性.绑定html中 3.循环获取数据 编写的时候没有注意,第二个循环 i 需要改成 {{i}} ,这样才会显示 出效果 4.自定义方法 变量名截图省略 5.*ngIf条件判断 6.表单处理 7.双向数据绑定 (1).导入相关模块 (2).定义属性,查看效果 (3).效果查看…

现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加入进来,虽然还没有用ng2做过企业级项目,平时也了解了很多ng2的改进的地方,下面就来梳理一下ng1和ng2之间一些差异: Angular2不是从Angular1升级过来的,Angular2是重写的,所以他们之间的差别比较大,不是你用过1就能直接上手2的,计划可以认为是一个新的框架: Angular…

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes. <form #formRef="ngForm"> <select name="l…

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and forattributes as w…

Components that you use across multiple applications need to follow a module pattern that keeps them separate from your application logic. This will allow you to make these Angular 2 components reusable and shareable and is the same pattern followed…

In this lesson, we’re going to take a look at how add a class to the providers property of a component creates an actual providers. We’ll learn what a provider specifically does and how we can provide different dependencies with the same token. impor…

第一节: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…

作者:王芃 wpcfan@gmail.com 第一节: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…

Now that Angular 2 is in beta, the time has come for us to drop everything and learn something new, again. The good news is, like React and Angular 1.x, Angular 2 is here to stay for a while so it’s a good investment to become productive with this ne…

看这篇文章基本明白怎么渲染模板,但是我的工程会报错说#号非法,这篇的写法也不好用. angular2.0.0的语法集: Angular for TypeScript 语法快速指南 (基于2.0.0版本) 引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule); 使用JIT编译器引导一个AppM…

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…

This lesson covers using the [input] syntax to change an element property such as “hidden” or “content-editable”. Using properties eliminates the need for Angular 1’s old directives such as ng-show and ng-hide as you’re now able to directly access an…

@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…

When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGroup and Controls. Bind [ng-form-model] to the <form> form bind to ControlGoup Bind [ng-form-control] to the <input> input bind to Gontrol impor…

Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法. 梳理一下之前的Hello World程序.我们写了一个main.ts来引导模块AppModule,而该模块又包含组件AppComponent,这是一个Angular应用最基本的结构.下面再来简单地看看Angular各部件的含义. 先看Module(模块).Angular应用是模块化的,每一个An…