bower installしてきたモジュールをMEAN.JSアプリに追加する手順

MEAN.JSアプリにangular-file-upload（danialfarid/angular-file-upload · GitHub）を入れてみた．

CSSやらjsを追加するファイルの場所が分からん…ってなったのでメモ．

モジュールのインストール

bower install ng-file-upload --save

bower.jsonのdependenciesに名前が追加される．

モジュール名を確認

モジュール追加時はファイル名じゃなくてモジュール名が必要になる．

インストールしたモジュールはpublic\libに入っているのでそこから探す．

var angularFileUpload = angular.module('angularFileUpload', []);

CSS, jsを追加

config\env\all.jsのassetsに書き足す．

assets: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
],
js: [
...,

'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
'public/lib/angular/angular.js',
'public/lib/ng-file-upload/angular-file-upload.min.js'
]
}

モジュールを追加

public\config.jsのapplicationModuleVendorDependenciesにモジュール名を追加．

var applicationModuleVendorDependencies =
['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];

これでおしまい．