More Related Content
Similar to angular1脳で見るangular2
Similar to angular1脳で見るangular2 (20)
angular1脳で見るangular2
- 3. 話すこと
1. 特徴
2. Template Syntax
3. Built-in Directive
4. Component指向
5. angular-cli
angularjsを触った事ある人向けに
なるべくangular1でいうコレがangular2でいうアレっていう形で話せればと思います。
- 20. []
Template Syntax
angular 1.x angular 2.x
<img ng-src=”image_url”> <img [src]=”image_url”>
<a ng-href=”page_url”> <a [href]=”page_url”>
<div ng-show=”true”> <div [visible]=”true”>
<div ng-hide=”false”> <div [hidden]=”false”>
- 21. []
Template Syntax
angular 1.x angular 2.x
<div ng-style=”color:red”> <div [style.color]=”red”>
<div [style.width.px]=”20”>
<div ng-class=”{‘active’:true}”> <div [class.active]=”true”>
<div [attr.class]=”active”>
- 24. イベント
Template Syntax
<button ng-click=”onClick()”> <button (click)=”onClick()”>
<button ng-keyup=”keyup()”> <button (keyup)=”keyup()”>
<button (keyup.enter)=”enter()”>
<button ng-mouseover=”mouseover()”> <button (mouseover)=”mouseover()”>
ng-* => (*)