読者です 読者をやめる 読者になる 読者になる

【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 ├─ ・・・今まではこんな感じのディレクトリ構…

新規プロジェクトでシングルページアプリを作るさいの環境構築メモ(私用)

はじめに 完全に自分用のメモになってしまうが、、、さくらのレンタルサーバでのfuelphpセットアップ手順 - とりあえずphpとか さくらのレンタルサーバでのfuelphpセットアップ手順 - とりあえずphpとか こちらのfuelphpのときと同様で直近の案件のコピーし…

angular.jsのNgResourceでfuelphpにpost通信する際にハマったこと

angular.js側 App.factory("ModelUser",function($resource) { return $resource( "http://example.com/api/user/register", null, { regist: { method: "post", } } ); }); ModelUser.register({ name: name, address: address }).$promise.then(function(r…

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

やりたかったこと phpとかのサーバーサイドの開発ではDBからデータを取得したり登録したりする処理をModelクラスとして定義しておきます。他の箇所からはそれを呼び出す形で開発する事が多いのですが、angular.jsでもajax通信してサーバとデータのやり取りを…

onsen ui <ons-navigator>の中に<ons-template>を複数定義しようとしてハマった

やりたかったこと <ons-navigator>を使ってページ遷移を2パターンのページへそれぞれ遷移させたかった。 下記のように実装してみたのだがページ2へのリンクをおすとjsのエラーが発生して上手く動かなかった。ちなみにページ1へは遷移できたjs var myApp = …