在AngularJS上加载部分功能的正确方法是什么？

Question

我有一个复杂的角度应用程序，其中有一些功能在默认情况下不应该存在。有些表单只有在单击某个按钮或某些配置处于活动状态时才能看到（让我们称之为“部分”）。以这个简化的例子为例：

var app = angular.module('myApp', [])
  .controller('controller', function() {
    var partial_html = "<input>bla bla";
    var float_partial_html = "<input>ble ble";

    this.show_random_gen = function() {
      //load a partial on .partial
    }
    this.show_random_float_gen = function() {
      //load another partial on .partial
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main" ng-app="myApp" ng-controller="controller as ctrl">
  <p>Other stuff....</p>
  <button ng-click="ctrl.show_random_gen()">Gen Random</button>
  <button ng-click="ctrl.show_random_float_gen()">Gen Random Float</button>
</div>
<div class="partial">

</div>

在示例中，您有一个界面，其他功能（由“其他东西......”表示），然后您有2个按钮。每个人都应该加载额外的功能。我的观点是：最好的方法是什么？

我至少可以想到两种方式，一些更简单，一些更丑陋：

• 将这些模块作为separeted partials（当前在html上），将其模型和数据放在主控制器上，然后在点击时隐藏/显示它们。

• 将它们作为带有不同角度模块或控制器的html外部模板加载。

对于更大的应用程序，第二种方法似乎更好，但我不知道如何实现它。解决这个问题的正确方法是什么？