AngularAMD和RequireJS，有时不加载AngularJS过滤器

Question

我尝试使用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;

          };
    });
    ......

我注意到，这个错误发生在定义过滤器之前，因为控制台在错误后打印“Load主应用程序代码”。但是经过刷新(有时不是一次刷新)，应用程序开始正常工作。另外，我还想提到，也许这很重要，我在html <span>{{p | getProfit}}</span>上使用了<span>{{p | getProfit}}</span>过滤器。

Answer 1

问题似乎发生在您的indexApp.js文件中。因为您在同一个模块中同时使用了define('app',[])和require(['app'])，而没有同步它们的加载顺序。

将有两个解决办法：

1.将require() define() 块中的所有内容移动到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.将require() 块中的所有内容移动到另一个文件(模块)。然后使用angularAMD.filter而不是app.filter。

假设此文件为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;

          };
    });
});

然后在你的indexApp.js里。加载filter.js模块。

 define("app",['angularAMD', 'boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives', 'filter'], function (angularAMD) {