angularjs

AngularjsでIME入力を完了しないとng-modelに反映されなくてハマった

またAngularjsとか今さらな話だけど...https://qiita.com/yaegaki/items/c9cf111ef9d0c541a194 こちらを参考に自分のアプリに試してみたところ、動くところと動かないところが出てきたこんな感じのコードが動かなかった <div ng-if="show()"> <input type="text" ng-mode="input.hoge" jp-input /> </div>ng-showにしたら動いたよ <div ng-show="show()"> </div>

【angularjs】外部スクリプトの読込が完了してからコントローラを実行する

今回はGoogleMapを扱う際に気になったのでちゃんと実装してみたのでその時のメモ。htmlにscriptタグを埋め込むやり方が普通なのだろうが、そこでネットワークエラー等が発生するとhtmlを再読み込みしない限り2度と読み込むタイミングがないのではないかとい…

【angularjs】パスワード確認用入力フォームを実装する

今回やりたかったのは、サインアップ画面等でパスワードとパスワード(確認用)の入力画面を用意して、一致していなかったらバリデーションではじく。というありがちな画面。https://github.com/TheSharpieOne/angular-validation-match 探したところこちらに…

【angularjs】セレクトボックス(プルダウン)の使い方メモ

angularjs使うときはまたやりそうなのでメモしておくまず、配列はどこかに一箇所に定義しておく angular.module('myApp') .value('define', { 'area': { 1: '北海道', 2: '東北', 3: '関東', ・・・ }, });テンプレートから参照できるようにコントローラで $…

【ionic】angular-messageで入力フォームのバリデーションとエラーメッセージを実装する

はじめに 今回やりたかったことは入力フォームにバリデーション機能を実装して、不備があった場合は送信ボタンを押せなくして不備の内容を画面に表示するということ。今回は angular-messages というライブラリを使った。angular-messagesのインストール $ b…

angularのhttpでレスポンスヘッダーを取得する

今回やりたかったことは以下。 angularの$http.getまたは$http.postでAPIへリクエストしたレスポンスヘッダーを取得するということ。 chromeの開発ツールからはレスポンスヘッダーを確認できたのだが、angularでは取り扱う場合にうまく取得できずに少しはま…

【ionic】collection-repeatで行の高さを動的にする

まだ調査中。無限スクロール実装するときにng-repeatよりcollection-repeatを使った方がパフォーマンスが良いらしい。とのことで。試していたら行の高さが1行目の高さに合わせられてしまうようで、高さを動的にする場合は高さを計算してやる必要がありそう。…

【Angularjs】PromiseでforEachで同期処理で順次実行する

こちらのコードを実行すると、testが1秒間隔で3回順次実行される。 var test = function() { var deffered = $q.defer(); $timeout(function() { deffered.resolve(); }, 1000); return deffered.promise; }; var deffered = $q.defer(); var promise = deff…

【angularjs】serviceで [$injector:unpr] Unknown provider が出た時の対応

半日くらいハマりました。エラーが出てたコード angular.module('myApp', []); angular.module('myApp') .service('myService', function() { ・・・ }); angular.module('myApp', ['ngCordova']) .service('myService2', function() { ・・・ });修正後のコ…

【ionic】タブの中に入れ子でタブをいれる方法メモ - ion-tabs

はじめに 今回やりたかったのはこんな画面。 イマイチできるのか不安だったけど無事できた。ionicは海外の情報が多くて「ionic tabs inside tabs」とか「ionic tab nested」ってみんな検索してるみたい。イメージはこんなかんじ アプリ特有?かわからないけど…

【angularjs】$http.postでのjson送信でoptions method not allowedを解決した時のメモ

やりたかったことは、localhostのサーバーで動いてるクライアントHTMLからサーバー上のAPIにPOSTでJSONを送るということでした。 なんかうまくいかなくて色々やってみたけど、結論からいうとangular側は以下のコードでいけました。クライアント側 $http.post…

ionic(cordova)でion-tabsで画面ごとに各タブの表示・非表示を切り替える

やりたかったのはページによってタブの中身を動的に変更したり、タブの数自体を変更したり、タブ自体を非表示にしたり。そんな感じです。ionicというよりはangular-ui-routerの使い方になるのかな。いちおうメモしておきます。$stateChangeStartでページが変…

【onsenui】無限スクロールを実装する

はじめに 今回やりたかったのはよくある無限スクロール。 リストの1番下までスクロールしたら次のデータを取得しにゆきます。 これをAngular + Onsen UIで実装したのでメモしておく。データ数の多いリストはパフォーマンス的にons-lazy-repeatを使うとよいら…

angular.jsでファイルアップロードする方法

はじめに ファイルアップロードする方法を調べてたら「angular file upload」というモジュールが有名ぽい。 danialfarid/angular-file-upload · GitHub こちらがgithubになります。サンプルみてみたけどあまりちゃんと理解できていないのですが、とりあえず…

angular.jsで「読み込み中」を表示する方法 - AngularOverlayで

やりたいこと サーバに通信してデータを取得する処理などに、完了するまで「読み込み中」とか「now loading」とか表示するアプリがあると思いますがあれを実装する方法をメモしておきます。 AngularOverlayというモジュールが公開されているのでこれを使って…

