Requirejs +(多)angular +打字稿
dev*_*qon 13 amd requirejs typescript angular
我好像撞墙了,我无法分解.我正在使用angular + typescript,并希望使用requirejs.定义了多个角度应用程序,这些应用程序依赖于正文上的data-app-name属性进行加载.
文件夹结构(简化):
|- Libs
|- angular
|- some-plugin
|- angular-some-plugin // Exposes an angular.module("ngSomePlugin")
|- require.js
|- Common
|- Common.ts // Exposes an angular.module("common")
|- App1
|- Controllers
|- SomeController.ts
|- SomeOtherController.ts
|- Services
|- SomeService.ts
|- Main.ts
|- App.ts
|- App2
// same as above
|- AppX
// same as above
|- Index.html
|- Main.ts
内容:
index.html的:
// All these attributes are set dynamically server-side
<body id="ng-app-wrapper" data-directory="App1" data-app-name="MyApp">
<script src="Libs/require.js" data-main="Main"></script>
</body>
Main.ts:
console.log("Step 1: Main.js");
requirejs.config({
paths: {
"angular": "Libs/angular/angular",
"common": "Common/common"
},
shim: {
"angular": {
exports: "angular"
}
}
});
require(["angular"], (angular: angular.IAngularStatic) => {
angular.element(document).ready(function() {
var $app = angular.element(document.getElementById("ng-app-wrapper"));
var directory = $app.data("directory");
var appName = $app.data("app-name");
requirejs.config({
paths: {
"appMain": directory + "/Main"
}
});
require([
'common',
'appMain'
], function () {
console.log("Step 5: App1/Main.js loaded");
console.log("Step 6: Bootstrapping app: " + appName);
angular.bootstrap($app, [appName]);
});
});
});
App1中的主要内容:
console.log("Step 2: App1/Main.js");
requirejs.config({
paths: {
"app": "App1/App",
"somePlugin": "Libs/some-plugin/some-plugin", // This is an AMD module
"ngSomePlugin": "Libs/angular-some-plugin/angular-some-plugin"
},
shim: {
"ngSomePlugin": {
exports: "ngSomePlugin",
deps: ["somePlugin"]
}
}
});
define([
"app"
], () => {
console.log("Step 4: App.js loaded");
});
应用1/App.ts:
console.log("Step 3: App.js");
import SomeController = require("App1/Controllers/SomeController");
import SomeOtherController = require("App1/Controllers/SomeOtherController");
import SomeService = require("App1/Services/SomeService");
define([
"angular",
"ngSomePlugin"
], (angular: angular.IAngularStatic) => {
// This isn't called, so obviously executed to late
console.log("Defining angular module MyApp");
angular.module("MyApp", ["common", "ngSomePlugin"])
.controller("someCtrl", SomeController.SomeController)
.controller("someOtherCtrl", SomeOtherController.SomeOtherController)
.service("someService", SomeService.SomeService)
;
});
然而这似乎打破了,好的错误:未捕获错误:[$ injector:nomod]模块'MyApp'不可用!您要么错误拼写了模块名称,要么忘记加载它.
问题1:
我在这做错了什么？angular.module()在引导我的应用程序之前,如何确保调用已完成？
这是console.logs的输出,你可以看到angular还没有定义模块angular.module("MyApp"),所以这很明显地做到了:
更新 我可以在App.ts中解开角度调用,因此它不需要任何东西(除了顶部的导入).然后,如果我将App添加到App1/Main.ts中的垫片,并在那里放置依赖项,它似乎工作.这是解决这个问题的好方法吗？
UPDATE2 如果我在App.ts中使用require而不是define,它会实例化角度模块,但仍然在它尝试引导它之后.
问题2:
有没有办法传递自定义配置,例如Libs所在的目录名称？我尝试了以下似乎不起作用的(Main.ts):
requirejs.config({
paths: {
"appMain": directory + "/Main"
},
config: {
"appMain": {
libsPath: "Libs/"
},
"app": {
name: appName
}
}
});
应用1/Main.ts:
define(["module"], (module) => {
var libsPath = module.config().libsPath;
requirejs.config({
paths: {
"somePlugin": libsPath + "somePlugin/somePlugin"
// rest of paths
}
});
define([ // or require([])
"app"
], () => {});
});
App.ts:
define([
"module"
// others
], (module) => {
angular.module(module.config().name, []);
});
但是这样,逻辑上,angular.bootstrap()不会等待App.ts加载.因此,角度模块尚未定义,并且无法自举.看来你不能像App1/Main.ts那样做嵌套定义？我该如何配置？
rmc*_*rng -1
Related to Question 1:
In App1/App.ts, shouldn't the function return the angular module for it to be injected.
eg.
define([
"angular",
"ngSomePlugin"
], (angular: angular.IAngularStatic) => {
return angular.module("MyApp", ["common", "ngSomePlugin"])
.controller("someCtrl", SomeController.SomeController)
.controller("someOtherCtrl", SomeOtherController.SomeOtherController)
.service("someService", SomeService.SomeService)
;
});
| 归档时间： |
|
| 查看次数： |
905 次 |
| 最近记录： |