AngularJS – 应用程序内部件的asynchronous加载

目前我正在处理我的应用程序，并决定使用AngularJS作为框架来构build我的前端代码。但是，我对AngularJS没有任何经验，所以我现在正在为它的概念和逻辑而挣扎。

下面你可以看到我的应用脚手架的草稿：

所以我想要做的是为我的整个应用程序创build一个单一的页面应用程序。

在<menu bar>可以select不同的页面在工作区内显示。我知道我可以通过使用<ng-view>指令来实现这种行为。

然而，我想要做的是，取决于<workspace> （ – >当前加载的视图）中点击的button，我想显示不同的<sidebars> 。

例如：如果单击工作区内的edit objectbutton， edit object的表单将被加载到侧栏中。

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

那么，对于如何实现上述行为你有什么想法吗？我想asynchronous加载<sidebar> templates只要在应用程序中需要它们。这些边栏模板应该包含一些逻辑，例如提交数据的button等。

我真的不知道如何去实现这个行为，因为我在这种情况下如何使用范围和控制器也很困难。

任何想法，文章，例子都强烈build议！谢谢。

编辑：我创build了一个小的，只有最小化的草稿，我想象AngularJS会处理这个过程：在这里输入图像说明

你可以使用Angular-UI。

UI路由器比默认的AngularJS路由器具有更强大的路由function。

对于使用Angular-UI的视图，可以在同一个文档（ui-view）中拥有多个视图，每个视图可以根据当前的应用程序状态（URL）加载不同的模板。

以下是这些组件的文档：

你绝对应该检查出来！

请注意，一旦你得到你的两个模板，他们将在不同的范围内，所以你需要某种通信服务来处理从一个范围到另一个范围的数据，而不会进入$ watch或$ rootcope地狱。