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;

          };
    });
    ......

我注意到，错误发生在定义过滤器之前，因为控制台在错误后打印 'Load main app code'。但刷新后（有时不是一次刷新）应用程序开始工作正常。我还想提一下，我在 html <span>{{p | getProfit}}</span> 上使用的 getProfit 过滤器可能很重要。

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

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

AngularAMD and RequireJS, sometimes not load AngularJS filter

requirejs

angularjs

angular-amd

会有2种解法：