[英]AngularAMD and RequireJS, sometimes not load AngularJS filter
I try implement lazy loading front-end app using requirejs, angularAMD and angular, but sometimes app not found 'getProfit' filter and I got: 我尝试使用requirejs,angularAMD和angular实现延迟加载前端应用程序,但是有时应用程序未找到“ getProfit”过滤器,但我得到了:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.2/$injector/unpr?p0=getProfitFilterProvider%20%3C-%20getProfitFilter
main.js 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: 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>
我还要提及,也许很重要,我在html
<span>{{p | getProfit}}</span>
<span>{{p | getProfit}}</span>
. <span>{{p | getProfit}}</span>
。
Problem seem like occurs in your indexApp.js
file. 问题似乎发生在您的
indexApp.js
文件中。 Because you use both define('app',[])
and require(['app'])
in a same module without synchronization their loading order. 因为您在同一模块中同时使用了
define('app',[])
和require(['app'])
,而没有同步它们的加载顺序。
1. Move all the content in require()
block to define()
block . 1.将
require()
块中的所有内容移到define()
块中 。
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). 2.将
require()
块中的所有内容移动到另一个文件(模块)。 Then using angularAMD.filter
instead of app.filter
然后使用
angularAMD.filter
代替app.filter
Assuming this file will be filter.js
and in the same directory with indexApp.js
假设此文件将是
filter.js
并与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
. 然后在
indexApp.js
。 Load the filter.js
module. 加载
filter.js
模块。
define("app",['angularAMD', 'boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives', 'filter'], function (angularAMD) {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.