こんにちは、らこです。AngularJSのバージョン1.5.0がリリースされましたね！ コードネームは ennoblement-facilitation、ざっくり訳すなら「高尚化促進」でしょうか。コンポーネント志向の「高尚」なアプリケーション設計への移行をサポートするバージョンだということでしょう。 1.5.0ではcomponentの追加をメインに、Angular2へのスムーズな移行を行うための足がかりとなるアップデートです。いい機会なので、 今の自分のAngularJSの使い方がどれくらい古いのか をチェックし、どのようにモダンにしていけばいいのかを知っておきましょう。 ちなみに、1.4までに関しては AngularJSモダンプラクティス - Qiita を参考にするとよいでしょう。 このモダンプラクティスに従ったコードになっていればcomponent()対応はあっという間のはずです。

Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr

ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS This is the first part in a multiple part blog series on building ASP.NET 5 (ASP.NET vNext) apps with AngularJS. In this series of blog posts, I show how you can create a simple Movie app using ASP.NET 5, MVC 6, and AngularJS. ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS ASP.NET 5 and AngularJS Part 2, Using t

最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方

Angular.jsのアドベントカレンダー6日目です。(遅れてすみません汗) 今日は泥臭い?感じの話になります。 この記事は言及している人達の記事やスタイルガイドのまとめという感じなのですが、これからディレクトリ構成を考える初学者の方や，ディレクトリ構成に悩んでるかたの参考になれば幸いです Angular.jsのディレクトリ構成パターン紹介と、利用して感じた考察などのことを書きます。 はじめに LIG主催のAngular.js勉強会 #ng-curry にて、登壇したときの発表内容をまとめようと思っていたのですが、今回のAdvent Calenderを機会に勉強会で話した内容をまとめてみます。 元スライドはこちら -> http://slides.com/sugawararyousuke/ng-curry-2 まとめ疲れたので スライドの前半部分だけの話をまとめます。 このテーマで話そうと

これは AngularJS Advent Calendar 2014 の(12/10)の投稿です。 当初予定していた内容とは違う内容になりましたことにつきまして申し訳ないです。 これから新規のプロジェクトでAngularJSを使おうかと迷っている人のために 自分のプロジェクトで使っているor検証したAngularJSモジュールライブラリを晒したいと思います。 プロジェクト上、CoffeeScriptを使っているため、 コード例がCoffeeScriptになっていることはご承知置きください。 angular-resource 概要 言わずとしれたREST APIを使いやすくしてくれるモジュールです。 使い方 resource = $resource '/users/:id', { id: '@id' } user = resource.get id: 100

React.jsアプリケーションにおける、GoogleAnalyticsの組み込みについて ・react-ga等のコンポーネントを利用するより、従来の組み込み方法の方が柔軟 ・pageviewをsendするポイントはreact-router-reduxのlistenerより、react-routerのonEnterフックを利用した方がGAのレポートがうまく出せる

先日にはてブのホットエントリになってたこの記事（Promises: ブラウザーJavaScriptの新しい非同期標準になるか？）をみるに、APIアクセスの場合は promises を使わないと、APIの応答が遅い場合に結果が取得できないし、またAPIの結果が返ってくるまでユーザを待たせてしまうことになります。 というわけで、AngularJS でAPIの結果を非同期で取得して画面を更新する、というデモを作ってみました（応答が遅いAPIを模するために、1秒のウェイトを擬似的にいれてます）。 デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3 下記にソースの説明をします。 ※ 私のJavaScriptの経験はまだ浅いので、おかしなところがあったら教えてください^^; ① ソースツリーのWEB公開領域に、適当にJSONファイルを用意

Angular Advent Calendar 2014 の 17 日目の記事です。Angular そのものではなく、AngularJS 用の E2E テストツールである Protactor について書きます。（日付越えてしまいました。すみません・・・。） Angular チームが作っているという Protractor。Angular アプリの E2E テストをするならこれに違いないと思いつつも、使い始める前はいろいろこわい点がありました。 コードがどこで動いているかわからなくてこわい。 処理がどういう順序で実行されるかわからなくてこわい。 この記事ではこれらの点について説明し、Protractor を自信を持って使えるようになることを目的としています。 読者としては以下のような方を想定します（主に先日の自分）。 Protractor のインストールをして動かしてみた。 日頃から Prom

If you are developing an AngularJS application, use Protractor to test it! Why? Protractor is an end-to-end testing framework for AngularJS applications and works as a solution integrator - combining powerful tools and technologies such as NodeJS, Selenium, webDriver, Jasmine, Cucumber and Mocha. It has a bunch of customizations from Selenium to easily create tests for AngularJS applications. Prot

