个人中心
gpt4 book ai didi

angular - Requirejs +(多) Angular + typescript

转载 作者：太空狗 更新时间：2023-10-29 17:01:45 25 4
gpt4 key购买 nike

我好像撞到了一堵我无法打破的墙。我正在使用 angular + typescript，并想让它与 requirejs 一起工作。定义了多个 Angular 应用程序，这些应用程序根据主体上的数据应用程序名称属性加载。

文件夹结构(简化):

|- 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

内容:

索引.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>

主要.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");
});

App1/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)
        ;
});

然而，这似乎中断了，出现了一个很好的旧错误: Uncaught Error :[$injector:nomod] 模块“MyApp”不可用!您要么拼错了模块名称，要么忘记加载它。

问题 1:

我在这里做错了什么？在引导我的应用程序之前，如何确保完成 angular.module() 调用？

这是 console.logs 的输出，在这里你可以看到 angular 还没有定义模块 angular.module("MyApp")，所以这显然是迟到了: Console log

更新我可以在 App.ts 中解包 Angular 调用，所以它不需要任何东西(除了顶部的导入)。然后，如果我将 App 添加到 App1/Main.ts 中的垫片，并在那里放置依赖项，它似乎可以工作。这是解决这个问题的好方法吗？

更新2如果我在 App.ts 中使用 require 而不是 define，它会实例化 Angular 模块，但仍然在尝试引导它之后。

问题 2:

有什么方法可以传递自定义配置，例如库所在的目录名称？我尝试了以下似乎不起作用的方法 (Main.ts):

requirejs.config({
    paths: {
        "appMain": directory + "/Main"
    },
    config: {
        "appMain": {
            libsPath: "Libs/"
        },
        "app": {
            name: appName
        }
    }
});

App1/Main.ts:

define(["module"], (module) => {
    var libsPath = module.config().libsPath;
    requirejs.config({
        paths: {
            "somePlugin": libsPath + "somePlugin/somePlugin"
            // rest of paths
        }
    });

    define([ // or require([])
        "app"
    ], () => {});
});

应用.ts:

define([
    "module"
    // others
], (module) => {
    angular.module(module.config().name, []);
});

但是从逻辑上讲，angular.bootstrap() 不会等待 App.ts 加载。因此， Angular 模块尚未定义，无法引导。似乎您不能像在 App1/Main.ts 中那样进行嵌套定义？我该如何配置？

最佳答案

问题1

Alexander Beletsky 写了一个 great article关于将 requireJS 和 Angular 结合在一起(以及为什么值得这样做)。在其中，我认为他可以回答您的第一个问题:从另一个模块加载 Angular ，然后进行引导调用。 这会强制 requireJS 在执行任何代码之前加载这些模块的依赖项。

假设这是你的 main.ts

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 的 main 中，您制作了实际的应用程序并立即加载它。

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 的位置。在这里，您将设置顺序以获取已经完成 Angular 加载顺序的对象。完成后，您便可以在 init() 函数中调用 Bootstrap 。

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"]);
     }

}

关于angular - Requirejs +(多) Angular + typescript ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33499931/

25 4 0
文章推荐： performance - Python，迭代正则表达式但在第一次匹配时停止的最快方法
文章推荐： c - 宏扩展正确，但给我 "expected expression"错误
文章推荐： python - 为什么我不能为 csv.Reader 重复 'for' 循环？
文章推荐： C、内联函数和GCC
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com