How angular defines css

Question

Angular defines some css classes like ng-hide and more. How and where it does it? in angular.js I've a possible definition:

 * ### Overriding .ng-hide
 *
 * By default, the `.ng-hide` class will style the element with `display:none!important`. If you wish to change
 * the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the `.ng-hide`
 * class in CSS:
 *
 * ```css
 * .ng-hide {
 *   /&#42; this is just another form of hiding an element &#42;/
 *   display:block!important;
 *   position:absolute;
 *   top:-9999px;
 *   left:-9999px;
 * }
 * ```

If it's really the definition, what's that ```css syntax? Found nothing about it.

I think the following question could help you http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs — Rishabh Malhotra, Mar 05 '15 at 15:10
You can disable this behavior in production setting the `$compileProvider.debugInfoEnabled` — Avraam Mavridis, Mar 05 '15 at 15:22

score 1 · Answer 1 · answered Mar 05 '15 at 15:14

Angular defines some css classes like ng-hide and more.

No, it doesn't. Those are HTML classes.

There is no such thing as a CSS class. CSS has class selectors which allow you to apply styles to elements based on which HTML classes they are members of.

Angular uses HTML classes primarily to select elements with JavaScript, not CSS.

The few areas where it does use CSS can be found in the CSS directory of the source tree.

what's that ```css syntax?

That isn't CSS. It is markdown. It means "This is a block of code". You are looking at the source code to documentation. It will be parsed by markdown (and, presumably, a tool like JSDoc) and converted into HTML.

score 0 · Accepted Answer · answered Mar 05 '15 at 15:18

You're looking at comments which are meant to be used as documentation, not the actual code.

If you scroll right to the bottom of the angular.js file, you'll see a line beginning with:

!angular.$$csp() && angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}</style>');

That's where the actual CSS is defined. There's not that much of it, and it's pretty much just limited to hiding things like this.

How angular defines css

2 Answers2