まえおき AngularUI RouterはAngularJSのルーティングモジュール。 AngularJSの標準のルーティング機能より高機能で、ページ内に複数のviewを持ったり、 階層化されたviewを利用することなどができる。 最終的なプロジェクトの目標はngRouteに取って代わって標準搭載されることだそうで、AngularJS本体も興味を示しているらしい（GitHubのwikiに書いてある）。 で、ちょこっと触ってみて、実際の使い方に触れた解説記事は少ないようなのでざっくり使い方を書く。 https://github.com/angular-ui/ui-router/wiki ちなみに上記の公式のwikiを読めば分かることしか書いてない。 あとQiitaに抜粋版を書いたので、細かい説明が要らない人はたぶんそっちのがわかりやすい。 AngularJS - AngularUI Rou

最近AngularJSとずっとにらめっこしています。やっていて楽しいです。 こんにちは、先生です。 最近はAngularJSとばかり遊んでおり、さまざまなモジュールを入れては消しを繰り返しています。もちろんそれらのモジュールの中には、対応していないブラウザや端末があったり、一部環境では正常に動作しないなどの不具合を持つものも多くありました。 そこで本日は、数あるモジュールの中でも安心して業務で使えたモジュールについて紹介していきたいと思います。 2014年11月現在でのライセンスも明記していますので参考にしてください。 安心して使えたモジュール8選 1. Angular directives for Bootstrap http://angular-ui.github.io/bootstrap/ MIT License Bootstrapをディレクティブにしているモジュールです。 元々のB

最近、AngularJSリファレンスという書籍を書いていたのですが、紙面や時間の都合上書けなかったこともたくさんありました。 というわけで、書籍に書ききれなかった内容を落ち穂拾い的に紹介していきたいと思います。 今回はangular-hintというツールを紹介します。 https://github.com/angular/angular-hint これは、Angularチームの1人が開発しているツールで、AngularJSを使って開発したアプリケーションに組み込んで実行すると、エラーを検出してくれたり、ベストプラクティスに従っているかどうかをチェックしてくれたりします。 ただし、説明文にWIP(Work In Progressの略)と書いてあるので、まだ開発中のようです。 angular-hintを組み込むとアプリケーションが動かなくなることもあるのでご注意ください。 angular-hi

This document summarizes a microservices meetup hosted by @mosa_siru. Key points include: 1. @mosa_siru is an engineer at DeNA and CTO of Gunosy. 2. The meetup covered Gunosy's architecture with over 45 GitHub repositories, 30 stacks, 10 Go APIs, and 10 Python batch processes using AWS services like Kinesis, Lambda, SQS and API Gateway. 3. Challenges discussed were managing 30 microservices, ensur

やり方はいろいろあると思います ひとつは、$routeProviderのresolveを使う方法 あるURLに飛ぶ前に、必ず現在のユーザの情報をhttpで取ってきて$scopeに入れたい。 入れ終わってからビューを描画したいという状況だとします <h2>demo</h2> <div ng-app="app"> <script type="text/ng-template" id="sample.html"> <p>sample</p> {{user}} </script> <div ng-view></div> </div> angular.module('app', ['ngRoute']). config(function($routeProvider) { $routeProvider.when('/', { templateUrl: 'sample.html', controlle

$location.search で画面が更新されてしまうのがだいぶあれだったのでないわけないだろうと探したらやっぱりあった。 $routeProvider#when で reloadOnSearch に false を指定すればいいらしい。 http://docs.angularjs.org/api/ng.$routeProvider このあたりのワードで検索するとよく出てくる locationChangeStart とか routeChangeStart あたりで調べててだいぶはまった。 angular.module("myApp", []) .config(function($routeProvider) { $routeProvider .when("/", { templateUrl: "main.html", controller: "MainCtrl", reloadOnSe

タイトルだけ見るとOnsen UIの紹介がメインのように見えますが、実際は、ハイブリッドアプリの概要から始まり、HTML5アプリのパフォーマンスチューニングの話題が主要な部分を占めます。 ハイブリッドアプリにはUIフレームワークが欠けていた、だからOnsen UIを作ったのだ、という開発の経緯がよくわかるプレゼンでした。 スライドにない部分としては、Onsen UIと同じくハイブリッドアプリ用のUIフレームワークであるionicとの比較について、会場からの質問がありました。 OnsenUIのionicと比べた利点としては以下がある、とのことです。 – (ionicが初期はiOSにフォーカスしていたのに対して) OnsenUIはAndroidでもパフォーマンスの最適化を行っている – OnsenUI 1.3ではWindows Phoneサポートを追加する予定 – OnsenUIは日本語ドキュ

乗り遅れるな！よりパワフルになったAngular1.4リリースまであと一週間！ Angular1.4 and beyondーng-japan 2015 佐川 夫美雄（Ashiras, inc.） Angularをテーマとした日本初のカンファレンス 「ng-japan」が2015/3/21(土)サイバーエージェントで開催されました。 ng-japanは、参加者350名以上という、単独JavaScriptフレームワークをテーマにしたカンファレンスとしては、非常に多くの方が来場。日本でAngularを利用して活躍しているスピーカーや、Google Angularチームのメンバーを迎え（逐次通訳あり）、Angularの現状と未来についての学びの場となりました。 本日からそのイベントの模様を6回に渡り、あますところなくお伝えしていきます！ Angular1.4 and beyond – Chiray