ロジックを画面から分離できる「Angular 2」のサービスと依存性注入
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。2016年9月に正式版がリリースされ、本格的に利用できる環境が整いました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 前回記事では、Angular 2のWebページを構成する要素である、コンポーネントやモジュールについて説明しました。これらを利用すると、実装を分割して互いの影響範囲を限定することができます。 しかし、ログ出力のようにさまざまな箇所で使われる処理や、ビジネスロジックのような画面から独立した処理は、独立して実装した処理を、後から追加できれば便利です。Angular 2ではこのような機能として、独立した処理を実装する「サービ
Angular2でHello world！ - Qiita
この先作る予定のWebサービスはRIAにしたいので、今後作る勉強用サンプルもどうせなら何かRIA向けのJSフレームワーク使いたい。 とゆうわけでAngular2を触ってみます。まずはhello world。 今回の記事は英語版Angular2のクイックスタートページ の内容とほぼ同じです。 そんな記事を載せる価値があるのか？とも思いましたが、世の中にはドキュメントが英語なだけでやる気を無くす人も居るに違いないと思い、ソースの99％を転載した記事を書いていました。 より最小化したコードにしてもよかったのですが、Angular2の知識がロクにない状態で間違った情報を発信してしまうリスクもあるため止めました。 今回やりたいこと Angular2で「hello world」を表示してみる。終わり。 環境 Microsoft Surface Pro4 (i5 2.4GHz, Mem 4GB) OS:
AngularJSユーザーのためのAngular2超入門
MEANスタックを用いたWebアプリの開発方法について紹介していく本連載「MEANスタックで始めるWebアプリ開発入門」。前回の「AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本」では、AngularJSのフィルタとカスタムディレクティブについて解説しました。 MEANスタックに関連する情報を基本から解説してきた本連載も、今回が最終回です。最終回となる今回は、前回カスタムディレクティブで解説しきれなかった内容と、最近リリースされたAngular2を紹介します。 なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。 AngularJS 1.xのディレクティブで指定できるプロパティ 前回はカスタムディレクティブを作成するためにdirective関数を使用し、プロパティとしてcompil
入門3日目の僕が感じたAngular 2のすごいところ - teratail blog
はじめまして。teratail開発チームでインターンをしている草間(@tkow39)と申します。 来年4月1日よりレバレジーズ株式会社に入社予定となっています。よろしくお願い致します。 今までは主にフロントエンドを担当し，バックエンド，テストなどもサポートする形で開発していました。 少し期間が空いてしまいましたが，10/3(月)に開かれたAngular 2入門者の会でLTしました。 connpass.com Angular 2熟練者の方からAngular 2の良さや楽しさとアドバイスを色々教えていただき，今後もAngular 2を使って何かを作ってみたいと思いました。 そこで，今回はプロダクトに生かして行く上でこれはすごいと思ったところと，使ってみて良かったところの4点を入門者として紹介していきたいと思います。 更新が即座にされるサーバ環境がすごい 公式のチュートリアルを試してまずびっくり
React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る
React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る 白石 俊平（HTML5 Experts.jp編集長） 読者の皆様こんにちは、編集長の白石です。 先日ふとしたきっかけで、本サイトの認定エキスパートでありアシアル株式会社の社長でもある田中 正裕さんと、Web技術について語り合う機会がありました。 ReactやAngular2といった次世代のアプリケーションフレームワークが存在感を増す中で、UIを構築するためのフレームワークはどう進化するのか？ これらのアプリケーションフレームワークをベースとしたIonic2やOnsen UI2と言ったUIフレームワークについて、それぞれの立場から語り合ってみました。 （田中さんはOnsen UI2の開発者、白石はIonic2をかなりヘビーに使い倒しています） Progressive Web Apps (PWAp
Angular2入門 Component編 その1 | Webシステム開発／教育ソリューションのタイムインターメディア
Angular2は、コンポーネント志向なJavascriptフレームワークです。 画面一つ一つの要素を部品化しコンポーネントとして切り出すことで、保守のしやすいソースを記述することができます。 今回は、Angular2の基本的な機能であるComponentの使い方を説明いたします。 Angular2 新規プロジェクトの作成 前回、Angular2 開発環境構築編 を書いてから随分な時間が経過してしまいました。 2016/08/04 時点でAngular2 のバージョンは、 2.0.0-rc.4 です。 前回記事を書いた時点では Angular2.0.0-beta.0 を使っていましたが、 beta.0 からバージョンが上がるごとにびっくりするようなBreaking Changeが幾度と無く発生し、 前に書いたコードはDeprecateなコードとなってしまいました。 Angular2.0.0
AngularJSアプリの入力生産性を向上する3種のライブラリ
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <!-- （1）Angular Wizard本体とスタイルシートをインポート --> <link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css" /> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script> <script src="scripts/wizar
[AngularJS 1]ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理
はじめに デザイナーにとって非同期通信は1つの壁かなと思います。 自分もそうでしたが非同期処理を理解せずにjQueryでAjaxを行い、別の関数（B）から非同期通信の戻り値にアクセスしようとすると取得できている時とできていない時があるわけですね。非同期なわけですからデータの取得状況にかかわらず関数（B）は実行されるわけです。 Webサイトにちょっとしたデータを表示するだけであればコールバックで処理するだけで事足りるわけですが、AngularJSで作るような複雑なアプリケーションだとそうもいきません。ログイン認証を済ませてユーザー情報を取得し、ユーザーの権限に合わせて情報を何種類か取得しようとするとコールバックが深くなり（コールバック地獄）、加えて特定の処理だけを行うことができずとても不便です。処理方法としても欠点がありメンテナンス性も悪くなります。 そこで今回使うPromise(Defer
![[AngularJS 1]ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
TypeScriptとAngularJS「サービス」 - かずきのBlog@hatena
サービスというものは、シングルトンで管理されるコントローラあたりから使うものみたいです。作り方はコントローラと大して変わらないけど、モジュールのserviceメソッドで登録するらしい。 ということで、サービスとスコープとコントローラを定義してみた。サービスでは、Promiseを使ってデータを返すようにしてみました。本当は非同期になるはずなんですが、今回はさくっと返すようにしてるので、Promiseにした意味はないですが…。 AngularJSのPromiseはng.IQServuce（$qでインジェクションされる）で使うことができて、defer, resolve, reject, promise, thenなどおなじみのメソッドが使えます。 ということで、一連のコードは以下のようにしてみました。 // サービス class MyService { constructor(private $
AngularJS x TypeScript でちょっと本格的な TODO アプリを作ってみる – AngularJS + TypeScript ＃2 | PSYENCE:MEDIA
AngularJS x TypeScript でちょっと本格的な TODO アプリを作ってみる – AngularJS + TypeScript ＃2 wakamsha 2015.05.18 426 5735224110 2015年5月23日 controllerAs について追記しました。 はじめに とりあえず何かアプリっぽいものを作ってみようということで、定番の TODO アプリに挑戦してみようと思います。 ググればいくらでも情報は出てきますが、この記事では以下にあるようないかにもチュートリアルっぽいものからもう一歩踏み込んで、より実践的かつ規模の大きな案件にも応用出来るような作りを目指してみます。 AngularJS 1.2 日本語リファレンス | js STUDIO AngularJS • TodoMVC サンプルコードはこちらからどうぞ。 wakamsha/angular-dem
AngularJS開発に便利なgulpプラグインと設定 - エンジニアをリングする
この記事はAngularJS Advent Calendar 2014の11日目の記事です。 私がAngularJSでアプリ開発した時にすごく便利だったgulpタスクの組み合わせを紹介しようと思います！ gulp-concat gulp-tap gulp-ng-annotate gulp-concat AngularJSアプリは1モジュール1ファイルにする場合も多いかと思いますが、そうなるとどんどんファイル数が増えて読み込みがとにかく大変です。 ディレクティブが展開されない！と思ったらそのディレクティブを定義したjsファイル読み込み忘れてたとかね・・・ なのでjsファイルはgulpタスクでひとつにまとめてからそれだけ読み込むと、ファイルが増えてもHTMLでの読み込みを増やさなくていいのでスムーズです！ ファイルをひとつにまとめてくれるのがgulp-concatです！ var concat
MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由 - Mozilla Open Web Day in Tokyoを終えて - albatrosary's blog
MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです： JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
