AngularJS - 应用内部件的异步加载

AngularJS - Asynchronous loading of parts within the app

目前我正在开发我的应用程序,我决定使用 AngularJS 作为构建我的前端代码的框架。但是,我对 AngularJS 没有任何经验,因此,目前正在为它的概念和逻辑而苦苦挣扎。

您可以在下面看到我的应用程序脚手架的草稿:

所以我想做的是为我的整个应用程序创建一个单页应用程序

<menu bar> 中,可以 select 不同的页面显示在工作区中。我了解到我可以通过使用 <ng-view> 指令来实现此行为。

但是,我想做的是,根据 <workspace>(-> 当前加载的视图)中单击的按钮,我想显示不同 <sidebars>

例如:如果单击工作区内的 edit object 按钮,用于编辑对象的表单将加载到边栏中。

起初我虽然可以通过在应用程序中使用多个 ng-view 指令来解决这个问题,但我了解到这是不可能的。

那么,您对如何实现上述行为有什么想法吗? 我想在应用程序需要时异步加载 <sidebar> templates。这些侧边栏模板应该包含一些逻辑,例如提交数据等按钮

我真的不知道如何实现这种行为,因为我也在为如何在这种情况下使用范围和控制器而苦苦挣扎。

强烈建议任何想法、文章、示例!谢谢。

编辑: 我创建了一个小型且仅最小化的草稿,描述了我认为 AngularJS 将如何处理该过程:

可以使用Angular-UI。

UI-路由器比默认的 AngularJS 路由器具有更强大的路由功能。

对于视图,使用 Angular-UI,您可以在同一个文档中有多个视图(ui-视图)并且每个视图都可以加载不同的模板,具体取决于当前应用程序状态(URL)。

以下是这些组件的文档:

你一定要看看!

请注意,一旦您获得两个模板,它们将处于不同的范围内,因此您需要某种通信服务来处理从一个范围到另一个范围的数据传递,而无需进入 $watch 或 $ rootscope 地狱。