AngularJS WebSocket Service Example
At my curent company we are using Angular.js for a new desktop application (yes, a desktop application, but I won’t get into that). Our app gets its data and events from a web service via a WebSocket connection. Angular comes bundled with some great tools to connect to REST servers, but it doesn’t come with anything to help you with real-time data (and it probably shouldn’t). Here is an example of
これから始めるAngularJS
HTML5の普及とともに、より表現豊かなWebアプリケーションを開発できるようになりました。その反面、Webアプリケーションの開発は、より複雑に、より大規模になってきています。こうした問題を解決するために、数多くのフレームワークが生まれてきました。 Backbone.jsやKnockout、最近であれば、Vue.jsやFacebook社が発表したReactなどが挙げられます。 本連載では、数多くあるフレームワークの中でも、今注目されているAngularJSについて幅広く紹介していきます。今回は、AngularJSに触れたことのない方に向けての入門編です。 AngularJSとは AngularJSはGoogle社製のフレームワークで、冒頭で挙げたフレームワークと違い、フルスタックであることが特徴の1つです。 データバインディングやルーティング、テンプレート機能をはじめとする、Webアプリケ
初心者マークのAngular.js - Uemmra3’s blog
雪国生まれなのに寒いのが苦手な@Uemmra3です;;; この記事はAngularJS Advent Calendar 2014 - Adventarの4日目の記事です。 昨日はMitsuru Ogawaさんのいま一番気に入っているAngularJSのプロジェクト構成 | I am mitsuruogでした。 開発するのに直感的に分かり易いディレクトリ構成って、特にデスマに佳境に入って来た時には結構重要ですよね。 自己紹介 今年の3月まではたこ焼き都市のOsaka(Macのフォントではない)のSIerで働いていて、"フロントエンド is 何?"な状態です。 2013年のカレー Advent Calendar 2013 - Adventarで仲良くなった@tan_go238さんの主催するKnockoutJS勉強会 in Kansai（3月） - connpassで発表を行うという暴挙に出まし
AngularJS Advent Calendar 2014 9日目：画面遷移で行われる色々なイベントを評価してみる - albatrosary's blog
ルーティングによる画面遷移でどういう順番でメソッドが呼び出されるかを確認する必要があり一度評価プログラムを書いたことがありますのでそれを。このエントリーは「AngularJS Advent Calendar 2014」12月9日の記事です。 AngularJS Advent Calendar 2014 - Adventar 画面遷移とファイルの定義 やっていることはものすごく単純でmain画面からsampleApplication画面の呼び出しを行っているだけです。AngularJSは画面遷移で多くのイベントを持っていますのでひとつひとつじっくり確認する必要があります。 サンプルコードは次の通りです： albatrosary/preview-angular · GitHub 状態を定義するファイルは main.js 'use strict'; angular.module('preview
AngularJSのscriptを一つにまとめる - Qiita
AngularJSを書いているとどうしてもscriptタグの羅列が増えてくる傾向にあります。 個人的にはあれが非常に気になってしまうので、なんとかひとつのファイルにまとめたいわけです。 例えばAngularJSのサンプルアプリ、Angular phonecatの場合、 <script src="bower_components/jquery/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-route/angular-route.js"></script>
AngularJSでのHTTPrequest(主にPOST)にはまった件 #ng_jp - Qiita
@can_i_do_webさんに指名(?)を頂いたといことで。 AngularJS Advent Calendar 2014 (adventarの方) の1日目の記事です! 先陣を切らせて頂きます。 はじめに 今回はAngularJSでHTTPrequestをするときにかなりハマった話(笑)をまとめたいと思います。 同じようにハマる人がいるかもしれないのでメモしておきます。 私のスペックは バックエンドのエンジニア Angular.JSは趣味に近い形で勉強中 Angular.jsは雰囲気で書いていて理解はまだ追いついてない という感じなので、初学者の人は同じエラーに出会うかもしれません Access-Control-Allow-Origin. 今日はこのあたりでめちゃハマってました。 APIのレスポンスを返す側がクロスドメイン環境を許可していない場合にクライアント側で表示されるエラーってい
Angular UI ~ UI.Layout Doc
<div ui-layout class="layout-mock"> <header class="north-back"></header> <ui-layout options="{ flow : 'column' }"> <sidebar class="east-back"></sidebar> <div class="center-back"></div> <sidebar class="west-back"></sidebar> </ui-layout> <footer class="south-back"></footer> </div> .layout-mock *:not(.ui-splitbar){ background : #eee no-repeat center; } .layout-mock .center-back{ background-image: url
モバイルフロントエンドで通信を削減する方法まとめ《AngularJS Advent Calendar 2014》 - Qiita
これは AngularJS Advent Calendar 2014 の５日目(12/5)の投稿です。 最初は AngularJS に絵文字を導入する方法とか、チュートリアルを組み込む方法とか、AngularJS での Chromeアプリの開発など、過去に書いたものの中から「変わりダネ」を整理して再投稿しようと思ってたのですが（もし興味があれば過去のをご覧ください）、 絵文字 ⇒ AngularJSで絵文字を表示するメモ チュートリアル ⇒ AngularJSアプリケーションにチュートリアルを簡単に導入する Chrome ⇒ ChromeアプリをAngularJSで書くまでの手順 今回はアドベントカレンダーらしく？ 読む人にとって役に立ちそうなものとして、モバイルフロントエンドでの通信量/通信数/通信頻度の削減ついて書きます。 これを書こうと思った動機としては、チューニングするのに必要不可
【AngularJS, Jasmine】テストの書き方まとめ。
簡単なプロジェクトで練習してみたので自分用にまとめ直し。 まずはテスト用の簡単なプロジェクトを準備。ディレクトリ構成は下記の通り。 jasmineフォルダ以下はjasmine Standalone Distributionのファイル群。 testディレクトリ以下にテスト用のファイルを配置している。runner.htmlにアクセスすることでテストが実行される。 今回作成したAngularアプリケーションは、app.js、index.html、indexController.js、indexService.jsの4ファイルで構成。 それぞれのファイル内容は下記の通り。 app.js void function() { angular.module('coreApp', [ 'coreControllers', 'coreServices' ]); angular.module('coreCon
AngularJSのパフォーマンス改善入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これまでAngularJSでアプリを作ってきた中で、いくつかパフォーマンスの問題に遭遇しました。 それらの問題は、AngularJSの仕組みを十分に理解できていないために、よくないコードを書いてしまって発生しているものでした。 というわけで、AngularJSの内部構造を解説しつつ、パフォーマンスを改善するコードの書き方を紹介したいと思います。 計測できないものは改善できない パフォーマンス問題に取り組むには、ソースコード修正の前後でパフォーマンスを計測し、改善の効果を計測することが重要になります。 というわけでまずはツールの紹介です。
AngularJSでng-repeat時の生成内容を分岐させたい
つまり var items = [ {type : 'A'}, {type : 'B'}, {type : 'A'}, {type : 'A'}, {type : 'A'}, {type : 'B'}, {type : 'B'} ]; を ng-repeat 越しに <ul> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Bな感じの内容物</li> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Bな感じの内容物</l
モダンAngularJS @ GDG中国2014.12.6
AngularJS is a JavaScript framework that allows developers to create dynamic web applications. It uses HTML as the template language and extends HTML attributes with directives. AngularJS applications are composed of modules, controllers, services and filters that allow creating single page applications with two-way data binding between models and views.Read less
AngularJSのfilterフィルタの使い方
AngularJSには便利なフィルタという機能が存在します。特定のルールによって値をフォーマットしたり、絞り込んだりしてくれます。今日はそのフィルタの中でもfilterというフィルタ(filterフィルタ)の話をします。 filter一覧、まとめ AngularJSはデフォルトでいくつかのフィルタを持っています。 Filter components in ng filter, currency, numberなどいろいろありますが、currencyなんかわかりやすいと思います。与えた値に$をつけてくれるフィルタですね。 フィルタの説明は以下のサイトなんかが良いと思います。 AngularJS 地味だけど知っておきたい filter 機能 - Can I do web? 独自のフィルタを作るなら以下のサイトが参考になります。 AngularJSでカスタムfilterを書いてみよう - Ang
AngularJSではじめるHTML5開発 – Part6 UI Bootstrapを用いたプログレスバーとモーダルダイアログ at nkjmkzk.net
Part5の続きです。 今回は更新ボタンをクリックした後に経過を表示するプログレスバーと、重複送信を防止するモーダルウィンドウを合わせて実装していきます。 まずデモで動作を確認してみましょう。 デモ それでは実装へ。 UI Bootstrapを組み込む UI BootstrapはAngular UIチームによって開発されているBootstrap用のコンポーネントライブラリです。 このライブラリを活用することにより、Bootstrapが元々提供しているプログレスバーとモーダルウィンドウをAngularJSと連携させて利用できるようになります。 このUI BootstrapもCDNで提供されているのでまずはそのファイルを読み込みます。 <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com
AngularJS の $watch, $digest, $apply について書く - きちぽよ〜
「僕らはみんな河合荘」 のアニメ化決定に小躍りしている seikichi です． 律ちゃんかわすぎ……． 前置きはさておき，AngularJS の話をします． AngularJS はブラウザ上で動作するWebアプリケーションを作成するための JavaScript フレームワークです．Backbone.js，Ember.js，Knockout.js などに代表される，最近流行り(?)のMV*フレームワークの1つと言えば良いのでしょうか． AngularJSの公式サイト に掲載されているサンプルを見てみます． テキストボックスの内容を変更すると，<h1> 要素の中身にリアルタイムに反映されます． すごい．JavaScript をまだ1行も書いてないのに，何か作った気分になってしまいました (おいおい)． AngularJS は ビューでの変更をモデルに，モデルでの変更をビューに自動的に反映する
I am mitsuruog | いま一番気に入っているAngularJSのプロジェクト構成
この記事はAngularJS Advent Calendar 2014 - Adventarの 3 日目の記事です。 2 日目AngularJS BootstrapUI を利用した FilterSelect(@takeyama) 4 日目初心者マークの Angular.js - Uemmra3 のフルスタックエンジニア？日記(@Uemmra3) AngularJS でそれなりの規模のアプリケーションを書く場合、プロジェクトの構成って結構悩みます。 いつも悩んでます。。。 悩みすぎてちょくちょく構成変えるため、たまにアプリケーションが壊れてます。 そんなとき心もポッキリ壊れそうになります。 そんな私が、最近いいなと思っている AngularJS のプロジェクト構成について紹介します。 参考資料(有名どころ) AngularJS のプロジェクトの構成については、結構以前から議論されています。有
今流行りの「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の良質チュートリア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularUI for AngularJS
NG-Grid の利用 - Qiita
【AngularJS】フィルタリング済みの件数を取得する。
