feat($compile): overload .component() to accept object map of components

Register multiple components with single call as it is possible with other module units.

Closes #14579 
Closes #16062

Author: ksvitkovsky

src/ng/compile.js

@@ -1144,7 +1144,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
    * @ngdoc method
    * @name $compileProvider#component
    * @module ng
-   * @param {string} name Name of the component in camelCase (i.e. `myComp` which will match `<my-comp>`)
+   * @param {string|Object} name Name of the component in camelCase (i.e. `myComp` which will match `<my-comp>`),
+   *    or an object map of components where the keys are the names and the values are the component definition objects.
    * @param {Object} options Component definition object (a simplified
    *    {@link ng.$compile#directive-definition-object directive definition object}),
    *    with the following properties (all optional):
@@ -1227,6 +1228,11 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
    * See also {@link ng.$compileProvider#directive $compileProvider.directive()}.
    */
   this.component = function registerComponent(name, options) {
+    if (!isString(name)) {
+      forEach(name, reverseParams(bind(this, registerComponent)));
+      return this;
+    }
+
     var controller = options.controller || function() {};
 
     function factory($injector) {

test/ng/compileSpec.js

@@ -12089,6 +12089,7 @@ describe('$compile', function() {
     it('should return the module', function() {
       var myModule = angular.module('my', []);
       expect(myModule.component('myComponent', {})).toBe(myModule);
+      expect(myModule.component({})).toBe(myModule);
     });
 
     it('should register a directive', function() {
@@ -12107,6 +12108,34 @@ describe('$compile', function() {
       });
     });
 
+    it('should register multiple directives when object passed as first parameter', function() {
+      var log = '';
+      angular.module('my', []).component({
+        fooComponent: {
+          template: '<div>FOO SUCCESS</div>',
+          controller: function() {
+            log += 'FOO:OK';
+          }
+        },
+        barComponent: {
+          template: '<div>BAR SUCCESS</div>',
+          controller: function() {
+            log += 'BAR:OK';
+          }
+        }
+      });
+      module('my');
+
+      inject(function($compile, $rootScope) {
+        var fooElement = $compile('<foo-component></foo-component>')($rootScope);
+        var barElement = $compile('<bar-component></bar-component>')($rootScope);
+
+        expect(fooElement.find('div').text()).toEqual('FOO SUCCESS');
+        expect(barElement.find('div').text()).toEqual('BAR SUCCESS');
+        expect(log).toEqual('FOO:OKBAR:OK');
+      });
+    });
+
     it('should register a directive via $compileProvider.component()', function() {
       module(function($compileProvider) {
         $compileProvider.component('myComponent', {