AngularJSで、ブラウザのJavascriptエラーをサーバーに送る - Qiita
クライアントのエラーをキャッチする この記事を読みました。 WEBブラウザで起きた JavaScript のエラーをサーバに送りたい 素晴らしいアイデアですが、AngularJSでは、window.onerrorが発火しないため、通常のやり方が通用しません、とのこと。 そのため、$exceptionHandlerという、例外を集約しているサービスをオーバーライドする必要があります。 以下のように書けば問題ないかと思われます。 angular.module('myApp') .factory('$exceptionHandler', function($injector) { return function errorCatcherHandler(exception) { // オーバーライドしたためブラウザにエラー出力しないので、ここからブラウザにエラー出力する console.error
2015年Angular界隈総まとめ - Qiita
Help us understand the problem. What is going on with this article? メリークリスマス！@armorik83です。いよいよ今年も残すところあと1週間となり、年の瀬感が湧いてきました。Angular界隈からみた2015年といえば、なんといってもAngular 2の開発でしょう。私事ですがAngularユーザグループ"ng-kyoto"を結成したのも今年で、秋からは転職し東京に引っ越すなど、エンジニアとしても大きな躍進を遂げた一年です。 アドベントカレンダー最終日となる本日は、そんな2015年のAngular界隈について振り返ってみましょう。 1月 Angular 2 Angular 2といえば、2014年10月のng-europeにて墓標が乱立した発表が衝撃的で、そこからの印象は「AngularJSが大きく変わるんだ」というも
npm i angular2してHello World!するところまで - Qiita
【160325追記】この記事はAngular 2 alpha時代に初稿を仕上げ、それ以降は変更にあわせて保守を続けていましたが、そろそろ差が大きくなってきたため改稿版として別の記事を用意しました。今後はそちらをご覧ください。 @armorik83です。初日である昨日は、このアドベントカレンダー最大のサプライズとして@btford氏に寄稿していただきました。アドベントカレンダーの立ち上げ直後からオファーし、日本の「アドベントカレンダー」という特殊なTech系の事情を説明し、Angular 2のカレンダーをぜひ飾ってほしいという旨で依頼したことを覚えています。直前になって、時差で向こうはまだ11月なため日本のカレンダー開始に気付いていなかった、という笑い話も乗り越え、公開にこぎ着けたことを喜ばしく思います。 Thank you so much for contributing! Angular
Angular JSの良質チュートリアルまとめ - Qiita
随時更新中 日本語によるAngularのTips別チュートリアル AngularJS's tutorial ・とても丁寧に作りこまれていて、わかりやすい 公式チュートリアル AngularJS ・基本困ったらここ Yeomanのチュートリアル Step 10 ・かなり質が高い。 ・自分がチュートリ作る際にも参考になる。 angular-local-storage GitHub Demo ・上記のチュートリで使われるモジュール Further Reading THE PAST, PRESENT & FUTURE OF LOCAL STORAGE FOR WEB APPLICATIONS ・これは英語だけどかなりおすすめ ・Local Storageの背景とかも理解できた MongoDBも接続したい YEOMANを使ってMEAN（MongoDB + Express.js + Angular.j
EventEmitterをPromiseに対応させる - Qiita
react-router@1.0.0-rc3を使っていると、onEnterでStoreを更新して、終わってからRouteへ移動したい。Angularで言うui-routerのresolveが欲しいと思っていました。 EventEmitterを継承して.emitをオーバーライドすれば対応可能です。軽くテストを通したライブラリも公開しています。1 具体的には下記のように実装します。 // Dependencies import {EventEmitter} from 'events' // Public class AsyncEmitter extends EventEmitter{ emit(event,...args){ let promises= [] this.listeners(event).forEach(listener=>{ promises.push(listener(...
AngularJS + CoffeeScript + Protractor + GruntでE2Eテスト環境構築 - Qiita
前提 Yeoman + AngularJS Generatorを使って構築し、Gruntfile.jsをGruntfile.coffeeへ書き換えた環境を前提としています。 Gruntfile.coffeeに関してはこちらをどうぞ http://qiita.com/rneuo/items/c7d449a7361fe9cea236#2-3 概要 インストールモジュール説明 AngularJS + CoffeeScript + Protractor + Gruntでテスト環境を構築するにあたって、下記のnodeモジュールを使って構築してみたいと思います。 Protractor本体 https://github.com/angular/protractor CoffeeScriptでspecを記述するProtractorプラグイン https://github.com/lebek/protrac
Phoenix + AngularJS で Markdown 同時編集ツールを作ってみる - Qiita
Phoenix + AngularJS で Markdown 同時編集ツールを作ってみます。 イメージとしては HackMD のようなものを目指します。 ことの始まり ElixirConf 2015 のタイムラインを眺めていたら、 I'm collaboratively editing a doc with 60 of my closest @ElixirConf friends. #phoenixframework pic.twitter.com/PlVexa3Anx — David Raffauf (@draffauf) 2015, 10月 1 Phoenix で同時編集ツールを作っている人がいて、「こういうのって自分でも作れるのかな」と漠然に思ったのがことの始まり。 完成イメージ 結論、こういうツールができました。 GitHub で公開しています。 collabo_marker :
Protractor の Angular 同期と Angular アプリでないページのテストについて - Qiita
こわくない Protractor という記事で書けなかった Angular 同期関連についてです。 Angular との同期 Protractor は Angular プロジェクトの一部として開発されているだけあり、Angular に特化した機能があります。その一つが Angular と同期してくれるというもの。 ここで言う同期というのは、具体的には $digest loop, $timeout や $http による AJAX リクエストが完了するまで待ってくれるということです。これにより、他の E2E テストフレームワークのように sleep したり、期待する値が取得できるまでポーリングするタイプの wait をする必要がなくなります。より速く不確実さを排除したテストを書けるわけです。 直接実行するには browser.waitForAngular() を呼びます。これはざっくりいうと
今流行りの「MEANスタック」についてまとめてみる(Mongo, Express, Angular, Nodeで作るWEBアプリケーション) - Qiita
今はやりのMEANスタックについてまとめてみる(Mongo, Express, Angular, Nodeで作るWEBアプリケーション) 海外でじわじわ人気を獲得し始めている うわさの「MEANスタック」とはなにか？ まとめてみました。 MEANとは 合わせて読みたい M = MongoDB 従来のRDBMSとは異なる、NoSQLというデータベースシステムによる ドキュメント指向型データベース。 MongoDBについてまとめてみた E = Express Node.jsの軽量Webアプリケーションフレームワーク Expressについてまとめてみた Expressを学ぶチュートリアル形式の記事・コンテンツまとめ A = Angular オープンソース(MITライセンス)のJavaScript用 MVCフレームワーク。 Angularについてまとめてみた Angular JSの良質チュートリア
Protractorを利用してAngularJS appsをテストする - Qiita
http://qiita.com/drafts/b60766d9017a1eaeada0/edit （Testing AngularJS apps with Protractor の訳） もし、AngularJSアプリケーションを開発するならば、テストにはProtractorを使いなさい！なぜかって？ ProtractorはAngularJSアプリケーションのためのend-to-endテストフレームワークで、強力なツールや技術（NodeJSやSeleniumやwebDriverやJasmineやCucumberそしてMochaなど)を結合するような ソリューションの結合に作用する。 AngularJSアプリケーションのテストをより簡単に作るためにSeleniumからのたくさんのカスタマイズをProtractorは持つ。 また、Protractorは、テストにたくさんの"sleeps"や"w
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
Karma+istanbulを利用して、AngularJSで構築したプロダクトのCoverage計測 - Qiita
Advent Calendarを通じて、公式ページの各種情報を参考に文章化したことと他の方々の投稿を読み進めることによって、AngularJSの基本的なところを大分理解できてきました。改めて、テストを通して開発できるAngularの良いところやUJSに沿った形の仕組みを構築でき、無理なくHTMLページをリッチにできる仕組みであることを感じてきています。 当初から、Angularのテストを手軽に行えるところが良いという理由を散々述べてきました。 今回、さらに、テストについて踏み込んだ記事として、若干Angularから離れますが、コードカバレッジの計測方法を取りまとめます。 Angularのようにテストを書き易いフレームワークを導入したとして、製造フェーズをテストファーストにして、テストコードを書いてプロダクトの品質をある程度担保できたとしても、結局、テストコードを書くのは人です。場合によって
AngularJSを選択する見解 - Qiita
jQueryやjQuery関連のライブラリを利用して製造を行ってきたのですが、 テストに苦労しています。人出でやるにも、自動化するにも環境面など準備するのに苦労するため、 JavaScriptのテストをするにあたってもっと簡単に行える仕組みを探していました。 何で気が付いたのか忘れましたが、だれかからの紹介だったような、どこかの記事をよんだような TDDのJavaScript開発には、AngularJSがおすすめであると教えてもらいました。 現状の使いたいと感じている理由を取りまとめると以下のようになります。 HTMLのマークアップに沿った実装が可能 AngularUIを使ってリッチなUIをわりと簡単に書けそう。 TDDやend-to-end testsをベースに製造できるしくみが最初からサポートされている。Ajaxなどはサーバ側 から独立させ、仮で想定したテストが書ける。 HTML側とC
Angular.js レンダリング処理をカスタマイズする - Qiita
Angular.jsを使っていてこんな風に思ったことはないだろうか。 ループ内のDOMをテンプレート化したいな レンダリング処理を部品化してカスタムタグで呼び出したい jQuery UIとかを使いたいけど、どこで処理すればいいのか(document.readyだと新規追加したものに適用されない) そんな願いをかなえるのがAngular.jsのdirectiveです。directiveは、一言で言えば ModelとDOMを受け取ってレンダリング処理(compile)を行う関数 で、これを使って上記のようなカスタマイズをすることができます。 そんなわけで、作成したサンプルはこちら。このコードを使って解説をしていきたいと思います。 テンプレート化する テンプレート化は、以下のようにかけます。 <disp-destination ></disp-destination>、これがdirectiveを
AngularJSのテスト(Unit Test/end-to-end test)って何が良いの？ - Qiita
AngularJSを利用したのなら、絶対にKarmaとか Protractorを活用すべきです。ちゅうか、活用しなさい。と言いたいです。システムを保守フェーズに安定的にメンテナンスするならそう考えるのがふつうになるべき。 （※Protractorについては、こちらの記事がとても参考になります） 例によって「Mastering web application development with AngularJS」を読んで書かれていたポイントを読んだ感想をこちらにまとめてますが、 2章のテスト解説部分に下記の文章があります。 There is a quote saying that writing code without a Version Control system (VCS) is like skydiving without a parachute. Today one would
Protractor × CoffeeScript × AngularJS （導入編） - Qiita
npm install --save-dev coffee-script npm install --save-dev protractor npm install --save-dev grunt-protractor-runner npm install --save-dev protractor-coffee-preprocessor npm install --save-dev grunt-exec coffee-script CoffeeScript のコンパイラ はじめ -g で入れていたのだがプロジェクトの中に入れないと使えなかった protractor angularJS 御用達の E2E テストフレームワーク selenium を angularJS プロジェクトで使えるようによしなにカスタマイズしている grunt-protractor-runner protracto
AngularJS用テストフレームワーク「Protractor」チュートリアル日本語訳 - Qiita
Protractorとは、AngularJSアプリケーションのためのエンド・トゥー・エンド（E2E）テスト・フレームワークです。これはProtractor Tutorialの日本語訳です。 チュートリアル これはシンプルなチュートリアルです。内容は、Protractorをセットアップし、テストを走らせ始める方法です。（訳注：protractorは分度器のことです） 訳注：本チュートリアルのサンプル・リポジトリを作りました。参考になれば幸いです。 準備 ProtractorはNode.jsのプログラムです。動かすには、Node.jsをインストールしておかなければなりません。ProtractorはNode.jsについてくるnpmを使ってダウンロードすることができます。node --versionと打って、Node.jsのバージョンをチェックして下さい。v0.10.0以降でなければなりません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
End to End Test with Headless browser - Qiita
Protractor: AngularJSの次世代E2Eテストフレームワーク - Qiita
gulpとprotractorでAngularJSを自動テストする - Qiita
