脱Angular初心者 - 次に進むための設計、コーディング - Qiita
Angular 2 入門者の会 Oct 3, 2016 / レバレジーズ株式会社 初めてスライドモード使ってみる armorik83 はちさん ng-kyoto代表 / ng-japanスタッフ Twitter: @armorik83 GitHub: @armorik83 Angular 2.0.0 released! みなさん、安定版なのでもちろんプロダクションに使っていきますよね？ まだHeroとかTodoしか作れない？ 脱初心者してこ💪 ここでの初心者の定義 あらゆる問題に対して、解決方法が分からない 解決できず挫折 抱えきれず破綻 APIを知らない = 初心者ではない いくらでも調べればいい 調べ方が分かっているなら、知らなくてもいい ※ 知っているに越したことはない 中級者へ進む方法 あらゆる問題に対して、一つ一つ適切な解決法を知る 解決法の根拠を理解する 初心者あるある 1.
Walts - Angular 2向けFluxライブラリを作った - Qiita
この度、Waltsというライブラリを開発した。ウォルツとも読めるが、ここはワルツと呼んでもらいたい。View -> Action -> Store、この三角の動きを三拍子に見立てて名付けたものだ。 crescware/walts 数々の検証や他のライブラリの知見を経て開発に着手したのが、Angular 2用を意識して設計したFluxライブラリ"Walts"である。他のライブラリの知見や昨今のFlux事情については前日の記事にて綴ってある。 これは2016年4月に開発を始めており、それまでに私が経験してきたフロントエンドの難点や当時の案件の問題点、反省点などを数多く活かしたものとなっている。Almin.jsとも開発時期が近いようだが、全くあずかり知らぬところで開発しており、結果的にはAlmin.js側が先出しになったのでそちらも参考にしている。 DDD, CQRS, Redux, RxJS,
Angular CLIによるAngular2入門 / Angular2アプリを爆速開発 - Qiita
ついにリリースされましたね、Angular2! Angular2にはCLI(command line interface)の開発環境が整えられており、雛形の自動生成、更新ファイルを自動ロードするなど、爆速な開発が可能になっていることをご存知でしょうか。 このAngular CLIを導入するだけで、様々な開発環境が一気に整います。そのため、gulpだgruntだ、TypeScriptだと様々な環境を整える必要があった今までの開発スタイルが一気に変わる可能性があります。 以下では、Angular CLIを使って共通ロジック[MessageService]からテキストを取得して、そのテキスト表示する画面部品、[HelloComponent]を持ったアプリを作りたいと思います。サービスやコンポーネントを使うのでAngularでの開発のおよその骨格を感じ取っていただけると思います。 では、Angul
ReactとAngular2の選択で迷ったときに考えたいこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが（正式リリース直前でしたが）、結構内容的には、React vs Angular2みたいな内容になってたので、『（私が）ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比
Angular2 + webpack でLazy Loading(AoTもあるよ!) - Qiita
先日公開されたAngular2 rc.6から、RouterのLazy Module Loading機能が強化されています。 AngularJS 1.xでは、oc-lazy-loadなどの3rd Party製の仕組みはあったものの、公式なLazy Load機能は用意されていなかったため、個人的には期待度の高い機能でした。 そこで今日はwebpack環境でのAngular2 のLazy Loadingについて書いてみようと思います。 ちまちま書いたので若干長くなってしまったので、先にレポジトリのURL貼っておきます。 Quramy/ng2-lazy-load-demo なお、上記のレポジトリではwebpackは1.xではなく、2.x(2016.09.03現在beta版)を利用しています。AoTを使わないのであれば、1.xでも問題ありません。 Lazy Loadingって？ webpackに限ら
AngularJSアンチパターン集 - Qiita
（150522追記）本稿の続編としてAngularJSモダンプラクティスを掲載しました。本稿は2014年9月に執筆し、情報がかなり古くなっています。続編では、AngularJS 1.4やAngular 2に関する情報をまとめ、入門者への新鮮なチュートリアル、熟練者の移行手引として作成しました。どうぞご覧ください。 この記事は記録のため残します。 AngularJS歴1年の筆者による個人的なAngularJSアンチパターン集です。自分のための戒めとメモを兼ねています。個人差があると思いますので、参考程度に。 また、筆者はTypeScriptで書いています。 Components ComponentsのDI数が6以上になる 危険度★★★ angular.module('myApp') .service('FooService', [ '$q', '$resource', '$rootScope
Angular2のServer Side Renderingに触れてみる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回のエントリでは、 Angular2 とServer Side Rendering(以下SSR)について書きたいと思います。 Angular2でSSRを実現するためのモジュール群は angular-universal で開発されています1。 コーディングレベルでのモジュール利用方法についても記載しますが、APIや利用可能なオプション等の詳細については日々刻々変化が予想されます。 今日時点では、Angular2の開発チームが目指しているゴールと、それを支えているアーキテクチャについて理解しておいた方が今後の変化に柔軟に対応でき
npm iしてAngualr 2のHello World!を書くところまで【改】 - Qiita
追記160914: rc.7に対応しました、本題はこちらから。冒頭は終了したイベントの宣伝です。 @armorik83です。先日は私もng-japanに登壇してきましたが、会場内のAngular 2熱の高さに興奮を覚えたものです。 さて、私が代表を務めているng-kyotoとng-japan、GDG神戸、会場のteratailさん、サイボウズ株式会社さんのご協力によって、来る4/10と4/16にAngular 2ハンズオン勉強会を開催いたします。 4/10 Angular 2ハンズオン勉強会@渋谷ヒカリエ レバレジーズ本社 4/16 GDG神戸 Angular 2ハンズオン勉強会@サイボウズ 大阪梅田オフィス これは両イベント共にng-kyotoの代表である私の他、@_likr, @shinsukeimai, @pastelInc オーガナイザらが関わっており、初のAngular 2ハンズ
ng-japan 2016 セッション資料まとめ - Qiita
2016年3月21日、ng-japan 2016に参加しました。とても有用な情報が獲得できたのですが、資料などのURLが散らばってたのでまとめました。 全体のTogetter http://togetter.com/li/952725 ng-japan 2016 - C+D Room (主にAngular2関連のセッション) Yotube https://www.youtube.com/watch?v=4QVMhM75XK8 Angular 2の失敗しない始め方 / 稲富 駿 資料 - http://laco0416.github.io/slides/a-way-for-happy-angular-days/#/ Togetter - http://togetter.com/li/953341 Angular2実践入門 / 白石 俊平 資料 - http://www.slideshare.
Angular 2への移行を助けるライブラリ angular-http-harness の紹介 - Qiita
どうも、らこです。物好きなみなさんはもうAngular 2への移行を始めていると思いますが、$httpの移行どうしてますか？ Angular 1の$httpからAngular 2のHttpへの移行を助けるライブラリ angular-http-harness を作ったので、何が問題で、何を解決できて、どう嬉しいのかを紹介します。 用語の統一 サービス: ビューから切り離されたアプリケーションまたはライブラリのロジック。 $http: Angular 1のHTTP通信モジュール Http: Angular 2のHTTP通信モジュール $httpの移行に伴う問題 ほぼすべてのAngular 1のアプリケーションは$httpを使っているんじゃないかと思うので今更説明の必要はないと思いますが、改めて言うと$httpはAngular 1で(たいていはAjaxのために)HTTP通信を行うのに便利なサービ
Angular 2でCSSアニメーションを書く - Qiita
どうも、らこです。 Angular 2の勉強会で出た質問でアニメーションのことがあったので、試してみたら問題なく動いたので使い方を紹介します。 はじめに Angular 2のメインパッケージに含まれているのはangular2/animateモジュールです。これはもう実用段階のAPIです。 それとは別に、ngAnimateというプロジェクトも動いており、これはアノテーションベースでアニメーションを宣言的に記述できるようにしようというものです。まだ全然出来てないのでいまは使えませんがデザインドキュメントはみることができます。 Animations for Angular 2 Beta - Google ドキュメント 今回紹介するのは前者の今使える方です。 完成形 マウスオーバーで背景を指定された色に変更するアニメーションが動くディレクティブを書きました。 いろいろごちゃ混ぜですが動くサンプルは
日本語訳：Angular 2 Change Detection Explained - Qiita
こんにちは、らこです。 この記事はPascal Precht氏によるAngular 2 Change Detection Explainedを日本語訳したものです。 Angular 2を使う上で必修ともいうべき Change Detection に関する貴重な資料なので、許可をもらって日本語に訳しました。Thank you, Pascal! けっこう長いので、先に要点だけ書いておきます。できれば全部読んで、原文も読んで、スライドも見てください。 レンダリングとはモデルをDOMに可視化することである Change Detectionとはモデルの変更を検知し、UIに反映することである モデルの変更を引き起こすのは常に非同期的な処理の結果である Angularはあらゆる非同期処理の後にChange Detectionを行う(Zoneを使って) 変更を検知する際にはオブジェクトの参照が変わったかど
Angular2のDIを知る - Qiita
どうも、@laco0416です。本アドベントカレンダーでは3回目の投稿です。 Angular2のDIを知る 今回の目標は「Angular2のDIを知る」ということで、まずは基本的なところからおさらいしていきます。 Angular2のDIの使い方 まずは一番単純なDIの使い方を解説します。そもそもDIとは…という話になると複雑になるので省きますが、Angular2においては「 Providerから提供されているインスタンスを特定の変数にInject（注入）する仕組み 」のことを指します。 Provider と Inject の2つの関係は重要なので頭に入れておきましょう。 Injectされる側 今回はFooServiceというクラスのインスタンスがDIで注入されるようにします。以下のコードではsay()メソッドを持つFooServiceクラスをexportしています。
Angular 2 @Inputのアレコレ - Qiita
おはようございます、@armorik83です。今回はAngular 2の特徴的なAPIのうち@Inputを取り上げます。 本稿執筆時点での最新バージョンはAngular 2 alpha.48なのですが、ビルドが通らない致命的な問題があったため、仕方なくalpha.47で動かしています。@Inputについてはa47, 48で破壊的変更はありません。 【追記151226】Angular 2 beta.0に対応しました。 @Inputとは @Input (Docs) は、Angular 2のComponentに属性を定義するAPIです。つまり、HTMLでの独自の要素に対して独自の属性を持たせることができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular 2 - Qiita Advent Calendar 2015 - Qiita
angular-cliのgithub-pages:deploy時のbaseディレクトリの設定 - Qiita
angular-cliでつくった雛形にangular2-materialを追加したときのメモ - Qiita
https://qiita.com/KeitaMoromizato/items/83932e4003e6786f09c6
Angular1とAngular2の非同期処理の違いについて考えた - Qiita
Angular2はいかにしてオブジェクトの変更を監視しているのか - Qiita
