大佬教程收集整理的这篇文章主要介绍了anglejs – 需要(多)角度的打字稿，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
文件夹结构(简体)：
|- 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>@H_365_1@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中的Main.ts
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@L_540_8@meController)
.controller("someOtherCtrl",SomeOtherController@L_540_8@meOtherController)
.service("someservice",Someservice@L_540_8@meservicE)
;
});
这似乎打破了,与旧的错误：
未捕获错误：[$inject：nomod]模块’MyApp’不可用！您拼错了模块名称或忘记加载它.
问题1：
我在这里做错了什么？在我引导我的应用程序之前,如何确保angular.module()调用完成？
这是console.logs的输出,在那里你可以看到角度还没有定义模块angular.module(“MyApp”),所以这样做明显晚了：
updatE
我可以在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那样做一个嵌套的定义？我该如何配置？
亚历山大·贝雷斯基(Alexander Beletsky)写了一篇关于将requireJS和Angular联系在一起的great article(以及为什么它值得的).在其中,我想他有你的第一个问题的答案：从另一个模块加载角度,然后进行自举呼叫.这迫使需要JS在执行任何代码之前加载这些模块的依赖关系.
假设这是你的主要
console.log("Step 1: Main.js");
requirejs.config({
paths: {
"angular": "Libs/angular/angular","common": "Common/common".
"mainT1": "t1/main.js"
},shim: {
"angular": {
exports: "angular"
}
}
});
requirejs(["app"],function(app) { app.init(); });
在t1的主要内容中,您可以使实际的应用程序一次性加载.
T1 / main.ts
define("app-name",['angular'],function(angular){
var loader = {};
loader.load = function(){
var app = angular.module("app-name",[]);
return app;
}
return loader;
}
最后,我们假设你在这里提供了一个临时文件,它带有你的app.js.在这里,您可以设置顺序来获取已经完成角度加载序列的对象.一旦完成,那么你在init()函数中调用bootstrapping.
T1 / app.js
define("app",function(requirE){
var angular = require('angular');
var appLoader = require('mainT1');
var app = {}
app.init = function(){
var loader = new appLoader();
loader.load();
angular.bootstrap(document,["app-name"]);
}
}
以上是大佬教程为你收集整理的anglejs – 需要(多)角度的打字稿全部内容，希望文章能够帮你解决anglejs – 需要(多)角度的打字稿所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。