8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AngularJS&&Gruntで開発時はminifyに注意

Last updated at Posted at 2013-05-28

AngularJS初心者で動かなくて焦ったのでメモ。

Yeoman + AngularJS とかで開発すると、$Grunt build とかでソースをminify(圧縮)する機会があると思うのですが、localhost上で動くのに、minify後に動かなくなったらAngularJSの書き方を疑うと幸せになれそうです。

詳しくはこちらのQiita内記事がものすごく参考になりました!
パターン1の書き方だったものを、パターン2になおしたところ、minify後も無事動くようになりました。
本当に助かりました、ありがとうございました!!

特別な解決策とかは無いのですが、minifyが原因でAngularJSが動かなくなっているという事象を把握するまでにだいぶかかってしまいましたので、自戒まで。

以下トラブルケース


(自分の場合)
Yeoman入れてbower経由でAngularJSも導入

AngularJSのcontrollerで仮にローカルに置いたJSONファイルを読み込みこませる
(単純に相対パスで ./test.json とかで呼んだだけ)

$grunt server
やったーうごいたぞー(localhost:9000)

$grunt build
アプリルート/dist にminifyされたjsとかcssとか出てくる。

/dist/index.html を閲覧して動作確認
ちゃんと間違いなくローカルに置いたはずのJSONを読み取ってくれない...。
(unknown provider がどうのこうのというjsのエラーがでている)

なまじJSONファイルが噛んでいたのでapplication/jsonの設定とか色々疑った挙句、上記解決策に辿りつき事無きを得た(イマココ)
参考記事のパターン1の書き方からパターン2に修正

あとついでに変数が2つ以上のときはこうする様子

HTML(引用)
<div ng-app="myApp">
  <div ng-controller="HogeCtrl">(略)</div>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('HogeCtrl', ['$scope', '$http', function($scope, $http) {
  //略
}]);

とりあえずAngularJSをGruntでminifyして訳が分からなくて泣いてる似たような初心者の人が助かると嬉しいなーと思いました!

(Qiita登録したばっかりなので使い方分かってなくてブログっぽくなったけどこれでいいのだろうか)
(おこられたら消したりなおしたりします)

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?