TIPS「AngularJSを使ってオリジナルのビューをつくる方法」（下記URL）と同様の方法で、kintone アプリのHTML+AngularJSでオリジナルの一覧画面を作っています。
ですが、HTMLの文字数制限 10,000 文字に引っかかってしまい、
機能追加ができなくなってしまいました。
HTML Minifier
http://www.willpeavy.com/minifier/
などのツールを用いて、9900文字以上のHTMLコードを
ギリギリ詰め込んでいるのですが、さらに機能を追加する必要に迫られ
苦慮しています。
10,000文字の制限というのは、どうにもならないものなのでしょうか？
よろしくお願い致します。
平井建丸様
cstapの落合です。
ViewをすべてカスタマイズビューのHTMLに記述しているため、文字数制限に引っかかっているのかと思います。
Viewは、カスタマイズビューのHTMLに記述するのではなく、JavaScriptのファイル内に記述してはどうでしょう？
Angularは普段使いしていないので間違っていたら申し訳ありませんが、ルーティングで以下のように設定するとtemplateにHTMLを渡せるかと思います。
angular.module('angularSampleApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
template: '<div>sample</div>',
controller: 'MainCtrl'
});
});
しかし、このままtemplateに文字列としてHTMLを書くのは気持ち悪いですし、JavaScriptも機能別にファイルを分けたほうが管理しやすいでしょう。
こういった際は、私の場合以下の様なツールを利用して開発しています。
Angular界隈では、ビルドシステムにGruntの方がよく使われているイメージはあります。
それぞれのツールの使い方は割愛しますが、ソースのイメージとしては以下の様な感じです。
var angular = require('angular');
angular.module('angularSampleApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
template: require('./templates/index.html'),
controller: 'MainCtrl'
});
});
<div>sample</div>
これをGulpかGruntでビルドして１つのJavaScriptファイルを生成します。
kintoneにアップロードするファイルは、ビルドされたファイルだけになります。
また、Angularはnpmでインストールします。
必要なパッケージをpackage.jsonに記述して
npm install
してください。
以上、参考になりますでしょうか？
落合様
ありがとうございます。
なるほど、GulpやGruntで、テンプレートHTMLも含めて
ビルドすることが出来るのですね。
ありがとうございました。
大変参考になります。
平井建丸様
かなり少ない説明で申し訳ありませんm(_ _)m
わからない点がありましたら、またご質問ください！
落合様に提案頂いた、GulpやGruntでtemplateをビルドする方法は改めて試したいのですが、さしあたり手っ取り早い方法として、以下のようにディレクティブを用いることで、実現できましたので共有します。
HTML
<body>
<replaced-parts/>
</body>
javascript
app.directive(‘replacedParts’, function() {
return {
restrict : ‘E’,
require : ‘^ngModel’,
replace : true,
template: ‘<span>元のHTML</span>’
};
});
平井建丸様
共有ありがとうございます！
GulpやBrowserifyなどを利用するとなると少し学習コストもかかるので、簡単なものであれば平井様の方法でも良いかと思います。