ui-routerにおけるresolveの威力 #AngularJS - Qiita
最も多く使われているであろう, AngularJSの拡張コンポーネント, ui-router. 擬似的に画面遷移が必要となるようなアプリケーションをAngularJSで開発する際には、事実上必須といっても過言じゃない. 今回はui-routerに含まれているresolveを活用するお話. ui-routerとresolve ui-routerの基本的な使い方を説明したい訳ではないので、そこら辺は割愛して, resolveの使いどころから説明していく. 下記のようなstate定義があったとする. angular.module('sample', ['ui.router']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/', templateUrl:
InversifyJSで学ぶDI(Dependency Injection) - Qiita
はじめに DIコンテナ自体は特に目新しい技術ではありません。JavaScript界隈ではAngularJS 1.xやRequireJS(AMD)等はそれ自体がDIの仕組みを内包したライブラリです。 しかし、これらのDIは若干無理やりな実装方法を取っていた感があります12。これはJavaScriptでメタデータやAOPを適切に扱う機能が不足していたことが背景にあると考えているのですが、ここ1, 2年で言語側の状況も変化してきています。 具体的にはTypeScript 1.5からDecoratorsがサポートされたり、ES 2015にてリフレクションの仕様が追加されたりと、よりスマートなDIコンテナを実装するための基盤が整いつつあります。 そこで今日はInversifyJSという軽量JavaScript DIコンテナについて触れるとともに、最新のDI事情を見ていきたいと思います。 Invers
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に限ら
Angular で template内補完やエラーチェックできるようになったよ - Qiita
どうも @Quramy です。 さて、今日も今日とてAngular + エディタ関連ネタです。そろそろAngular 2というと怒られるらしいのでAngularと書きます。 先に成果を見てもらうのが手っ取り早いですね。コイツを見れ。 見ての通り、Angular Componentのテンプレート中でプロパティ名補完とエラーチェックを行えるようにしてみました。 上図はVimのキャプチャですが、もし、これを読んでる貴方がVisual Studio Codeユーザーであるならば、これ以降は全く読まなくてよいです。https://github.com/angular/vscode-ng-language-service にVSC用のpluginが転がっているので、こいつを入れればいいさ。 今日の想定読者は、Emacs, Vim, Sublime Text あたりを使ってAngularのコードを書いて
AngularとZone.jsとテストの話 - Qiita
どうも @Quramy です。このエントリはAngular Advent Calendar の3日目向けに書いています。 はじめに Angularにおいて、Componentのテストコードは少し癖が強いですね。少なくとも僕はそう感じました。 次のComponentを例としてみましょう。ngModel を使って name プロパティをバインディングしただけのシンプルなComponent です。 import { Component } from '@angular/core'; @Component({ selector: 'app-my-form', template: `<input [(ngModel)]="name">` }) export class MyFormComponent { name: string = ''; } このComponent に対して、「name プロパテ
TypeScript 2.1のkeyofとかMapped typesがアツい - Qiita
About me @Quramy フロントエンドエンジニア的なことをして生きています。 TypeScript + AngularでSPA作ってます。 2.1 RC is coming! 2016.11.08現在、2.1 RCがリリースされた。 TypeScript blogによると、 async/awaitのDown transpileがES5/ES3でも利用可能に(~2.0ではES2015以上をtargetにしないと使えなかった) 型推論がより賢くなった と書いてある。 2.1.1にどのような変更が入ったかは、 @vvakame先生の記事 に詳しく記載されてる 2.1.4 2.1のRoadmap を読むと、 Static types for dynamically named properties Mapped types というのが載っている。今日の本題はこいつら。 Static ty
NG-CONF 2016の雑な覚え書き - Qiita
Angular界隈における年に1度のお祭りイベント、ng-conf。今年(2016年)は5/4~5/6にSalt Lake Cityで開催されました。 現地には行っていませんが、ng-conf extend Tokyoというイベントに参加し、1日目と3日目のSessionをpublic viewing的に眺めてきたので、その覚え書きです。 1日目(5/4) Keynote 動画 Angular2の性能の話や周辺エコシステムの話など。聴きながら触ってみたい！と思ったのは下記： Augury AngularJS 1.xでいうところのBatarangle的なツール. 後述. Angular CLI Angular2の雛形プロジェクトや、componentのscaffoldingをしてくれたりするツール。後述. NativeScript 2.0 Mobile向けのプラットフォームであるNative
Angular2のServer Side Renderingに触れてみる - Qiita
はじめに 今回のエントリでは、 Angular2 とServer Side Rendering(以下SSR)について書きたいと思います。 Angular2でSSRを実現するためのモジュール群は angular-universal で開発されています1。 コーディングレベルでのモジュール利用方法についても記載しますが、APIや利用可能なオプション等の詳細については日々刻々変化が予想されます。 今日時点では、Angular2の開発チームが目指しているゴールと、それを支えているアーキテクチャについて理解しておいた方が今後の変化に柔軟に対応できると考えています。今回のエントリでも、この点を踏まえて書いていくように努めます。 前半でAngular UniversalのDesign Docを交えながらSSRの仕組みに関する話を、後半でExpressと連携させてAngular Universalを動作さ
Falcor入門 1日目 Falcorとは何者か - Qiita
はじめに 最近、ある程度の時間を割いてFalcorを触っています。 まだ日本語での情報は豊富とは言えない状況ですし、自分の理解を整理する意味も含め、何回かに分けてFalcorについて書いていきます。 1日目の今日は「Falcorとはどのような目的のために生まれ、どのような仕組みに依存しているのか」を説明します。 概念的な話ばかりでコードは殆ど出てきません。実装寄りの話は次回以降に書きますが、行ったり来たりしながら読むのも有りじゃないかなと思います。 ちなみに次回以降の目次はこちら： Falcor入門 2日目 FalcorのJSON Graphに触れてみる Falcor入門 3日目 Falcor Routerでサーバサイドを実装してみる Falcor入門 4日目 FalcorとReactを組み合わせる 昨今、Webアプリケーションの大半は、ReactやAngularなどのMVCフレームワーク
TypeScript + React JSX + CSS Modules で実現するタイプセーフなWeb開発 - Qiita
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
こんなに簡単! Swagger Codegenのカスタマイズ - Qiita
waculでフロントエンジニアをしている @Quramy です。 今日はswaggerの話をしようと思います。 はじめに waculでは、API定義にはJSON Hyper Schemaを用いており、swaggerは現在利用していません。しかし、先月のOpen API Initiative発足等、にわかに盛りあがり始めたのを見て「swaggerも触ってみようか」と思い始めている状況です。 現状のサービス開発フローにおいても prmdを使ってJSON Hyper SchemaでAPI仕様を作成 1.の出力からサーバ側(golang)とフロント(TypeSciprt)用のコードを作成 2.をプログラムから利用 という流れを踏んでおり, 特に2.の部分は自作のライブラリで実現しています（この辺りの事情や実装は僕よりも @tutuming や @ukyo 達が詳しいです)。 swaggerにはsw
React JSX with TypeScript(1.6) - Qiita
はじめに つい先日, TypeScript 1.5系の安定版がリリースされたばかりだが, 1.6系の話をしようと思う. 6月頃に「TypeScriptにReactのJSXサポートが載るぞ!」とアナウンスがあり, 「へー」と思っていたのだが, 久々にmasterを確認してみたら, 既にmergeされてたので触ってみた. (Roadmapへの記載とmergeのタイミングにあまり差がなかった模様1) 折角なのでTypeScriptのJSXサポートを試してみましたよ、というお話. なお、作成した内容はQuramy/tsc-react-exampleに上げてます. 追記 このエントリを書いた直後に気づきましたが, 既にTypeScript の JSX/React サポートを試すに同様の内容が投稿されてました... orz 環境の準備 コードの話をする前に, TypeScriptでJSXを記述するため
AngularJSのCompileとLinkってなぁに？ - Qiita
はじめに AngularJSのDirectiveについては、カスタムディレクティブの作成方法含め、おおよそ理解していたつもりであったが、CompileとLinkについて、若干自信が無い部分があったので、勉強がてら少し厚めに書いてみた。 なお、公式の開発ガイドにも、Oreillyの書籍でも書かれているが、カスタムディレクティブを開発することがあっても、殆どのケースでは、Linkの処理のみを気にするだけでよいため、あんまりこのエントリは役には立ちません。 おさらい 「AngularJSのDirectiveを理解する」にも書いているが、ざっくり言うと、Angularのディレクティブがテンプレートから実際のViewを描画する際は、Compile → Linkの2フェーズに分かれている。 Compile：ディテクティブのテンプレート(html文字列ではなく、DOMオブジェクト)から、Link関数を生
AngularJSでD3.jsをラップしてみよう. - Qiita
はじめに 以前にも書いたことがあるが、D3.jsをAngularJS向けにラップしたライブラリは下記等がある。 Radian.js http://openbrainsrc.github.io/Radian/index.html Danglue.js http://www.fullscale.co/dangle/ しかしながら、いずれも、特定の用途に特化したAPIの提供であり、D3.jsの表現の幅としては大分狭められてしまう感ある。 良いものが無ければ自分で作ればいいじゃない、ということで、自分でD3.jsとAngularJS向けにラップして好きに使ってしまおう。どうすれば、良い感じでAngularJSとD3.jsが統合出来るか、色々試行錯誤している過程のメモである. 対象 このエントリの対象者は↓な人たちです(狭いなぁ...) データ可視化 + クライアントサイドMVCに興味がある. An
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
AngularJSのngRepeatを"ちゃんと"理解する. - Qiita
はじめに 皆さん、AngularJS使ってますか？ Angularといったら、/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/ですよね. /^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/がない開発なんて有り得ない！ ......... ...... ... 無駄な前フリはこの辺にしておこう. 冒頭の正規表現は、AngularJSのngRepeatDirectiveのコードから引っ張ってきている. そう、AngularといえばngRepeat, ngRepatといえばAngularといっても過言でないほど、Angular開発
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
