如何将非SPA AngularJS应用程序移植到Angular,每个页面一个组件?

yebdmbv4  于 2023-04-19  发布在  Angular
关注(0)|答案(1)|浏览(139)

我有一个相当大的遗留ASP .NetMVC应用,它在大约20个不同页面的每一个上使用不同的AngularJS控制器,很多模块、服务和指令都是共享的,但是这个应用从来没有使用过AngularJS的路由;每个页面实际上都是它自己的应用程序,有自己的ng-app标签,当.NET MVC视图呈现时加载。每个页面在正常的AngularJS方式下都是非常动态的,但是页面之间的路由由MVC专门处理。
我在AngularJS方面非常有经验,但对Angular 2+是新手,只做过英雄之旅教程和一些其他示例。我认为我可以用Angular做一些非常类似的事情-基本上将每个控制器重写为组件,并在一个Angular应用程序中开发所有内容,使用CLI构建它,将适当的dist/脚本链接到每个MVC视图中,但在每个MVC视图上仅使用一个组件。
例如,我希望将以下内容放到Billing MVC视图中:

<app-root>
   <app-billing-component></app-billing-component>
</app-root>

并将此放置到平面视图中

<app-root>
   <app-plan-component></app-plan-component>
</app-root>

但是当我尝试概念证明时,构建过程只给了我一个非常基本的index.html页面,上面有一个空的<app-root>元素,因为包括所有HTML模板在内的所有内容都被推送到main.js文件中。(或任何其它文件,就像我的MVC视图一样)不起作用,因为main.js被编译为“全部或全部”,就好像这是一个SPA而不是其他HTML页面/我不知道如何将一个组件放入每个视图中,而不是在单独的“应用程序”中开发它们,并为每个视图构建不同的main.js文件。
我无法想象我的需求是独一无二的,但我还没有找到一个例子,有人试图做同样的事情。我的问题是:我该怎么做?有没有办法调整构建?我是否必须找到一种方法来链接特定的文件到我的MVC视图中,而不使用ng build

wrrgggsh

wrrgggsh1#

虽然不完全一样,但我正在将SPA Rails + AngularJS应用程序移植到Rails + Hotwire上,遇到了同样的问题。我实际上使用的是AngularJS路由,所以这很棘手。
我提出的解决方案是为旧的AngularJS前端和Hotwire前端设置不同的命名空间,然后作为其中的一部分,为每个前端设置不同的基本布局文件,为两个框架加载不同的需求。

eg:
http://localhost:3000/api/v1 <-- This is for my AngularJS
http://localhost:3000/ <-- This is for hotwire

首先,我必须创建一个名称空间,并将所有旧代码移到使用该名称空间的位置,因为我希望新框架位于根地址上。

相关问题