タグ

ブックマーク / albatrosary.hateblo.jp (6)

  • 初心者向け Angular - albatrosary's blog

    Angular を勉強する最良の方法は angular.io を読む コードやissueを読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。アドベントカレンダーですので初心者向けに利用している教科書をgitbooksに書き起こしました。細かい説明はあまり書かれてませんので、気になることはご自身で調べると良いと思いますし、やはり angular.io のチュートリアルなどはやっておくべきことと思います。そこに行く前のより簡単なものです。 こちら → https://albatrosary.gitbooks.io/start-angular/content/ 章立ては下記の通りです: Introduction Angularとは アプリケーション開発をするための環境 angula

    初心者向け Angular - albatrosary's blog
  • Ahead-of-Time Compilation in Angular v2 - albatrosary's blog

    Angular v2は事前コンパイルすることができる」ということを聞いても何のことだろうと思ってしまう。何故このように事前コンパイルする必要があるかというと「開発したAngular2アプリケーションをより効率の良いもの」にするためです。この「効率」というものを具体的にコードを書いて見ます。サンプルコードはAngular2チュートリアルを使っています。 事前コンパイルはngcコマンドで行いますが、そのモジュールが@angular/compiler-cliから提供されます。これにtsconfig.aot.jsonというファイルを追加することと、package.jsonに"ngc": "ngc -p ./tsconfig.aot.json",というスクリプトを定義すること、そしてbootstrapを定義しているmain.tsに対してAoT(Ahead-of-Time)ファイルmain.aot.

    Ahead-of-Time Compilation in Angular v2 - albatrosary's blog
  • Angular2 Component or Directive ? - albatrosary's blog

    Angular2も含めAngular1.5からコンポーネント指向的な話があり、文字通り@Componentを利用する機会が増えるだろうと思います(Angular2を利用する場合、当然ですが)。ただインジェクションするときに「Componentをdirectivesに書いて」とか「ここはComponentで作るけど、ここはDirectiveにしよう」という話もあり「Component?Directive?ほげ?」みたいな話もあるのでまとめてみる Directives オーバービュー Angular2のディレクティブには3種類ある: Components Structural directives Attribute directives 「Component(コンポーネント)」はテンプレートと実際のディレクティブから成る。3種類のディレクティブの中でも最も一般的なもので殆どの場合、このCom

    Angular2 Component or Directive ? - albatrosary's blog
  • Gross! Angular2 Template Syntax - albatrosary's blog

    ちょっときもいAngular2のTemplate Syntaxですが、、確かにキモい、キモすぎる。[]だったり()だったり*とか。このあたりの概要が結構整ってます。 angular.io ざっと目を通してみる 多くはtemplateとclassとのデータのやり取りはダブルカーリー{{}}で記載するのが容易ですね。 import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` <h1>My First {{name}} {{1+1}} App</h1> ` }) export class AppComponent { public name = 'Angular'; } One-wayバインディング さて、この方法でtextボックスのvalueに値を詰め込む @Component({

    Gross! Angular2 Template Syntax - albatrosary's blog
  • @Input and @Output of Angular2 - albatrosary's blog

    ようやく触り始めてるAngular2です。Angular2に定義されている@Inputと@Outputについて触ってみている、ぱっと見キモい。どんな振る舞いをしているのかイマイチわからないのでメモ程度に備忘します。@Inputと@Outputは梱包しているComponentと梱包されているComponent(ダジャレではない)の関係をまず定義する必要があります。 @Inputも@Outputも梱包されているdetail-appへ定義する @Inputは「my-app」から属性経由で値を「detail-app」が受け取るパターン @Outputは「detail-app」から「my-app」へイベントを送るパターン @Inputが扱うのは文字列で@Outputはイベント通知できるPrimise的なもので、でないと「Uncaught (in promise): TypeError: this.d

    @Input and @Output of Angular2 - albatrosary's blog
  • Angularリンク集 - albatrosary's blog

    Angularの資料で何か良いものは?」と聞かれることが多くなってきましたので、そしてAngular資料探しの手間を省くためにも、いつも使っているサイトリンクをまとめます。良い資料があったらこのブログを更新します。読む目安が欲しいというお話がありましたので「★」を付けます。「★」の付いてないものは必要に応じて目を通すと良いのではと思います(あくまでも目安です)。 ★ : まず読みましょう ★★ : 少し慣れたら読もう ★★★ :仕事で使うよ 学習順は YEOMANでAngularをインストールし触りながら Angular家を見つつ Angular Style GuideやNinjaで理解を深める でしょうか(学び方は人それぞれですので)。何れにしても手を動かすのが最良です。 Angular 2 Angular is a development platform for building

    Angularリンク集 - albatrosary's blog
  • 1