feat: add new module "ngStyle" support css loading via component

Gruntfile.js

@@ -230,6 +230,10 @@ module.exports = function(grunt) {
         dest: 'build/angular-messages.js',
         src: util.wrap(files['angularModules']['ngMessages'], 'module')
       },
+      style: {
+        dest: 'build/angular-style.js',
+        src: util.wrap(files['angularModules']['ngStyle'], 'module')
+      },
       animate: {
         dest: 'build/angular-animate.js',
         src: util.wrap(files['angularModules']['ngAnimate'], 'module')
@@ -268,6 +272,7 @@ module.exports = function(grunt) {
       resource: 'build/angular-resource.js',
       route: 'build/angular-route.js',
       sanitize: 'build/angular-sanitize.js',
+      style: 'build/angular-style.js',
       aria: 'build/angular-aria.js',
       parseext: 'build/angular-parse-ext.js'
     },

angularFiles.js

@@ -40,6 +40,7 @@ var angularFiles = {
     'src/ng/sanitizeUri.js',
     'src/ng/sce.js',
     'src/ng/sniffer.js',
+    'src/ng/styleComponent.js',
     'src/ng/templateRequest.js',
     'src/ng/testability.js',
     'src/ng/timeout.js',
@@ -139,6 +140,9 @@ var angularFiles = {
       'src/ngSanitize/sanitize.js',
       'src/ngSanitize/filter/linky.js'
     ],
+    'ngStyle': [
+      'src/ngStyle/style.js'
+    ],
     'ngMock': [
       'src/ngMock/angular-mocks.js',
       'src/ngMock/browserTrigger.js'
@@ -202,7 +206,8 @@ var angularFiles = {
     'test/jquery_alias.js',
     'src/angular-bootstrap.js',
     'src/ngScenario/angular-bootstrap.js',
-    'src/angular.bind.js'
+    'src/angular.bind.js',
+    'src/ngStyle/style.js'
   ],
 
   'karmaScenario': [
@@ -240,7 +245,8 @@ var angularFiles = {
     'src/angular-bootstrap.js',
     'src/ngScenario/angular-bootstrap.js',
     'test/jquery_remove.js',
-    'src/angular.bind.js'
+    'src/angular.bind.js',
+    'src/ngStyle/style.js'
   ]
 };
 
@@ -263,6 +269,7 @@ angularFiles['angularSrcModules'] = [].concat(
   angularFiles['angularModules']['ngResource'],
   angularFiles['angularModules']['ngRoute'],
   angularFiles['angularModules']['ngSanitize'],
+  angularFiles['angularModules']['ngStyle'],
   angularFiles['angularModules']['ngMock'],
   angularFiles['angularModules']['ngTouch'],
   angularFiles['angularModules']['ngAria']

src/AngularPublic.js

@@ -94,7 +94,8 @@
   $$RAFProvider,
   $WindowProvider,
   $$jqLiteProvider,
-  $$CookieReaderProvider
+  $$CookieReaderProvider,
+  $$StyleComponentProvider
 */
 
 
@@ -254,6 +255,7 @@ function publishExternalAPI(angular) {
         $sce: $SceProvider,
         $sceDelegate: $SceDelegateProvider,
         $sniffer: $SnifferProvider,
+        $$styleComponent: $$StyleComponentProvider,
         $templateCache: $TemplateCacheProvider,
         $templateRequest: $TemplateRequestProvider,
         $$testability: $$TestabilityProvider,

src/ng/compile.js

@@ -1246,6 +1246,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl',
         template: makeInjectable(template),
         templateUrl: makeInjectable(options.templateUrl),
+        styles: options.styles,
+        styleUrls: options.styleUrls,
         transclude: options.transclude,
         scope: {},
         bindToController: options.bindings || {},
@@ -1490,9 +1492,9 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
   this.$get = [
             '$injector', '$interpolate', '$exceptionHandler', '$templateRequest', '$parse',
-            '$controller', '$rootScope', '$sce', '$animate', '$$sanitizeUri',
+            '$controller', '$rootScope', '$sce', '$animate', '$$sanitizeUri','$$styleComponent',
     function($injector,   $interpolate,   $exceptionHandler,   $templateRequest,   $parse,
-             $controller,   $rootScope,   $sce,   $animate,   $$sanitizeUri) {
+             $controller,   $rootScope,   $sce,   $animate,   $$sanitizeUri, $$styleComponent) {
 
     var SIMPLE_ATTR_NAME = /^\w/;
     var specialAttrHolder = window.document.createElement('div');
@@ -2541,6 +2543,12 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           }
         }
 
+        if (directive.styles) {
+            $$styleComponent.registerStyles(directiveName, directive.styles);
+        } else if (directive.styleUrls) {
+            $$styleComponent.registerStyleUrls(directiveName, directive.styleUrls);
+        }
+
         if (directive.template) {
           hasTemplate = true;
           assertNoDuplicate('template', templateDirective, directive, $compileNode);
@@ -2714,6 +2722,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           if (scopeBindingInfo.removeWatches) {
             isolateScope.$on('$destroy', scopeBindingInfo.removeWatches);
           }
+
+          if ($$styleComponent.isRegistered(directiveName)) {
+            $$styleComponent.loadStyles(directiveName);
+            isolateScope.$on('$destroy', function() {
+              $$styleComponent.unLoadStyles(controllerDirective.name);
+            });
+          }
         }
 
         // Initialize bindToController bindings
@@ -3067,7 +3082,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           beforeTemplateCompileNode = $compileNode[0],
           origAsyncDirective = directives.shift(),
           derivedSyncDirective = inherit(origAsyncDirective, {
-            templateUrl: null, transclude: null, replace: null, $$originalDirective: origAsyncDirective
+            templateUrl: null, transclude: null, replace: null, styleUrls: null, styles: null, $$originalDirective: origAsyncDirective
           }),
           templateUrl = (isFunction(origAsyncDirective.templateUrl))
               ? origAsyncDirective.templateUrl($compileNode, tAttrs)

src/ng/styleComponent.js

@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ * @ngdoc provider
+ * @name $$styleComponentProvider
+ *
+ * @description
+ * Default implementation of $style that doesn't perform any action, instead just
+ * synchronously resolves the returned promise.
+ *
+ * In order to enable style the `ngStyle` module has to be loaded.
+ *
+ * To see the functional implementation check out `src/ngStyle/style.js`.
+ */
+  var $$StyleComponentProvider = /** @this */ function() {
+
+    this.$get = [function() {
+        return {
+          registerStyles: noop,
+          registerStyleUrls: noop,
+          loadStyles: noop,
+          unLoadStyles: noop,
+          isRegistered: function() { return false; }
+        };
+      }];
+  };