什么是建立小部件的建议方法'在AngularJs?

时间:2014-05-29 13:49:06

标签: javascript html5 angularjs web single-page-application

我想创建由窗口小部件样式组件组成的页面,每个组件都从其自己的后端数据源(SignalR)动态提供。

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

使用AngularJs,正确的方法是什么?

1 个答案:

答案 0 :(得分: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){...}]);
    })();

然后在«消费者»应用程序......

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

然后您可以在主应用程序中以任何其他方式使用指令:

    <div ng-app="myConsumerApp">

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

    </div>

这将是我的方法。