タグ

angular2に関するWINGSのブックマーク (33)

  • 【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita

    はじめに Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。 多種多用なフレームワークがある中で、今回は主にwebサービスフロントエンドで用いられるJavaScriptフレームワークをまとめました。 それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので記事では省略致します。 こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです! 特徴 Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。 HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。 シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレーム

    【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita
  • Marginalia

    2023 2023-07-27 読んだ 2023-Q2 #日記 #読書 2023-07-19 発表スライド『New in Angular』 #io23jp #presentation #Angular 2023-06-25 PHPカンファレンス福岡遠征を終えて #phpconfuk #日記 2023-06-24 発表スライド『DOMのテストがどんどん書きたくなるTesting Libraryの世界への招待』 #presentation #testing #Testing Library 2023-06-23 Notion AIがslugを作ってくれるらしい #雑記 #Notion 2023-06-22 発表スライド『Signalsとはいったい何なのか』 #presentation #Angular #Signals 2023-06-08 Signals 雑記 (2023-06-21) #

    Marginalia
  • Angular 2 — Improve Performance with trackBy

    The Problem:When you need to iterate over a collection in Angular 2, you will probably use the ngFor directive that will instantiate a template once per item from the collection. If we need at some point to change the data in the collection, for example as a result of an API request, we have a problem because Angular can’t keep track of items in the collection and has no knowledge of which items h

    Angular 2 — Improve Performance with trackBy
  • [意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita

    このポストは以下の記事を、筆者の許諾を得て意訳したものです。 JavaScript Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、意訳) はしがき もしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。 モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。 それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。 このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。 注:簡素化のために、このポストは

    [意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita
  • I am mitsuruog | Angular2 Unit Testing - XHRのテスト

    Angular2 の実装の方法は記事をよく目にする機会が増えたので、テストについての自分が困らないように調べてみたシリーズ。 今回は XHR が関連するテスト。 (注意)Angular 2.0.0-beta.9 をベースに話しています。 E2E テストは protractor がそのまま利用できると思うので、ここでのテストはユニットテストの話です。 Angular2 Unit Testing 準備 基 Mock, Spy の基(TBD) DOM のテスト XHR のテスト Component のテスト(TBD) Service のテスト(TBD) Pipe のテスト Directive のテスト(TBD) カバレッジ XHR のテスト XHR 通信が関連するテストについて紹介します。 Angular1 には XHR 通信を行う$httpサービスがありました。 XHR 通信をテストする場

    I am mitsuruog | Angular2 Unit Testing - XHRのテスト
  • Simple Observable Unit Testing in Angular2

  • web-animations-jsで策定中のAPIを先取りする - Qiita

    この記事はJavaScript Advent Calendar 2014の記事でもなければ、Frontrend Advent Calendar 2014の記事でもありません。 べ、べつに書こうと思ったらすでに埋まってたとかじゃないんだからねっ! CSSアニメーションやSVGアニメーションなどを抽象的にタイムラインベースで扱うことのできる web-animations-js が便利なので使い方などを書いておきたいと思います。 公式サイト:https://www.polymer-project.org/platform/web-animations.html リポジトリ:https://github.com/web-animations/web-animations-js これは何? web-animations-jsは、 Web Animations API をJSで実装したPolyfill

    web-animations-jsで策定中のAPIを先取りする - Qiita
  • Angluar2のクイックスタートとチュートリアルを実施 - その7 - Qiita

    前回の投稿Angluar2のクイックスタートとチュートリアルを実施 - その6の続きです。 前回作成したソースを使用します。 章ではhttpを通してリモートサーバーのweb APIを呼び出し、データの取得・追加・削除する方法を学びます。 章もかなり長いです... 投稿の参照元(英語) HTTP - ts 章で学ぶこと 前述のほか、以下を学びます。 インメモリweb APIの作り方(深入りはしません) Observableの使い方 尚、章のメインテーマはAngularのHTTPライブラリの紹介ですので、インメモリwebAPIについての説明は主題ではありません。より多くインメモリwebAPIについて学習したい場合、HTTP client chapter(英語)を参照ください。インメモリwebAPIはデモンストレーションのために使用しています。何か替わりになるリモートサーバをお持ちであ

    Angluar2のクイックスタートとチュートリアルを実施 - その7 - Qiita
  • FN1701007 | Angular 2入門 06: HTTPサービスでデータを取得・保存する | HTML5 : テクニカルノート

    ID: FN1701007 Technique: HTML5 / JavaScript Package: Angular 2.1 「Angular 2入門 05: サービスをつくる」(以下「Angular 2入門 05」)でつくったサンプル「Angular 2 Example - Tour of Heroines: Part 5」は、データをファイル(mock-heroines.ts)から読み込み、オブジェクトのデータを得て、書き替えたりしていました。このデータをHTTPサービスにより、リモートで扱えるようにします。 01 HTTPサービスでデータを読み込む HTTPサービスで使うHttpModuleは、アドオンの@angular/httpモジュールからimportします。コアのモジュールには含まれていないのでご注意ください。もっとも、「Angular 2入門 01」(02「HTMLドキュ

    FN1701007 | Angular 2入門 06: HTTPサービスでデータを取得・保存する | HTML5 : テクニカルノート
  • Angular2の使い方 - Qiita

    記事の内容をrc.4に対応しました 動作サンプルについてはまだBeta版のままなのでご了承ください (2016/08/04) Angular2(rc.4)の使い方について簡潔にまとめてみました 細かい部分は省くので、公式サイトやQiita内に素晴らしい記事があるので そちらを参考にしてください インストール npm install @angular/common@2.0.0-rc.4 @angular/compiler@2.0.0-rc.4 @angular/core@2.0.0-rc.4 @angular/platform-browser@2.0.0-rc.4 @angular/platform-browser-dynamic@2.0.0-rc.4

    Angular2の使い方 - Qiita
  • Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita

    トピック Angular2 CORE DOCUMENTATIONのGUIDEの翻訳です。 DOCUMENTATION OVERVIEW - ドキュメント概要 - ARCHITECTURE OVERVIEW - 構文概要 - DISPLAYING DATA - データ表示 - USER INPUT - ユーザー入力 - FORMS - フォーム - DEPENDENCY INJECTION - 依存性注入 - STYLE GUIDE - スタイルガイド - 注意1)ここに掲載されていない項目は、Angular2 CORE DOCUMENTATIONのGUIDEを直接参照してください。 注意2)2016年11月22日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている

    Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita
  • NgModule導入について · Angular Info

    どうも、らこです。RC.5のリリースがおそらく来週と迫っていますが、多くのバグ修正と共に新しい機能が追加されます。 NgModuleはこれまでのAngular2で不便だったこと、複雑だったことを一気に解決してくれる新機能です。 RCも大詰めとなったこのタイミングで導入されることに困惑するかもしれませんが、 ぜひとも対応してもらいたいと思います。 はじめに NgModuleは完全に新しく導入されたAPIであり、既存のAPIへの破壊的変更ではありません。 ただし、従来の方法は非推奨となり、stableリリースの段階では廃止される予定です。 RC.5からは移行期間に入るものと思っていてください。 NgModule NgModuleの概要についてスライドを作ってあるので、これをベースに解説します。 NgModuleの概要 NgModuleは、ディレクティブやパイプ、サービスなどをひとまとめにしたモ

    NgModule導入について · Angular Info
  • Angular 2のローカル変数とexportAs

    Angular 2には local variables (ローカル変数)という機能があります。 公式のチュートリアルやデベロッパーガイドを読んでいると突然登場してみなさんを惑わしているかもしれません。 しかし、この機能はAngular 2を使いこなす上でとても重要なものなので、ぜひ知っておきましょう。 ローカル変数と # シンタックス ローカル変数とは、コンポーネントのテンプレート中で定義して使用できる変数のことです。 ローカル変数には原則として、ローカル変数を定義した要素のインスタンスが代入されます。 ローカル変数の定義は # シンタックスを使います。 次の例では、 input 要素をローカル変数 i として定義し、 ボタンをクリックするときに input 要素の値をコンポーネントに渡しています。 @Component({ selector: 'my-app', template: `

  • 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
  • Angular 4でcanvas要素を扱う方法 - Qiita

    Angular 4の話 AngularHTML5のcanvas要素とどうやったら連携できるのか調べてみました。TypeScript 2.2, Angular 4での書き方です。 動作サンプル 動作サンプルはPlunkerにアップしておきました。 Angular 4 Example - How to use Canvas Element 手順の解説 template内のセレクターにID値を割り当てておく。ID値の割り当て方はAngularの記法を使う。(例 : <canvas #hoge></canvas>) クラスではAfterViewInitインターフェースをimplementsキーワードで指定。これによってngAfterViewInit ()メソッド(ライフサイクル)の実装が義務付けられる。 クラスのメンバー変数にViewChildアノテーションでID値を使って関連付けを行う。 ng

    Angular 4でcanvas要素を扱う方法 - Qiita
  • Angular2のFormについて(その1) - Qiita

    概要 Angular2とionic2でformを使った際に,バリデーションが少し面倒だったので,Angular2のformについて調べてみました.この記事は The Ultimate Guide to Forms in Angular2 を元にしています.元の記事は少々長いため,以下のように二部に分けて記事にします.うまく訳せていないところもあるので,元の記事はご自身で確認いただければと思います. なおionic2に関しては第2部の最後に,フォームのサンプルを書いてみたいと思います. 第1部 FormControl FormGroup FormBuilder バリデーション 第2部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第1部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい

    Angular2のFormについて(その1) - Qiita
  • Angular2 における Injector の話 - Dolpenの日記

    ちょっと機会があってみんなで Angular2 + TypeScript TUTORIAL: TOUR OF HEROES を少しずつ読んで行く勉強会をやっているのだが、コンポーネントの依存性解決に関してかなり独特な世界観があったのでちょっとまとめる。 Dependency Injection (依存性の注入)って何? 依存性とは あるクラスに特定の変数や定数、インスタンスが入ってしまっている状態。 class Car { engine:Engine = new HondaEngine(); tire:Tire = new BridgestoneTire(); } こんな例だと「この車はHONDAのエンジンとブリヂストンのタイヤに依存している」と言える。 これだと何が問題になるか Car クラスの動き(特定のメソッド)をテストすることを考える。 HONDAのエンジンとブリヂストンのタイヤを

    Angular2 における Injector の話 - Dolpenの日記
  • Angular 2の*シンタックス - Qiita

    どうも、らこです。先日主催したイベントで「Angular 2の*記号が何の意味があるのかわからなくて気持ち悪い」という声を聞き、意外に知られてないと思ったので一度きちんと書いておこうと思います。みなさんのAngular 2への理解の手助けになれば幸いです。 なお、記事はAngular 2 Beta.14時点でのものです。 Angular 2におけるディレクティブ Angular 2は基的にコンポーネント志向であり、アプリケーションはコンポーネントで組み立てます。ただし、Angular 1と同じようにHTML要素やコンポーネントを修飾するためにディレクティブを使うことができます。 次のmyDirectiveディレクティブは、付与した要素のスタイルを変更し、colorをredにします。 import {Component, Directive, ElementRef, Renderer}

    Angular 2の*シンタックス - Qiita
  • 必ず覚えておきたい! Angular2でコンポーネントの子要素を参照する方法

    Angular2でアプリケーションを構築する時に、 親コンポーネントから子コンポーネントを操作したいことが多くあります。 例えば、子コンポーネントの値を取得・変更したい時や、DOMを取得したい時などが挙げられます。 Angular2では、ViewChildren、 ContentChildren を使用することで、 親要素から子要素を参照することができます。 今回はViewChildren、ContentChildren を使用した、子要素の参照方法を紹介します。 ViewChildren とは コンポーネントのテンプレートの中に配置された子要素をViewChildren と呼びます。 使い方は、@ViewChildren もしくは @ViewChild デコレータを @angular/core からインポートして使用します。 @ViewChildren は複数個取得でき、@ViewChi

    必ず覚えておきたい! Angular2でコンポーネントの子要素を参照する方法
  • Angular2でdebounceを設定する

    Angular2でのdebounce(処理の間引き)は、RxJSの機能を使うと簡単に設定することが出来ます。 今日はdebounceの設定方法を紹介します。 debounceって何? プログラミングでの「間引き処理」は頻繁に使います。 間引き処理というのは、連続した処理がある場合に、100ミリ秒に一度実行したり、最後の処理の500ミリ秒後に実行するなど、実行回数を間引く(減らす)ことを指します。 今回紹介するdebounce は、「連続処理される、最後の処理の500ミリ秒後に関数を実行する」間引き処理のことを言います。実行は1度きりです。 今回は紹介しませんが、他にも throttle があります。 使い方 今回の例として、検索窓の入力での間引き処理を設定してみましょう。 例えば、検索窓に入力した文字列をサーバに送る場合を想定してみます。 動きはデモを確認してみてください。 キーボードの

    Angular2でdebounceを設定する