Submit Search
Upload
angular1脳で見るangular2
•
17 likes
•
29,942 views
Moriyuki Arakawa
Follow
angular2についてangular1でいうアレがangular2でいうコレっていう形式で紹介したり
Read less
Read more
Internet
Report
Share
Report
Share
1 of 56
Download now
Download to read offline
Recommended
Angular1&2
Angular1&2
Kenichi Kanai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularJS 概説
AngularJS 概説
Kenichi Kanai
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
Recommended
Angular1&2
Angular1&2
Kenichi Kanai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularJS 概説
AngularJS 概説
Kenichi Kanai
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
Angular2
Angular2
Kenichi Kanai
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性
Yasunobu Ikeda
Angular js開発事例
Angular js開発事例
Shun Takeyama
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
Kazuchika Sekiya
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
AngularJSについて
AngularJSについて
昌生 高橋
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
Selenium IDE for primer
Selenium IDE for primer
yasukoS
More Related Content
What's hot
Angular2
Angular2
Kenichi Kanai
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性
Yasunobu Ikeda
Angular js開発事例
Angular js開発事例
Shun Takeyama
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
Kazuchika Sekiya
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
AngularJSについて
AngularJSについて
昌生 高橋
What's hot
(20)
Angular2
Angular2
俺とAngular JS 2
俺とAngular JS 2
Directiveで実現できたこと
Directiveで実現できたこと
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Enterprise x AngularJS
Enterprise x AngularJS
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性
Angular js開発事例
Angular js開発事例
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
React を導入したフロントエンド開発
React を導入したフロントエンド開発
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Flux react現状確認会
Flux react現状確認会
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
AngularJSについて
AngularJSについて
Similar to angular1脳で見るangular2
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
Selenium IDE for primer
Selenium IDE for primer
yasukoS
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
Masahiro Wakame
プロダクトにおけるScala
プロダクトにおけるScala
Yuto Suzuki
Scalaでのプログラム開発
Scalaでのプログラム開発
Kota Mizushima
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
tak-nakamura
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
Google Cloud Platform - Japan
What is java_se_7
What is java_se_7
TakumiIINO
デブサミ2013【15-D-4】Opsから挑むDevOps
デブサミ2013【15-D-4】Opsから挑むDevOps
Developers Summit
a-blog cms の基本 Ver.Kochi
a-blog cms の基本 Ver.Kochi
Kasumi Morita
ログ分析勉強会_オンライン_vol2
ログ分析勉強会_オンライン_vol2
Kenji Kobayashi
Djangoのススメ
Djangoのススメ
Alisue Lambda
Proxy War
Proxy War
zaki4649
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
Yu Nobuoka
Infrakit Docker_Tokyo_meetup
Infrakit Docker_Tokyo_meetup
Yuji Oshima
Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎
iPride Co., Ltd.
Swagger jjug ccc 2018 spring
Swagger jjug ccc 2018 spring
kounan13
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
AdvancedTechNight
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
amusementcreators
Similar to angular1脳で見るangular2
(20)
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
Selenium IDE for primer
Selenium IDE for primer
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
プロダクトにおけるScala
プロダクトにおけるScala
Scalaでのプログラム開発
Scalaでのプログラム開発
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
What is java_se_7
What is java_se_7
デブサミ2013【15-D-4】Opsから挑むDevOps
デブサミ2013【15-D-4】Opsから挑むDevOps
a-blog cms の基本 Ver.Kochi
a-blog cms の基本 Ver.Kochi
ログ分析勉強会_オンライン_vol2
ログ分析勉強会_オンライン_vol2
Djangoのススメ
Djangoのススメ
Proxy War
Proxy War
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
Infrakit Docker_Tokyo_meetup
Infrakit Docker_Tokyo_meetup
Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎
Swagger jjug ccc 2018 spring
Swagger jjug ccc 2018 spring
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
angular1脳で見るangular2
1.
angular 1 脳で見るangular
2
2.
自己紹介 株式会社シーエーアドバンス 新川盛幸 業務系社内システム ruby on rails、angularjs
3.
話すこと 1. 特徴 2. Template
Syntax 3. Built-in Directive 4. Component指向 5. angular-cli angularjsを触った事ある人向けに なるべくangular1でいうコレがangular2でいうアレっていう形で話せればと思います。
4.
Version 今から説明する事は、versionが変わっていろいろ更新される部分もあるかもしれません が、どんな感じで書くのか、だいたいのイメージができればいいかなと思ってます。 試したversion = v2.0.0-alpha.44 今
= v2.0.0-alpha.46
5.
特徴
6.
速度 特徴
7.
変更検知 特徴
8.
開発言語の選択 angular2は生のjavascriptでも書けますが、typescript、dartなどのAltJSを選択して開発 できます。 普段はrubyに似た構文で書けるcoffeescriptで開発していますが、angularが推奨して るっぽいのでtypescriptを使用した説明をします。 typescriptは次期javascriptの仕様となるES6由来の構文で書け、IDEのサポートも受けれ ます。 特徴
9.
例 特徴 angular1とどのくらい変わったか比較 angular2でも開発言語の選択での違いを比較 <my-app>タグを<h1>にする 簡単なディレクティブの定義の例
10.
Angular 1 特徴
11.
特徴 ng-appもng-controllerもなく、まとめてコンポーネント (ディレクティブ) $scopeもなくなり、thisを使う
12.
TypeScript 特徴
13.
TypeScript 特徴 Controller Directive 必要なモジュールを ロード 一番上の層のComponentは bootstrapが必要
14.
Template Syntax
15.
{{}} Template Syntax {{}} =
展開
16.
Filter => Pipe Template
Syntax
17.
# Template Syntax # =
エレメント
18.
[] Template Syntax [] =
プロパティバインディング
19.
[] Template Syntax ng-* =>
[*]
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”>
22.
() Template Syntax () =
イベントバインディング
23.
() Template Syntax ng-* =>
(*)
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-* => (*)
25.
[()] Template Syntax [()] =
双方向データバインディング
26.
[()] Template Syntax
27.
[()] Template Syntax 角カッコ(プロパティバインディング ) [ng-model]だけでは値は入るが、変更 は検知しない 丸カッコ(イベントバインディング
) (ng-model-change)を利用して変更さ れた値をnameに入れる
28.
[()] Template Syntax
29.
[()] Template Syntax [] =
プロパティ = ModelからViewへ () = イベント= ViewからModelへ [()] = 両方 = 双方向
30.
Built-in Directives
31.
ng-if Built-in Directives ng-if =>
*if
32.
ng-repert Built-in Directives ng-repeat =>
*for
33.
ng-model Built-in Directives ng-model =>
[(ng-model)]
34.
ng-change Built-in Directives ng-change =>
(ng-model-change)
35.
Component指向
36.
Conponent ConponentはController(ロジック)やView(html)を含んでいるパーツ ログインフォームだったりメニューだったりをConponent化してまとめて作っていきます。 Component指向
37.
Conponent Component指向
38.
Conponent Component指向 適用するセレクタの指定 (restrict) 'cmp' =
タグ '[cmp]' = 属性 'cmp, [cmp]' = 両方 'button[cmp]' = buttonタグのcmp属性
39.
Conponent Component指向 展開するテンプレートの指定 templateで直接htmlを書いてもOK
40.
Conponent Component指向 適用するCSSの指定、なくてもOK
41.
Conponent Component指向 View側で使用するモジュールの指定 built-in directiveだったり、作成したコンポー ネントだったり。 FORM_DIRECTIVESにはng−modelとか が入っている。 使用するモジュールのロード
42.
Shadow Dom Componentが生成されるとShadow Domという要素になります。 htmlがカプセル化され、cssやjsが干渉しない要素 個人ならまだしもチームでcssを書いたり、大きいアプリケーションになるほどcssのクラス名 を全体に干渉しない名前を調べたり、htmlの子や孫セレクタで絞って適用したりするかと 思いますが、 読み込んだstyleはcomponent単位でのみ有効 Component指向
43.
Shadow Dom Component指向 my-componentは BootstrapのCSSは当たるが
44.
Shadow Dom Component指向 my-componentがstyleUrlで 呼び出したcssは外部に影響しない
45.
Componentの構造 Conponentの中に他のConponentを子として持ち、ツリー構造でアプリケーションを作っ ていきます。 親は子にデータを渡したり、子は親にイベントを通知したりできます。 angular1でいう$scope.$broadcast、$scope.$onみたいなもの Component指向
46.
Componentの構造 Conponent指向
47.
親から子へ(attribute) Component指向
48.
親から子へ(attribute) Component指向 親が名前や年齢を渡す 子は@Inputで受け取る
49.
子から親へ(event) Component指向
50.
子から親へ(event) Component指向 親は子で定義された eventを受け取る 子はEventEmitterを使って eventを作る 作成したEventEmitterを 使ってeventを発行
51.
angular-cli
52.
https://github.com/angular/angular-cli angular-cli
53.
サーバー動かしたりlive-reloadとかtypescriptのコンパイルとか、 簡単にプロジェクトのセットアップをしてくれるnpmのパッケージ 簡単なscafoldがあったり、ディレクトリの分け方の統一ができたりする angular-cli
54.
SET UP angular-cli
55.
SCAFFOLD angular-cli
56.
angular1とかなり変わっていて、結構学習コストがかかりそうですが、速さの面でもメリット が大きく、コンポーネント単位で組み立てていくangularjsは疎結合にしやすいし、一度 作ったコンポーネントの使い回しが楽そう。 紹介できたのはわずかですが、ajax周りとかanimationとか、まだまだ試せていないAPIが いっぱいあるのでこれから勉強していきたいです。 angular-cliで簡単にangular2を試せるのでぜひ試してみてください。 Component指向 所感
Download now