如何将此AngularJS HTML模板添加到我的Angular 8项目中

Question

问题是我有很多HTML模板，其中包含带有AngularJS代码的<script>标签。 我当前的项目正在使用Angular 8，其中一个关键部分基本上包括我在这个新项目中使用的所有AngularJS模板尽可能少地工作（因为将来其他用户必须是能够为项目添加新模板）。

我必须能够将此HTML AngularJS模板添加到我当前的项目中。 为此，我使用ngUpgrade，但它一直是误导，我无法实现这一点。

这是一个模板，尽可能简化这个问题：

HTML

    <body>
        <script>
            angular.module('myApp', [])
                .controller('myController', function ($scope, $timeout) {   
                $scope.local = 'es'; 
                BigFunction($scope, $timeout);
            });

            var texts = {
                title: {
                en: 'A simple title',
            };
            // other constanst go here

            function BigFunction(scope, timeout) {
                scope.texts = texts;
                scope.$watch('content', function(end, ini){
                    // some logic when 'content' changes
                }, true);
            // more logic
            }
        <script>
        <div>
            <!-- Lots of tags using ng-bind and other AngularJS tools -->
        </div>
    </body>

我必须尽可能少地整合它。 我不知道是否应该将脚本的逻辑与HTML分开，或者我是否可以将其导入，因为它现在正在工作。 考虑到我以前没有使用AngularJS的经验，我是Angular 2+开发人员。

如果我必须将逻辑与模板分开，我在哪里放置angular.module ？ 和常数？

Answer 1

我推荐ng-book，它有关于混合应用程序的完整章节。 请注意，不推荐使用本书中的UpgradeAdapter。 但是许多概念仍然有效。

NgUpgrade是你想要的官方套餐。

您必须做的第一件事是将脚本放在适当的文件中。 而不是在HTML中。 然后你可以做严肃的编码。

您必须按照NgUpgrade文档运行2个应用程序。 https://angular.io/guide/upgrade#bootstrapping-hybrid-applications

你需要一个AngularJS的引导程序：

angular.bootstrap(document.body, ['heroApp'], { strictDi: true });

和Angular 8的一个bootstrap：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);

你会注意到NgModule有一个指向AngularJs的参考线。

他们提供的代码用于JIT编译。

AOT编译中的生产构建将如下所示：

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';

const { AppModuleNgFactory } = require('../aot/src/app/AppModule.ngfactory');

enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

-

你必须知道AngularJS中的指令对应于Angular 8中组件的含义。

你有2个选择。

inject Angular 8 components in ANgular JS directives
inject Angular JS directives in ANgular 8 components.

我建议在Angular 8组件中升级ANgularJs组件。 就像将来一样，你只会转向Angular 8。

在Angular 8组件中复制每个AngularJS组件需要一些工作。

要减少工作量，请按原样运行Angular JS。 并将Angular 8指令放在AngularJS的模板之外。

<div id="angularjs-root"></div>
<div my-unaltereted-angular8-component></div>

这可能是我错了，你不能把它们放在一边。 但值得一试。

我自己，我将DOM元素从Angular8动态注入到JQuery应用程序中。 但是你不能在AngularJS中这样做，因为它具有所有节点的生命周期。 HOwever谨慎地删除了节点的变化检测渲染，Angular 8中的巨大节点树可以注入到ANgularJs模板的模板中，并且不会降级。

这就是我使用的。

  addComponentToElement({ component, element }: { component: any, element: any }) {
    // Create a component reference from the component
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory(component)
      .create(this.injector);

    // Attach component to the appRef so that it's inside the ng component tree
    this.appRef.attachView(componentRef.hostView);

    // Get DOM element from component
    const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    // Append DOM element to the body
    element.appendChild(domElem);

    // detect changes
    componentRef.changeDetectorRef.detectChanges();
  }

AppModule需要在entryComponents中添加每个组件：

  entryComponents: [ InjectedCOmponent1m InjectedCOmponent2]

Answer 2

我建议你使用Web Components

基本上你必须将AngularJS应用程序包装为Web组件，然后将其导入到Angular 8应用程序中。 你最终会得到这样的东西

<my-angularjs-app></my-angularjs-app>

它可以导入Angular 8应用程序中的任何组件。

关于如何做到这一点没有官方解决方案，但那里有很好的例子。 我建议你关注这个：

使用Web组件进行升级：从ANGULARJS到ANGULAR

一旦你在那里向下滚动，直到你看到将AngularJS组件公开为自定义元素

在您将AngularJS应用程序捆绑为Web组件之后，将整个应用程序放在一个脚本（main.js）中，您必须将其复制到Angular 8应用程序中。

在Angular 8应用程序中，创建文件夹资源/ web-components / my-angularjs-app
将您从AngularJS（main.js）生成的文件复制到刚刚创建的文件夹中
在angular.json导入文件 - 将其添加到脚本： assets/web-components/my-angularjs-app/main.js
您的AngularJS应用程序现已导入，但在您可以在组件中使用它之前还有一件事需要做。 你必须让Angular知道会有一些Angular可能不知道的选择器。 为此，请转到app.module.ts并添加schemas: [CUSTOM_ELEMENTS_SCHEMA]
您现在可以使用您声明的选择器在您喜欢的任何地方使用AngularJS应用程序（此部分位于我发布的链接中）。 <my-angularjs-app></my-angularjs-app>

如何将此AngularJS HTML模板添加到我的Angular 8项目中

问题描述

2 个解决方案

解决方案1
2 2019-07-05 09:05:04

解决方案2
2 2019-07-05 09:23:14

如何将此AngularJS HTML模板添加到我的Angular 8项目中

问题描述

2 个解决方案

解决方案1 2 2019-07-05 09:05:04

解决方案2 2 2019-07-05 09:23:14

解决方案1
2 2019-07-05 09:05:04

解决方案2
2 2019-07-05 09:23:14