I try implement lazy loading front-end app using requirejs, angularAMD and angular, but sometimes app not found 'getProfit' filter and I got:
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;
};
});
......
I've noticed, that error occurs before define filter because console print 'Load main app code' after error. But after refresh (sometime not one refresh) app start work normal. Also I want to mention, maybe it is important, getProfit filter I use on html <span>{{p | getProfit}}</span>
<span>{{p | getProfit}}</span>
.
Problem seem like occurs in your indexApp.js
file. Because you use both define('app',[])
and require(['app'])
in a same module without synchronization their loading order.
1. Move all the content in require()
block to define()
block .
define("app",['angularAMD','boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives', 'jquery.sparkline'], 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});
})
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;
};
});
return angularAMD.bootstrap(webApp);
});
2. Move all the content in require()
block to another file (module). Then using angularAMD.filter
instead of app.filter
Assuming this file will be filter.js
and in the same directory with indexApp.js
define(["angularAMD", "jquery.sparkline"], function(angularAMD) {
'use strict';
console.log("Load main app code ....");
// add getProfit filter too app
angularAMD.filter('getProfit', function () {
return function (pick) {
if(pick.wl)return Math.round((pick.bOdd-1) * 100) / 100;
return -1;
};
});
});
Then in your indexApp.js
. Load the filter.js
module.
define("app",['angularAMD', 'boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives', 'filter'], function (angularAMD) {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.