AngularJS + RequireJS不能正常工作

我正在用RequireJS來使用AngularJS。AngularJS + RequireJS不能正常工作

新問題： RequireJS不加載任何控制器。我正在使用this tutorial。

老問題： RequireJS加載main.js文件，該文件bootstrap.min.js和jQuery。這很好。但由於某些原因，它不會加載角度。

我正在使用chrome，而在開發者工具選項卡「network」中只有上面提到的3個文件加載。

console.log(typeof angular);等於undefined。（我曾在開發者控制檯中試過）

控制檯中沒有顯示錯誤消息！

解決方案：我通過給deps陣列添加'角度'來修復它。

我main.js代碼： //要求JS配置

require.config({ // Code format changed 
// alias library paths 
paths: { 
    'jquery': '../bower_components/jquery/dist/jquery.min', 
    'domReady': '../bower_components/requirejs-domready/domReady', 
    'angular': '../bower_components/angular/angular.min', 
    'angular-route': '../bower_components/angular-route/angular-route.min', 
    'ngFx': '../bower_components/ngFx/dist/ngFx.min', 
    'angular-ui-router': '../bower_components/angular-ui-router/release/angular-ui-router.min', 
    'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min' 
}, 

// angular does not support AMD out of the box, put it in a shim 
shim: { 
    'angular': { 
     exports: 'angular' 
    }, 
    'angular-route': { 
     deps: [ "angular" ] 
    }, 
    'ngFx': { 
     deps: [ "angular" ] 
    }, 
    'angular-ui-router': { 
     deps: [ "angular" ] 
    }, 
    'bootstrap': { 
     deps: [ "jquery" ] 
    } 
}, 

// Kick start application 
deps: [ 
    './bootstrap', 
    'domReady', 
    'angular', 
    'angular-route', 
    'ngFx', 
    'angular-ui-router', 
    'bootstrap' 
] 
});

我bootstrap.js文件：

define([ 
    'require', 
    'angular', 
    'app', 
    'routes' 
], function (require, ng) { 
    'use strict'; 

    require(['domReady!'], function (document) { 
     ng.bootstrap(document, ['app']); 
    }); 
});

我app.js文件：

define([ 
    'angular', 
    './controllers/index', 
    './directives/index', 
    './filters/index', 
    './services/index' 
], function (ng) { 
    'use strict'; 

    return ng.module('app', [ 
     'app.services', 
     'app.controllers', 
     'app.filters', 
     'app.directives', 
     'ngFx', 
     'ngRoute' 
    ]).config(function ($urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 
    }); 
});

文件夾結構：

angular 
    controllers 
     index.js 
     menu.js 
     module.js 
    directives 
    filters 
    services 

    app.js 
    bootstrap.js 
    main.js 
    routes.js 
bower_components 
    ...

謝謝你的幫忙！ :-)

來源

2014-10-10 Cyruxx

'後'angular''成'deps'陣列中的' 添加'/ bootstrap'' – Evgeniy 2014-10-10 07:12:38

你不必要定義多個'exports'屬性角。唯一你需要的是'角'，擺脫其餘的。 – miqid 2014-10-10 07:43:22

我認爲你應該使用angular.bootstrap與RequireJS。你也應該增加角度來縮小。這裏API參考：

https://docs.angularjs.org/api/ng/function/angular.bootstrap

來源

2014-10-10 07:31:16 Mikalai

好的，我已經使用[本教程]（https://www.startersquad.com/angularjs-requirejs/）設置了此功能。 - 向代表添加了Angular可以正常工作。現在存在這樣的問題，即控制器不能從引導程序加載。 – Cyruxx 2014-10-10 07:36:24

下固定我的問題：

添加的依賴關係到main.js的deps陣列。
Twitter Bootstrap和Bootstrap.js文件遇到名稱衝突。我通過將'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min'重命名爲'tw-bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min'並重命名所有其他關係來解決此問題。

來源

2014-10-10 09:16:45 Cyruxx

尋找對同一問題近一小時的解決方案，挖掘出每一種可能的方式，但最終被重命名角模塊名「應用」別的東西即「對myApp」得到了解決。那麼它開始工作。

修訂後的代碼在這裏

define([ 
    'require', 
    'angular', 
    'app', 
    'routes' 
], function (require, ng) { 
    'use strict'; 

    require(['domReady!'], function (document) { 
     ng.bootstrap(document, ['myApp']); 
    }); 
}); 
My app.js file: 

define([ 
    'angular', 
    './controllers/index', 
    './directives/index', 
    './filters/index', 
    './services/index' 
], function (ng) { 
    'use strict'; 

    return ng.module('myApp', [ 
     'app.services', 
     'app.controllers', 
     'app.filters', 
     'app.directives', 
     'ngFx', 
     'ngRoute' 
    ]).config(function ($urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 
    }); 
});

來源

2017-08-04 10:23:43 Ajay

AngularJS + RequireJS不能正常工作

回答

相關問題