ng.style: beautiful html
with angular came declarative html, now ng.style makes it beautiful. This module requires twitter bootstrap's css to be included in your application. Although the example below contains a lot of whitespace, ng.style - unlike many templating engines - is not whitespace sensitive.
example
shorthand
-
angular
Get rid of the
ng-
prefix for angular directivesbecomes
-
html
<br 4>
becomes<br><br><br><br>
<nbs 3>
becomes
-
css
Use css style syntax directly in your html
<div .class1 .class2></div>
becomes<div class="class1 class2"></div>
<div #id1 #id2></div>
becomes<div id="id1 id2"></div>
<div style:1 style:2></div>
becomes<div style="style:1; style:2"></div>
-
javascript
js style comments are removed from the template
// inline comments will be removed/*block comments will be removed*/<!-- html comments will remain untouched --> -
bootstrap
Get rid of bootstrap's redundant classes. For example, eliminate
class="btn"
becomes
alerts
In your templates
In your controllers
ng
Available methods are info
, success
, warning
, danger
. These methods take two arguments: the alert's message, and truthy/falsy if the message should be flashed. By default, alerts appear instantly. Flashed messages, however, appear on the next page (e.g., route change) rather than the current page.
An additional helper, alert.clear(all)
will clear all alerts on the current page. If all
is truthy, the flash messages on the next page will be cleared as well.
file inputs
Inputs with type=file cannot be styled with css. ng.style automatically makes these inputs invisible and moves all their attributes over a new button that can be styled. The new button's onclick event will be set to activate the invisible file input.
becomes
form groups
Bootstraps form groups are painful and involve a lot of redundant code. ng.style's form-group directive will
- add the form-control class to child inputs
- add an inline help-blocl if an error attribute is present
- add a label and placeholder if a label attribute is present
would become
Password {{ password.$invalid ? "Must be at least 6 characters" : " "}}
0.0.0-rc2
- Changed from run to a config to ensure that it is run before ng.template transform
0.0.0-rc1
- Initial commit
todos
- Feel free to email adam.kircher@gmail.com with suggestions!
- Add aliases for other redundant bootstrap classes besides
class="btn"
related projects
- ng: angular reimagined
- ng.seed: create a modular ng application using npm packages
- ng.data: simple getter/setter for data persistence
- ng.cql: realtime cassandra database syncing
- ng.auth: example authentication using ng interceptors
- ng.crud: example demonstrating a simple crud application using ng.seed