grunt 및 r.js/requirejs를 사용하여 수동으로 부트 스트랩하는 각도

Question

node/grunt 스택에서 실행되는 기존 프로젝트에 requirejs를 통합하려고합니다. r.js 옵티 마이저를 사용하여 모든 것을 함께 연결하고 의존성을 통해 국수를 사용하여 마술을 수행하고 싶습니다.

단일 .js 파일을 작성하기 위해 r.js를 얻을 수 있지만 오류는 없습니다 ...하지만 아무 일도 발생하지 않습니다. 내 코드에 중단 점을 설정했지만 아무 것도 시작되지 않습니다. 실제로 앱은 결코 이 아니며 bootstrap.js 파일을 실행합니다. bootstrap.js를 즉각적인 함수에 넣으려고 시도했지만 물론 실행되지만 dependencies는 아직로드되지 않았습니다. 내가 여기서 무엇을 놓치고 있니?

파일 구조 :

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에 대한 자세한 내용은이 스레드를 참조하십시오.