AngularJSモダンプラクティス - Qiita
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
フレームワーク対決！Angular VS React仮想パネルディスカッション
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
[AngularJS] 画面遷移時における値の受け渡し方法いろいろ | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は、画面遷移時にコントローラを跨いで値を受け渡す方法をまとめてみました。「良い」とされる例もあれば、「悪い」と思われる例もありますが、お付き合いください。 自前グローバルオブジェクトを使う ある意味で最強なグローバルオブジェクト ( トップレベルのオブジェクト ) ですが、今回のような例で使用した場合、チーム内のコードレビューでお説教されることうけあい。 サンプル 一応、サンプル貼っておきます。( 真似することはお勧めしません ) ソース シンタックスハイライトもおかしなことになってしまう破壊力… var Globals = {}; // ('A`) (function () { angular.module('appName', ['ngRoute'], function($routeProvider) { $routeProvide
![[AngularJS] 画面遷移時における値の受け渡し方法いろいろ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/648e11f84f388126ccfdea056ad86ba379173295/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
AngularJS: 自分で画面を更新したいときは $timeout サービスを使うのが良さげ
AngularJS が画面の内容を更新するのは、スコープの値が変化した (可能性がある) ことを検知したタイミングになる。 その変化は、AngularJS 内のイベントが発生することで捉えるようだ。 つまり、AngularJS 内のイベントが発生しないような形でスコープの値を変更しても、画面には反映されない。 例えば、以下のサンプル。 http://liveweave.com/LTCpQF 上記のサンプルでは JavaScript の setInterval() 関数の中で、スコープに紐付けられた変数 ‘counter’ の中身を 1 秒毎にインクリメントしている。 しかし、setInterval() 関数は実行しても AngularJS のイベントを伴わないため、画面には何ら変化がない。 $scope.counter = 0; setInterval(function () { $sco
angular.jsでログイン認証などの共通処理を実装する方法 - とりあえずphpとか
やりたいこと angular.jsを使ったシングルページwebアプリケーションの開発中にどのページでも同じ処理を行いたい場合がありました。 今回やりたかったのは以下のような処理を全ページにいれたかったです 例1. ログインせずにアクセスされたらログインページを表示するような処理 例2. socket.ioとの接続が確立できていなかったら接続または再接続を行う処理 phpなどのサーバサイドでの実装はよくやってましたがjavascript(というかangularjs)でこういう処理は初めてでした。 実装 実際にこんなに単純な認証があるかはわかりませんが、サイトにアクセスしてきたら必ずサーバへリクエストしてokならそのことを保持しておいて以降は何もしないという流れになります // メイン処理 var App = angular.module("App", ["ngRoute", "ngResou
[AngularJS] データグリッド的な編集可能 Table サンプル | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 前回記事で紹介した 'cmEditableText' ディレクティブを用いた応用例として、次のようなサンプルを作ってみました。 サンプル 'First Name' と 'Last Name' の列にあるセルをダブルクリックすると、セルの中身が編集できます。( PC のみ対応 ) cmEditableText の売り <td> 要素に 'cm-editable-text' と追記するだけで編集可能なセルになります。 Table 行は ngRepeat を利用してコレクション ( 配列 ) を元に構築するので、行に対するモデルの定義は以下のようにします。 <tbody> <tr ng-repeat="item in items"> <td><input type="checkbox" ng-model="item.checked"></td><
AngularJS でログインのフローを作る - Qiita
AngularJS で、よくあるログインのようなフローを作ってみました。 未ログインならログインページを表示する 他の任意のURLはログインページへリダイレクトする ログイン済みでログインページを表示しようとしたときはトップページにリダイレクトする ナビゲーションの表示をログイン状態に応じて変化させる index.html 最低限の見た目のために Bootstrap を使っていますが、Bootstrap の CSS で !important な display:block が指定されているところがあり、ngCloak や ngShow が効かなくなることがあったのでそれらを上書きするための CSS を html 文中に書いています。 <!doctype html> <html ng-app="App"> <head> <meta charset="utf-8"> <title>Angula
Ionic / AngularJS service wrapper for Web SQL API / SQLite-Cordova-Plugin
app.js 0v^��U angular.module('myApp', ['ionic', 'myApp.services', 'myApp.controllers']) .run(function(DB) { DB.init(); }); config.js �rH��U ����U angular.module('myApp.config', []) .constant('DB_CONFIG', { name: 'DB', tables: [ { name: 'documents', columns: [ {name: 'id', type: 'integer primary key'}, {name: 'title', type: 'text'}, {name: 'keywords', type: 'text'}, {name: 'version', type: 'integer
Wijmo（ウィジモ）デモアプリケーション | Developer Solutions〈開発支援ツール〉 - メシウス株式会社
1722581517536 【重要】2024年1月公開のアップデート「未適用」のお客様へデモヘルプAPIリファレンスその他のサンプルトライアル版デモデモサンプルコード実行手順実用例JavaScriptAngularReactReact ReduxVue 3Vue使用例課題管理ダッシュボードモバイルアプリ風就業月報勤務シフト表営業データ管理BOM（部品表）1BOM（部品表）2BOM（部品表）3Tips列ヘッダーセルのスタイル変更コンボボックスの動的なアイテム変更コピー時にマーキーを有効にする特定のセルのみ編集不可にする積み上げ棒グラフを並べて表示する方法動的なAutoCompleteをカスタムエディタに設定する基本機能グローバリゼーション日時と数字の書式設定日時と数字の解析カスタマイズテンプレート文字列文字列の書式設定基数詞CollectionView概要データの読み込みクライアント上で読み
Angularとの2年間 ー これからAngularを使う人への薦め | POSTD
判決： まあまあ（でもないか） 一体何の話なのか？ 私は2年間、Angularにのめり込んでいました。 それぞれの考えを持つさまざまなチームによる、10以上のAngularベースのプロジェクトを見守り、関わってきました。 1年目はフレームワークの採用、APIの変更、ドキュメントの改良、コミュニティの形成を注視して過ごし、徹底的に習得しました。 2年目は実務に全面的に携わり、チームメンバーの意見を聞きました。 私の意見は、 Angular.jsは大多数のプロジェクトには“まあまあ”だが、本格的なWeb アプリ開発には不十分である ということです。 “本格的なWebアプリ”とは？ “本格的なWebアプリ”というのは、長期の 保守が可能 で、最新の一般的なブラウザで 実行できる 、 スムーズなUX を備えた、 モバイルフレンドリー なアプリのことです。 専門家が開発したWebアプリは単なるアプリ
Suave UI – AngularJSと組み合わせて使いたいUIフレームワーク
JavaScriptを活用したWebアプリケーション開発の流れが広まっています。JavaScriptアプリケーションが大型化すれば、自然とフレームワークを欲するようになります。AngularJS、Ember、Backboneあたりが有名でしょうか。 今回はAngularJSをターゲットにしたプロダクト、Suave UIを紹介します。AngularJSと組み合わせて使うと便利なUIフレームワークになります。 Suave UIの使い方 Suave UIはAngularJSに対応した部分において、su-*というプリフィックスを持っています。スタイルシートについてもsu-*をつけて使います。UI周りで従来のライブラリを使うと、そこだけAngularJSと違う書き方になって浮いてしまうことがあります。Suave UIを使ってUIとスクリプトが親和性高い状態を維持しましょう。 Suave UIはJav
Kibana 4にみるAngularJSアプリの開発ノウハウ - Qiita
Kibana 4のプラグインをつくってみよう を書いたときに、Kibanaのソースコードを読んでいて発見したことについて紹介してみたいと思います。 Kibanaの構成 https://github.com/elasticsearch/kibana 規模 ソースコードはだいたい24,000行くらい。 各モジュールの数は次の通り。ディレクティブが多いのが目立ちます。 directive: 56 controller: 9 filter: 10 factory: 9 service: 20 provider: 0 value: 0 constant: 10 ディレクトリ構成 ディレクトリ構成はこんな感じです。 いま一番気に入っているAngularJSのプロジェクト構成 で紹介されている、folders-by-typeに近いでしょうか。 でもcomponentsの下は、機能毎にディレクトリが切られ
AngularJS 2.0 のご様子 - Can I do web?
Advent Calendar 20日目のポストです。 ちょうど2.0について書こうと思ってたところに、昨日さらにつっこまれたので取りあげてみます。 で、画像中の記事がこちら この記事について振られたので調べてみた。 元記事をお読み頂きつつ。 #ツールに新たに追加される概念は、1つではなく3つ！ これは2.0になるので知っておこう、なのでそうなりそうです。 ただし、AtScript については Optional な感じで良いと思います。TypeScript + AngularJS な人は知っておくと恩恵があるのではないでしょうか。 #変わるが、良くならない このコードのサンプルだと、記述が変わったなということ位しかわからくて、あまり意味がありません。v2.0 では、Web Conponents や以前から統合するといっていたPolymer との連携を考慮すると、従来通りの Attribut
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSのサービス開発とユニットテスト ～テストの流れを把握して保守性の高いコードにしよう
javascript - How to display a variable in ionic? - Stack Overflow
GitHub - scotttrinh/angular-localForage: Angular service & directive for https://github.com/mozilla/localForage (Offline storage, improved.)
https://qiita.com/ryot_a/items/2a8d8c0f71dcc657784c
LumX
AngularJSの強力なデータバインディングの肝となる！ スコープを理解して、独特な開発スタイルを自分のものにしよう
FLABO