AngularJS:如何在 Angular 应用程序中嵌套应用程序 [英] AngularJS: How to nest applications within an angular app

问题描述

我一直在研究一个更像框架的项目，并且有几个可以安装的应用程序/模块.将其视为基本应用商店或 google.play 商店.这是一种内部网应用程序，所有模块都可以添加到您的用户帐户中.

该框架已经在开发中，但我现在正在考虑应用程序/模块的想法.(开发中的概念证明链接，可在此处找到)

应用程序应该有点独立，并且不能突然包含框架中的脚本，通过将它们构建在单独的模块中是完全可能的，如下所示:

angular.module('myApp', []);

但是，应用程序可以有模板、脚本、css，并且可以在单独的服务器上运行，因此我正在寻找获取脚本和 cssfile 并动态加载它们的最佳方法当用户从框架内启动 app 时进入应用.

• 目前我正在构建应用程序，就好像它们有一个主模板，例如 www.framework.com/apps/myapp/views/app.html，为了简单起见，我将脚本捆绑到每个应用程序 1 个脚本文件，因此还包含一个 www.framework.com/apps/myapp/script.js.

该框架包含一个加载应用程序的模板和一个 appController.该模板包含以下内容:

<div>正在加载...</div>

这基本上绑定到 $scope.app.appTemplate ，它在加载所有脚本时更新，所以首先它显示一个加载模板，稍后在页面中包含脚本后它更新 app.appTemplate 到上面提到的应用程序的主模板.

在加载第一个索引模板时，该模板当前是使用框架中的 AppController 加载的，因此它使用的是框架的 $scope 而不是它自己的脚本.

我仍然需要以某种方式启动应用程序自己的 angular 模块，让它自己独立运行，而无需在框架中运行任何东西来使其工作"

我仍在弄清楚如何最好地加载依赖的 javascript 文件(可能会使用 requrejs 或其他依赖加载器)，但我目前不知道如何在不从框架的 AppController 中工作的情况下启动"应用程序

编辑

我创建了一个小型演示项目来展示手头的问题，完整代码在 git-hub 上可见 目前这个项目做了一些硬编码的事情，想法是当我得到正确的概念证明时，我会减少那些硬编码，现在一切都是关于在框架内加载应用程序.如果可能的话，我可以想到从哪里获取 URL 和应用程序名称...

解决方案

你不能在另一个引导模块中引导一个模块.Bootstrapping 编译视图并将 rootScope 绑定到它，遍历它的方式通过 DOM 并设置范围绑定和执行指令链接函数.如果你这样做两次，你就会遇到问题.

您可能需要重新考虑您的架构.我认为可能与 Angular 相关的模块"或应用程序"这个词用词不当，会导致您走上错误的道路.

您的应用程序中的每个用户安装的应用程序"实际上应该由您的应用程序模块中的控制器控制，或者注册到您的应用程序模块引用的模块.因此，您不会启动多个应用程序"，您实际上只是启动一个应用程序，引用其他模块，然后使用这些模块中的控制器来控制屏幕上的部分视图.

您要做的是在安装了新的小部件"后，向系统注册它的模块文件 (.js)，该文件将包含一个名为 WidgetCtrl 的控制器，然后当您的页面加载时，您将在您的应用程序模块上引用小部件的模块.从那里它应该可用于使用 ng-controller 和/或 ng-include 动态分配给元素.

我希望这是有道理的.

i've been working on a project that is more like a framework, and has several apps / modules you can install. See it like a basic appstore or google.play store. It's sort of an intranet application, and all modules can be added to your useraccount.

the framework is already in development, but i'm wrapping my head around the applications/modules idea now. (link to a proof of concept in development, can be found here)

an application should be somewhat standalone, and not able to suddenly include scripts from the framework, This is perfectly possible by structuring them in separate modules like so:

angular.module('myApp', []);

however, an app can have templates, scripts, css and it can run on a separate server, so I'm kind of looking for the best way to fetch the script(s) and cssfile(s) and dynamically load them into the app when the user starts the app in from within the framework.

• currently I'm structuring apps as if they have a main template for example www.framework.com/apps/myapp/views/app.html, for the sake of simplicity i bundle scripts into 1 script file per application, so there is also a www.framework.com/apps/myapp/script.js to be included.

The framework contains a template that loads the apps, and an appController. The template contains this piece:

<div data-ng-controller="AppController" data-ng-include="app.appTemplate">
    <div>loading...</div>
</div>

this basically binds to the $scope.app.appTemplate which is updated when all scripts are loaded, so first it shows a loading template, later after scripts are included in the page it updates the app.appTemplate to the above mentioned main template of an application.

while loading the first index template works, this template is currently loaded with the AppController from the framework, so it is using the $scope of the framework and not it's own script.

I still have to somehow start the app's own angular module, and let it on it's own without running anything in the framework to 'make it work'

I'm still figuring out how to best load the dependent javascript files (will probably use requrejs or other dependency loader) but I have currently no clue how to 'boot' the app without working from within the framework's AppController

EDIT

I created a small demo project to show the problems at hand, full code is visible at git-hub at the moment this project does a few things hard coded, the idea would be that I make those less hard coded when I get the proof of concept right, now it's all about loading the applications within the framework. if that is possible, I can think of where to get the URL's and application names from ...

解决方案

You can't bootstrap a module inside another bootstrapped module. Bootstrapping compiles the view and binds a rootScope to it, traversing it's way through the DOM and setting up scope bindings and executing directive linking functions all the way through. If you do that twice, you're going to run into problems.

You're probably going to have to rethink your architecture. I think perhaps the word "module" or "app" as it pertains to Angular is a misnomer and is leading you down the wrong path.

Each "user installed app" in your application should probably really be controlled by a controller in your app module, or registered to a module referenced by your app module. So you wouldn't be "starting up multiple apps", you'd really just be starting one, referencing the other modules, then using Controllers from those modules to control parts of your view on the screen.

What you'd do is when a new "widget" was installed, you're register it's module file (.js) with the system, which would contain a controller named WidgetCtrl, then when your page loaded, you'd reference the widget's module on your app module. From there it should be available for dynamic assignment to elements using ng-controller and/or ng-include.

I hope that makes sense.

这篇关于AngularJS:如何在 Angular 应用程序中嵌套应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！