在 AngularJs 中创建“小部件”的建议方法是什么？答案

【问题标题】：What is the suggested approach for creating 'widgets' in AngularJs?在 AngularJs 中创建“小部件”的建议方法是什么？
【发布时间】：2014-05-29 22:56:25
【问题描述】：

我想创建由小部件样式组件组成的页面，每个组件都从自己的后端数据源 (SignalR) 动态馈送。

我希望能够单独开发这些组件，并独立测试它们，然后通过将它们放入框架来组成页面。

使用 AngularJs，正确的方法是什么？

【问题讨论】：

标签： javascript html angularjs web single-page-application

【解决方案1】：

我会在它自己的模块上创建每个小部件，然后在主 AngularJS 应用程序上我会将这些模块作为依赖项注入。

类似这样的：

    // bundling a set of directives/widgets in a module. 
    // You can create a module for each widget though...
    (function(){
          var app = angular.module('myWidgets',[]);
          app.factory('serviceTwo',['$http',function($http){...my service code}]);
          app.directive('widgetOne',function(){...etc});
          app.directive('widgetTwo',['serviceTwo',function(serviceTwo){...}]);
    })();

然后在 «consumer» 应用程序上...

    (function(){
        var myConsumerApp = angular.module('myConsumerApp',['myWidgets']);
        etc...
     })();

然后你就可以在你的主应用程序中以任何其他方式使用指令：

    <div ng-app="myConsumerApp">

       <widget-one></widget-one>
       <widget-two></widget-two> etc...

    </div>

这将是我的方法。

【讨论】：