anglejs – 需要(多)角度的打字稿

发布时间：2020-12-17 09:16:16 所属栏目：安全来源：网络整理

导读：我似乎已经打了墙,我无法分解.我正在使用角度的脚本,并希望使它与requirejs一起工作.定义了多个角度应用程序,这些应用程序根据正文的数据应用程序名称属性进行加载. 文件夹结构(简体)： |- Libs |- angular |- some-plugin |- angular-some-plugin // Expose

我似乎已经打了墙,我无法分解.我正在使用角度的脚本,并希望使它与requirejs一起工作.定义了多个角度应用程序,这些应用程序根据正文的数据应用程序名称属性进行加载.

文件夹结构(简体)：

|- 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中的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.SomeController)
        .controller("someOtherCtrl",SomeOtherController.SomeOtherController)
        .service("someService",SomeService.SomeService)
        ;
});

这似乎打破了,与旧的错误：
未捕获错误：[$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那样做一个嵌套的定义？我该如何配置？

问题1

亚历山大·贝雷斯基(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"]);
     }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!