ionic2 on Angular2 - Qiita
Angular2 Advent Calendar 12日目 です。 僕は ionic が好きなので、ionic の話をしたいと思います。 ionic ionic は AngularJS ベースの UI フレームワークです。CSS/JavaScript の UI コンポーネント集という点に留まらず、cordova を同梱してハイブリッドアプリを作成することが可能です。また、デバイス上でのデバッグツールや、痒いところに手が届くコマンドラインツール等（例えば地味に面倒くさいアイコン用画像をリサイズとか）のエコシステム全体を包含する環境になっているという点が特徴的で、僕が好きなところでもあります。 弱点は Angular に密結合している点です。UIパーツがディレクティブで定義されているので、「ionic の UIコンポーネントは使いたいけど、Angular 以外のJSフレームワークを使いたい」み
Angular 2 + Ionic 2 を始めました - Qiita
皆さんはじめまして、@creativewebjpです。Angularは初めてですがよろしくお願いします。 最近、Ionic 2 を使い始めたので Ionic 2 のことを書こうと思って参加しました。しかし、Angular 2 がベータになる前に怒濤の勢いで破壊的変更をおこなっていたのですが、それが Ionic 2 にも影響を与えているようで、最近は Ionic 2 の変更が多くエラーが多発します。自分は初心者なので対応が難しい状況で、もう少ししたら Ionic 2 もベータになると思うので、それから本格的に使おうと思っています。 それで、Ionic 2 のことだけだと内容がないので Ionic 2 を使いたいと思った理由も書くことにしました。なお、自分は、Webの開発・運営していて、Googleアドセンスで収入を得ています。 今日みたら、ionic-frameworkは2.0.0-alph
抄訳: Angular 2のテンプレート駆動フォーム - Qiita
Template-driven Forms in Angular 2 Original: Template-driven Forms in Angular 2 Written by: Pascal Precht Translated at: 04/07/2016 Angular 2におけるテンプレート駆動フォーム Angularはフォームを組み立てるのに3つの異なる方法を用意しています。 1つはテンプレート駆動、アプリケーションコードを一切必要としない方法です。 そしてローレベルAPIを使ったDOMを一切必要としないモデル駆動の方法と、 最後はハイレベルのAPI、すなわちFormBuilderを使ったモデル駆動の方法です。 これらの異なる手段からわかるように、目標を達成するための道具がいくつもあるかもしれないのは当然のことです。 しかし混乱を招いてしまうので、この記事ではAngular 2
JSPM？system.js？webpack？まだAngular2/TypeScriptのBundle環境構築で消耗してる話 - Qiita
注) この記事は試行錯誤の記録です。従って間違いが数多く含まれている可能性が高いです。もっと良い方法を知っている方はぜひ教えてください。 現段階の結論 注） 現在は、rollup.jsでバンドルしています。 system.jsを利用しています。 tsconfig.json, typing.jsonを適切に記載してからtscとuglifyjsを利用して minifyすることで、最終的なfootprintを5kbまで減らすことができました。 （system.jsでxhrが大量に走る問題は下記（system.jsの項）の通りmapとpackageの記載を削除することで解決しました。） 結局、現在はgithubでコミュニティベースで活発に開発されているmgechev/angular2-seed（Angular2公式Githubアカウントのangular/angular2-seedとは別もの）の環境
React,Angularに挫折した人たちへ - Qiita
概要 フロントエンド(CSSテク,DOMの概念など)にそこまで明るくない人向けに JSだけでWeb画面が作れるようにフレームワーク(mofron)を作成しました。 React,Angular的な話は出てきません。 経緯 jQueryプラグインしんどい 親切な誰かが作ってくれた様々なjQueryプラグインをありがたく活用しています。 CSSなどを知らなくても優れたデザインと機能を持ったUI部品を構築できて非常に助かっています。 ただ、セレクタ(id名やらclass名やら)がとても面倒くさいです。。 HTML側で定義したid名などをJS側で一致させるように指定する必要があります。 動的にタグを生成したりすると、もっとややこしくなってきて手に負えません。 じゃReact,Angularに乗り換えましょうか?？ 専業タイプと兼業タイプ Web開発に携わる人には専業タイプと兼業タイプがいると思ってい
Angular 2アンチパターン集 - Qiita
@armorik83です。Angularアドベントカレンダーの4日目となる本日は、かつて好評だった拙記事"AngularJSアンチパターン集"にあやかって、Angular 2（以下、単にAngularと表記したときは2.0以上4未満を指す）について気をつけた方がよい点――アンチパターンをまとめたいと思います。 Angular 2.xでアンチパターンは起こりうるか Angular 1系とは大きくAPIが変わったAngular 2系。APIが大きく変わった理由として、Web標準により近い構成を取れるようにする目的がありました。例えば、angular.module()ではなくTypeScriptのimport fromをベースとするソース分割の仕組みであったり、ES2015 classを標準としたComponentやServiceの定義であったり、$qではなく標準のPromiseを使ったりなどで
AngularもJasmineもまったく分からんし単体テストもあんまやったことないマンが学んだAngular5でのテスト - Qiita
テストされるファイル Jasmineは「○○.spec.ts」なファイル名のファイルを勝手に実行してテストしてくれる。 立派。 describe テストはこの下に記述する。 第一引数はテスト環境の説明。 第二引数はテストの処理を行うラムダ。 describeを複数書けば、それぞれ独立したテスト環境でテストできる。 テスト専用の環境を逐一立ち上げて、その中でテストするイメージ。 実際のテストは第二引数で渡したラムダの中で行う。 describeを入れ子にすることもできる。 例 describe('キャッシュがない場合のテスト', () => { キャッシュがない状況を作る処理 実際のテスト1 実際のテスト2 実際のテスト3 describe('しかもサーバが死んでるときのテスト', () => { サーバが死んでる状況を作る処理 実際のテスト1 実際のテスト2 実際のテスト3 }); });
Angular Animations (+v4) メモ - Qiita
Angular Workshop - Animationsに参加してきたので忘れないうちにメモ。 スライドは http://slides.com/gerardsans/ng-japan-animations#/ です。 Gerardさんの説明がわかりやすく途中に手を動かす練習問題もあって大変良かったです Angular Animationって？ Web Animations APIの上に実装されている まだ実装していないブラウザもあるのでそのときはpolyfillを使う Web Animations APIはローレベルでできないこともあるので、Angular Animationを作った CSS Transitions, CSS Animationsと似たAPI CSS Transitions 初期状態・終了状態を定義する 途中の状態は自動的に計算される アニメーションするプロパティを指定す
Angular + Typescriptをブラウザでデバッグしたい - Qiita
はじめに Angularプロジェクトをブラウザでデバッグする際に、**TypescriptファイルにBreakPointを設定する方法**がわからなかったので調べた。 環境 Angular: 2.4.7 angular-cli: 1.0.0-beta.28.3 webpack: 2.2.0 Google Chrome: 53.0.2785.116 各種設定ファイルは、Angular CLIでプロジェクト作成後、デフォルト設定のまま エディタはVisual Studio Code(1.7.2)を使用 デバッグ方法 Angular CLIで雛形プロジェクトを作成した後、ng serveコマンドで開発ビルド&実行する Chromeのdeveloper toolsを起動する Sourcesタブを選択 webpack://**配下にTypescriptファイルが配置されている**のでBreakPoi
React でも Angular みたいに DI したい！ - Qiita
When 2017/02/07 At Meguro.es #8 @ アカツキ 自己紹介 ちきさん (Tomohiro Noguchi) Twitter/GitHub/Qiita: @ovrmrw ただのSIer。 Angular Japan User Group (ng-japan)スタッフ。 アカウントIDの由来 the day after tomorrow overmorrow(俗語) 略して ovrmrw 「先を見据えて」よりさらに先を、みたいな感じです。 (よく聞かれるので) (ここからInversifyJSの基本の話) === GitHubリポジトリ ovrmrw/inversify-mock-example モチベーション: ReactだってDIしたい InversifyJS a library for Inversion of Control Angularのように @inj
18f718df07c28965b7b3
これまで、サーバーレスなSPA on AWSを実現しようとした場合、Cognitoによる認証部分の実装には、amazon-cognito-identity-jsというAWS製のJavaScriptライブラリを使うのが主流でした。 ただ、amazon-cognito-identity-jsを使う場合、このライブラリ本体の他にAWS SDKなどを含めた複数のライブラリを読み込む必要があったり、用意されているAPIの使い勝手が良くなかったりと、多少の辛みを感じる部分がありました。 今回は、AWSより新しくリリースされたAWS Amplifyというライブラリを使ってAngularアプリケーションにCognitoによる認証機能の実装を行ってみたいと思います。 AWS Amplifyの概要は、本アドベントカレンダー4日目の nakayama_cwさんがAWS AmplifyでサーバレスWebアプリの構
Angular Materialでマテリアルでレスポンシブなリストを実装する - Qiita
更新履歴 2018.04.05 - 5.0.0-beta.13 (2018-02-22) におけるBREAKING CHANGESに対応 Angular Material (material2)は2017/10/06時点で未だbetaバージョンですが、レスポンシブルでマテリアルデザインなSPAを作る際にはドキュメントも充実しており手軽に美しく実現できて素敵です。 今回はAngular Materialの グリッドリスト とangularの フレックスレイアウト を使ってレスポンシブなデザインを構築しました。 環境 @angular: 4.4.3 @angular/material: 2.0.0-beta.11 @angular/flex-layout: 2.0.0-beta.9 素のグリッドデザイン Angular Materialで提供されているGrid listをそのまま使うと、幅にあ
Angular 2 の初期化・Component のコンパイル周りのソースを読んでみる - Qiita
年末のイベントで何度か Angular 2 について紹介させていただいたのですが、自分で話しながらよくわかっていないなと感じることしきり。時間ができたらしっかり理解したい！と思っていました。理解するにはソースを読むしかない！ということで Angular 2 のソースを読んでみます。 使い方については本家ドキュメントを始めいろいろなところに書かれているので、内部構造について調べます。Change Detection, Dependency Injection 周りは @laco0416 さんによってカバーされている/される予定（12/23）なので、初期化・Component のコンパイル周りに挑戦してみたいと思います。 AngularConnect のキーノートでは、Angular 1 ではランタイムで何度も HTML のコンパイルが走っていたが、Angular 2 では初期化時に一度走るだ
Angular 2のルーティングで遅延処理を挟む方法 - Qiita
インターフェースを実装する (たぶん必須) ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateとOnDeactivateインターフェースを指定。すると、routerOnActivate()メソッドとrouterOnDeactivate()メソッドの実装が義務付けられます。これがルーティング時のライフサイクルイベントとなります。 import {OnActivate} from "angular2/router"; import {OnDeactivate} from "angular2/router"; import {ComponentInstruction} from "angular2/router"; class ほげほげくらす implements OnActivate, OnDeactivate { /** 遷移で入ってきたとき */ router
Angular + Firebaseで作ったWEBサービスをリリースしたので、たまった知見を書き出してみる - Qiita
はじめに 以前からちょこちょこ新しいWEBサービスを作っているということをQiitaの記事に掲載していましたが、このたび[SCORERA（verβ）」を正式にリリースしました。（2019年3月にサービス終了） サービス構築、リリースにあたって色々と知見がたまったので、作成過程で詰まったことや、リリースにかかる作業のうち技術的な側面のものを中心に公開しておこうと思います。 目次 前提 どんなサービス？ 使用している技術 トピック SCORERAのディレクトリとモジュール構成 RxJSの状態管理 外部ライブラリの選定 FirebaseのRealtime DatabaseとFirestore クライアントサイドのエラー取得 AngularプロジェクトのSEO 技術面以外でやったこと、やること 前提 どんなサービス？ 「SCORERA（verβ）」はスポーツ競技や文化系競技（将棋、ゲームなど）とい
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しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angularでleafletを使っちゃうぞ - Qiita
Angular アプリケーションに ng-bootstrap をインストールする - Qiita
Angular CLI + Onsen UI 2 によるアプリ開発 - Qiita
[Angular] Angular CLIでプロキシを利用する - Qiita![[Angular] Angular CLIでプロキシを利用する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/dceec5636c971120afdd462812720d92a1db965e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTkzMzQyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTAwODg4MTU5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTdkM2Q3MzZlZDRkOWEyOThkYmM1YzQ3NmYzNmI1MzFh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df6ef6496ea559ea2ba01a9233a5c9b84%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhciU1RCUyMEFuZ3VsYXIlMjBDTEklRTMlODElQTclRTMlODMlOTclRTMlODMlQUQlRTMlODIlQUQlRTMlODIlQjclRTMlODIlOTIlRTUlODglQTklRTclOTQlQTglRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hMWNhOGJlMjk2NzIzOWQwNzQyMjRmMTU5MTQxM2RhMg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTNmMDNkNmIxNjdmOWNjYjdjYTFiYzcxMjgwODFjOGE4%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De202f17442b3e398d4f0b7b59e031195)
