requirejs、angularAMD、およびangularを使用して遅延読み込みフロントエンドアプリを実装しようとしましたが、アプリが「 getProfit」フィルターを見つけられず、次のようになりました:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.2/$injector/unpr?p0=getProfitFilterProvider%20%3C-%20getProfitFilter
main.js
if(document.location.hostname == "localhost")var ghost = "http://localhost:8080/project/";
else var ghost = "/";
require.config({
baseUrl: ghost+"resources/web/app/",
paths: {
'angular' : '//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min',
'angularAMD' : '//cdn.jsdelivr.net/angular.amd/0.2.0/angularAMD.min',
'boostrapMin' : ghost+'resources/web/js/bootstrap.min',
'jQuery' : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
'boostrap-angular-ui' : 'https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min',
'howCtrl' : ghost+'resources/web/app/controllers/howCtrl',
'depositBoxCtrl': ghost+'resources/web/app/controllers/depositBoxCtrl',
'calendarCtrl' : ghost+'resources/web/app/controllers/calendarCtrl',
'labCtrl' : ghost+'resources/web/app/controllers/labCtrl',
'urlSer' : ghost+'resources/web/app/services/urlSer',
'userSer' : ghost+'resources/web/app/services/userSer',
'chartSer' : ghost+'resources/web/app/services/chartSer',
'dialogService': ghost+'resources/web/app/services/dialogsSer',
'paymentsSer' : ghost+'resources/web/app/services/paymentsSer',
'daterService' : ghost+'resources/web/app/services/dateSer',
'statsCounter' : ghost+'resources/web/app/services/statsCounter',
'directives' : ghost+'resources/web/app/directives/directives',
'filters' : ghost+'resources/web/app/filters/filters',
'oddsFilter' : ghost+'resources/web/app/filters/oddsFilter',
'n3-line-chart': ghost+'resources/web/js/bower_components/n3-line-chart/build/line-chart.min',
'd3' : 'http://d3js.org/d3.v3.min',
//'d3' : ghost+'/resources/web/js/bower_components/d3/d3.min',
'n3-pie-chart' : ghost+'resources/web/js/bower_components/n3-charts.pie-chart/dist/pie-chart.min',
'nvd3ChartDirectives' : ghost+'resources/web/js/bower_components/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.min',
'nvd3' : ghost+'resources/web/js/bower_components/nvd3/nv.d3.min',
'jquery.sparkline': ghost+'resources/web/js/jquery.sparkline.min',
'matchesApp' : ghost+'resources/web/app/matchesApp',
'labApp' : ghost+'resources/web/app/labApp'
}
shim: {
'boostrapMin' : ['jQuery'],
'boostrap-angular-ui': ['angular','jQuery','boostrapMin'],
'n3-line-chart' : ['angular'],
'n3-pie-chart' : ['angular'],
'nvd3ChartDirectives' : ['angular'],
'jquery.sparkline' : ['jQuery'],
'angularAMD': ['angular'],
'nvd3' : ['d3'],
'howCtrl' : ['d3','nvd3'],
},
deps: ['indexApp']
});
indexApp.js:
define("app",['angularAMD','boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives'], function (angularAMD) {
'use strict';
console.log("webApp initilization...");
var webApp = angular.module('webApp',['ui.bootstrap','n3-line-chart','n3-pie-chart','nvd3ChartDirectives']);
webApp.config(function($httpProvider,$locationProvider) {
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
$locationProvider.html5Mode({enabled:true,requireBase: false,rewriteLinks:false});
})
return angularAMD.bootstrap(webApp);
});
require(['app',"jquery.sparkline"], function(app) {
'use strict';
console.log("Load main app code ....", app);
// add getProfit filter too app
app.filter('getProfit', function () {
return function (pick) {
if(pick.wl)return Math.round((pick.bOdd-1) * 100) / 100;
return -1;
};
});
......
エラーの後にコンソールが「メインアプリコードの読み込み」を出力するため、フィルターを定義する前にエラーが発生することに気付きました。ただし、更新後(1回の更新ではない場合もあります)、アプリは正常に起動します。また、言及したいのですが、おそらく重要です.htmlで使用するgetProfitフィルターです<span>{{p | getProfit}}</span>
。