どうも。フロントエンドエンジニアのmikakaneです。
Angular2アドベントカレンダーを書くことになったので頑張ります。
betaになってドキュメントが充実!!
チートシートができてました。凄い見やすいですね。
https://angular.io/docs/js/latest/guide/cheatsheet.html
この辺とQuickStartを使えばなんとかなりそうですね
https://angular.io/docs/js/latest/quickstart.html
Angularのブログ記事とかはTypescriptっていう謎の言語で書かれている事が多いので、
Javascripterとしてはよくわからない所が多いです。
アルファの頃からそれなりにはありましたが、公式のドキュメントでJSベースの情報がそれなりに探せるのはやっぱり嬉しいですね!!
これなら僕でも始められそうです!!
angular2をやってみて困ったこと。
英語のドキュメントをなんとか読みながら調べてみたのですが、最初の方にある、
コマンド？みたいな奴の所でエラーが出て進めなくなりました。
$ npm install
bash: npm: command not found
ぐぐってもよくわからなかったのでとりあえず一旦置いといて、自力でなんとかしてみることにします。
NPMもビルドも、なんならJSファイルも使わない １ファイルで手作りのAngular2
npmは先程のエラーで諦めました。やっぱりコンパイルとかはよくわからないです。
僕は職人肌的な所があるので、JSファイルは一つ一つ手作りで仕上げていきたいのです。
もっと言うならJSとかCSSとかでファイル分けるの大変なんで、１つのファイルでなんとかしたいです。
ちょっと試してみるだけなのに複数ファイル作るの面倒だし、
僕の使っているjsbinというエディタはタブペインが無いのでファイル見るのが大変です。
(せめてsoft wrap 無効化くらいは欲しかった…)
というわけで１つのファイルにアプリケーションの全ての魅力を詰め込んだ、
手作りのAngular2アプリケーション、出来上がりました。
Qiitaの記事一覧をxhrで取ってきてlistとして展開するところまでできた感じです。
インターネットに繋がってなくてjsbinが開けない人のために一応コード掲載しておきます。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.js"></script>
<script>
$(function(){
var AppComponent = ng.core.Component({
selector: 'my-app',
template: $("#template").html()
}).Class({
constructor: [ng.http.Http,function(http) {
var self = this;
this.name = "mikakane"
this.itemList = [];
this.load = function(perPage){
var url = "https://qiita.com/api/v2/items?page=1&per_page="+perPage+"&query=user%3A"+this.name;
var request = new ng.http.Request({
"method": "Get",
"url" : url
});
http.request(request).subscribe(function(res){
self.itemList = res.json();
})
}
this.load(10);
}]
});
ng.platform.browser.bootstrap(AppComponent,[ng.http.HTTP_PROVIDERS]);
})
</script>
<script type="text/ng-template" id="template">
<h2>angular to qiita</h2>
<p>{{name}}さんのQiita記事一覧</p>
<div>
<a (click)="load(10)">最新10件</a>
<a (click)="load(20)">最新20件</a>
<a (click)="load(30)">最新30件</a>
</div>
<ul>
<li *ngFor="#item of itemList">
<a href="{{item.url}}">{{item.title}}</a>
</li>
</ul>
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
Class からつづくfunctionのところとかtemplateのところとか色々触るだけで、
Angular2の雰囲気を気軽に試せると思います。
まとめ
Angular2の記事ってTypescript だったりBabelだったりimportしたりで難しくて、
なかなかとっつきにくいイメージがあったので、とりあえず誰でも触れるAngular2アプリケーションのテンプレートを、と思い作ってみました。
まぁ正直selfと書きだしたあたりで「これはないな」とは思ったので、頑張ってTypescriptとか覚えたほうが幸せになれそうです。
angular2の感想ですが、コンポーネントベースで書けるのはやっぱり嬉しいです。
ディレクティブに()とか*とか謎のお作法がついたのは若干アレですが、まぁないよりはマシだと思います。
angular1とかで、ng-includeの’’つけ忘れたり、ng-clickは()つけるんだっけ…とか未だに迷うことあります。
Typescriptの記事を脳内でコンパイルしたり、all in one CDNの構造を調べまわったり、
個人的には何の役にも立たない作業が多かったですが、階段が壁に見える人向けのちょっとした踏み台になればと思います。