AngularAMD和RequireJS，有時不加載AngularJS過濾器

Question

我嘗試使用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;

          };
    });
    ......

我注意到，該錯誤發生在定義過濾器之前，因為控制台在錯誤后打印“加載主應用程序代碼”。 但是在刷新（有時不是一次刷新）后，應用程序即可正常運行。 我還要提及，也許很重要，我在html <span>{{p | getProfit}}</span> <span>{{p | getProfit}}</span> 。

Answer 1

問題似乎發生在您的indexApp.js文件中。 因為您在同一模塊中同時使用了define('app',[])和require(['app']) ，而沒有同步它們的加載順序。

將有2個解決方案：

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.將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) {