angular.jsで無限スクロールを実装する方法

やりたいこと ページで一覧表示をしてリストの1番下までいったらサーバに通信してデータをとってきてhtmlに反映させるみたいなありがちな処理です。「angular.js 無限スクロール」とかで検索したら「ngInfiniteScroll」というモジュールがいろんなサイトで紹…

angular.jsでもっと見るを実装する方法

やりたいこと なんらかの情報を一覧表示。たとえば最初に20件くらい表示しておいてスクロールして1番下の方にもっとみるボタンを設置。もっと見るボタンをおしたら次のページを表示。ありがちなページを作成したかったのでそれのangular.jsで実装したときの…

フリーのHTMLエディタでいいのがありました

案件でちょっとしたHTMLエディタを探してたのですが、いい感じのがあったので紹介です。 angular.jsのプラグインの形で作られている、textAngularというものになります。 こちらが公式サイトになります。 githubはこちら。 見てもらえればなんとなくわかると…

angular.jsで画像選択画面を作る方法

やりたかったこと タイトルのとおりですけど、画像が一覧表示されてて画像をクリックすると画像が選択中になってもう1度クリックすると選択解除となるようにする。 で、送信ボタンをクリックすると選択した画像のidを送信する。というよくあるページを作りた…

cordovaでファイルアップロードを実装する方法

やりたかったこと webサイトでよくあるファイルアップロード機能をcorodovaアプリでも実装する必要がありました。 最初はwebサイトと同じようにinputタグのtype=fileで実装しようとしてたんですけどcordovaのプラグインを調べてみると以下のプラグインがあり…

angular.jsで同じcontrollerが2回呼ばれる原因

// router myApp.config(function($routeProvider) { $routeProvider.when('/', { templateUrl: "index.html", controller: "ControllerIndex", }).otherwise({ redirectTo: '/' }); }); // controller myApp.controller("ControllerIndex", function($scope…

ハイブリッドアプリ開発ではなぜシングルページwebアプリケーション開発にするのか考えてみた

はじめに 最近ハイブリッドアプリの勉強中なのですが、ネットとかで調べながらやってるとangular.jsやbackbone.jsなどのフレームワークを使った事例やサンプルなどが多いのでそういうものだと思ってました。angular.jsやbackbone.jsのノウハウがあるわけでも…

cordovaでのajax通信でcorsでハマったのでメモ

はじめに angular.jsでcorsを有効にしてajax通信できることは過去に実装したことがあった。 なのでcordovaを使用する場合に特別なことをする必要があると思ったのですが違いました、、、 いちおう今回対応できたのでメモしておきます 対応したこと ・サーバ…

angular.jsでのajax通信をモジュール化して共通処理にする方法2

こちらの続編です。 上記のページの例では1モジュール1関数みたいな書き方になってしまったのであまり汎用性がないなと思って追記で1モジュールに複数関数定義できる形にしました。モジュール App.factory("ModelUser", function($resource) { return $resou…

angular.jsでng-styleを使って背景画像(background-image)を切り替える方法

10秒ごとに画像を切り替える処理を作りたかったのだが 画像の切り替えでちょっとハマったのでメモcss .image { background-color: white; background-repeat: no-repeat; background-size: contain; color: white; height: 100%; }html <div image class="image" ng-style="{'background-image': 'url(' + backimg + ')'}">js $scope.backimg =</div>…

angular.jsでlocalstorageを使う方法

やりたかったこと corodovaで簡単なアプリ開発をしてて、アプリ使用時に設定した内容を記録しておいて次回起動時にそれを読込む仕組みを実装したかった。 今回は保存先としてhtml5で利用可能なローカルストレージ(localstorage)を使用する事にした。 そのプ…

angular.jsでdirectiveからng-classを使ってcssを切り替える方法

軽くハマったのでひな形をメモしておきますjavascript var app = angular.module("myApp",[]); app.controller("ControllerIndex", function($scope) { }); app.directive("csschange", function () { return function ($scope, element, attrs) { $scope.cl…

cordova開発環境を作るときのメモ(私用)

はじめに まだ勉強段階だが、cordovaでの開発環境を作るときの流れをメモしておく 自分が今時点で使っているものは以下 ・cordova(ハイブリッドアプリフレームワーク) ・angular.js(jsフレームワーク) ・onsenui(uiフレームワーク) ・grunt(開発ツール)シン…

angular.jsでログイン認証などの共通処理を実装する方法

やりたいこと angular.jsを使ったシングルページwebアプリケーションの開発中にどのページでも同じ処理を行いたい場合がありました。今回やりたかったのは以下のような処理を全ページにいれたかったです 例1. ログインせずにアクセスされたらログインページ…

bowerでインストールしたライブラリをfuelphpで使う方法(メモ)

やりたかったこと project ├── public │ └─ assets │ ├─ js │ ├─ ・・・ ├── fuel └── nodejs # 自分で作ったフォルダ ├─ bower_components #bower installで取得したファイル │ ├─ angular │ ├─ angular-route ├─ ・・・今まではこんな感じのディレクトリ構…