使用grunt和r.js/requirejs獲取角度以手動引導

Question

我正在嘗試將requirejs集成到現有項目中，該項目在節點/ grunt堆棧上運行。我想使用r.js優化器將所有內容連接在一起，並通過依賴來實現其魔力。

我能夠得到r.js構建一個.js文件，並且沒有錯誤......但沒有任何反應。我在我的代碼中設置了斷點，但是沒有任何東西被啓動 - 應用程序從未實際運行運行 bootstrap.js文件。我試圖把bootstrap.js放在一個直接函數中，當然它會運行，但是依賴關係還沒有加載（看起來）。我在這裏錯過了什麼？

文件結構：

app 
-> modules 
- -> common 
- - -> auth.js // contains an auth call that needs to return before I bootstrap angular 
-> app.js 
-> index.html 
config 
-> main.js 
node_modules 
vendor 
-> angular/jquery/require/domready/etc 
gruntfile.js 

gruntfile requirejs任務：

requirejs: { 
    compile: { 
    options: { 
     name: 'app', 
     out: 'build/js/app.js', 
     baseUrl: 'app', 
     mainConfigFile: 'config/main.js', 
     optimize: "none" 
    } 
    } 
}, 

main.js配置：

require.config({ 
    paths: { 
    'bootstrap':  '../app/bootstrap', 
    'domReady':  '../vendor/requirejs-domready/domReady', 
    'angular':  '../vendor/angular/angular', 
    'jquery':  '../vendor/jquery/jquery.min', 
    'app':   'app', 
    'auth':   '../app/modules/common/auth', 
    requireLib:  '../vendor/requirejs/require' 
    }, 
    include: ['domReady', 'requireLib'], 

    shim: { 
    'angular': { 
     exports: 'angular' 
    } 
    }, 

    // kick start application 
    deps: ['bootstrap'] 
}); 

app.js：

define([ 
    'angular', 
    'jquery', 
], function (angular, $) { 
    'use strict'; 

    $("#container").css("visibility","visible"); 

    return angular.module('app'); 
}); 

個

bootstrap.js：

define([ 
    'require', 
    'angular', 
    'app', 
    'jquery', 
    'auth' 
], function (require, angular, app, $, auth) { 

    var Authentication = auth.getInstance(); 
    .. do auth stuff... 

     if (Authentication.isAuthorized) { 
     require(['domReady!'], function (document) { 
      angular.bootstrap(document, ['app']); 
     }); 
    } 
); 

Answer 1

您需要設置進入您的應用程序的要點;這裏是app.js，但是你在這個文件中所做的只是定義這些文件的依賴關係，而不是實際加載任何代碼。您需要將代碼改成這樣：

require([ 
    'angular', 
    'jquery', 
], function (angular, $) { 
    'use strict'; 

    $("#container").css("visibility","visible"); 

    return angular.module('app'); 
}); 

看到這個主題，詳細瞭解the difference between define and require。