2013-11-26

AngularJsでController実行前に処理する方法

AngularJs

AngularJsでrouteProvideで処理を分けているけど、ログインチェックとかを共通でController実行前にしたいなぁと思いつついまいち情報がなかったのでメモ

resolveと$q 使って処理すればいけそうな感じで
http://stackoverflow.com/questions/18010796/return-interdependent-async-promises-in-routeprovider-resolve
http://stackoverflow.com/questions/17731942/how-to-load-data-synchronously-in-angularjs-application
これつかっていけたぜヒャッホウと思ったら、リロードでうまく動かないことがあったので（勘違いもあったかも）
http://stackoverflow.com/questions/16286605/initialize-angularjs-service-with-asynchronous-data#16754186
こちらの方法でうまくいった。

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partial/index.html',
        controller: 'IndexCtrl',
        resolve: {
          user: function($q, loginCheck){
            var d = $q.defer();
            loginCheck(d);
            return d.promise;
          }
        }
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

app.factory('loginCheck', ['$q','$http', '$rootScope', function($q, $http, $rootScope) {
  return function(d) {

    $http({
      method: 'POST',
      url: '/user',
    }).
      success(function(data, status, headers, config) {
        $rootScope.hoge = data;
        d.resolve(data);
      }).
      error(function(data, status, headers, config) {
          d.reject(status);
        }
      });
    return d.promiss; // ここは怪しい
  }
}]);

app.controller('IndexCtrl', ['$scope', '$rootScope', 'user',
  function($scope, $rootScope, user) {
     console.log(user);
    console.log($rootScope.hoge);
  }
]);

ちょっと書き換えたりしているのでもしかしたら動かないかも
そもそもfactoryとかserviceとかいろいろあってよくわかってないのです。

2013-11-15

GruntをCentOSで使ったらうまくいかなかったのと、無理やり対応

Grunt

調べてみるとCentOS6あたりの人が困っている感じでGrunt回りでうまくいかないことと対処法
ちなみに「CentOS release 6.4 (Final)」さくらのVPS

インストールの失敗

Grunt回りのものを一式npm installすると、gifsicleのところでエラーが出る
gifsicle-1.71.tar.gz をコンパイルするところっぽい
そこでエラーが出ても止まらない
エラーの内容は変わっていくから無限ループじゃないのかもしれないけどひたすらエラーが出まくるので途中停止
もう一度npm installすると何事もなかったかのようになっている……。
その時はまあいいかと思っていました。

build時のエラー

grunt buildを実行すると、jpg画像の時は問題なかったのですが、pngを追加したらエラーが……。

   Warning:
    /home/www/evm/node_modules/grunt-contrib-compass/node_modules/tmp/lib/tmp.js:261
    throw err;
            ^
Error: spawn ENOENT
    at errnoException (child_process.js:980:11)
    at Process.ChildProcess._handle.onexit (child_process.js:771:34) Use --force to continue.

grunt-contrib-compassがだめらしい
でもcompassの実行によるものではなさそう。
動作見てみるとdistのimagesにhogehoge.png.tmpが残ったままだったのでここが怪しいなと。
で、実際は「grunt-contrib-imagemin」を動作させるところでエラーとなっていたらしい
もっと調べると上のインストールエラーも「grunt-contrib-imagemin」だったので、ここでエラーとなったのが原因なんだろうなという感じ

node-gifsicleが入ればすべて解決するという感じでいろいろ探したものの
https://github.com/yeoman/node-gifsicle/issues/11
どうも解決してないか、少なくとも依存で入るgifsicleを昔のバージョンにするとか変える必要がありそう

無能エンジニアとしては変え方とかわかんなーいって感じでパッケージのpackage.jsonの数字だけ触りたいので、
とりあえず古くする「"grunt-contrib-imagemin": "~0.1.4"」

    "devDependencies": {
      "grunt": "~0.4.1",
      "grunt-contrib-copy": "~0.4.1",
      "grunt-contrib-concat": "~0.3.0",
      "grunt-contrib-uglify": "~0.2.0",
      "grunt-contrib-compass": "~0.6.0",
      "grunt-contrib-jshint": "~0.6.3",
      "grunt-contrib-cssmin": "~0.6.0",
      "grunt-contrib-connect": "~0.5.0",
      "grunt-contrib-clean": "~0.5.0",
      "grunt-contrib-htmlmin": "~0.1.3",
      "grunt-bower-install": "~0.5.0",
      "grunt-contrib-imagemin": "~0.1.4",
      "grunt-contrib-watch": "~0.5.2",
      "grunt-rev": "~0.1.0",
      "grunt-autoprefixer": "~0.2.0",
      "grunt-usemin": "~0.1.10",
      "grunt-mocha": "~0.4.0",
      "grunt-svgmin": "~0.2.0",
      "grunt-concurrent": "~0.3.0",
      "load-grunt-tasks": "~0.1.0",
      "time-grunt": "~0.1.1",
      "claymate": "~2.0.3"
    }

結果：動いた（笑）