AngularJS + HTML5 + CSS = Magic

AngularJS allows you to do amazing things, couple that with HTML5 and CSS and it's borderline magic.

HTML5 has an new color input ability, this allows us to choose colors, which returns the color code as text.



Current selection: {{bgcolor}}

One of the features of Angular is real time updating. This allows for dynamic data. Try the example below.

AngularJS is {{input}}



Now if we couple that with HTML5 and some CSS we get this, as you've seen above:



Pretty Cool! Color: {{boxcolor}}



Using Angular's dynamic entity abilities we are able to control the CSS style of this box. Take it a step further and we can control ANY CSS value we want (just has to be in the <style> tags on the page). Here's a few more examples.

Font Color

Font Size


CSS

The CSS can be used in-line like such

<span style="color:{{fontcolor}}">Font Color</span>  

Or in style tags like such

<style>  
.class {
  background-color: {{color}};
};
»

HTML5 Input: Numbers with Decimals

HTML5 is a great leap forward, one of the many improvements is form control. When you wanted to allow only numbers with decimals you had to rely on jQuery or another tool. You couldn't use type="number" because it only allowed for whole numbers. Try it below!

But now it's easy to allow decimals with the step="any" attribute to allow decimals. No longer do you need JavaScript!

The number input looks like this:

<input type="number" step="any">  
»

HTML 5 Input Forms

HTML 5 is cool, but it's hipster, many browsers don't work with all of HTML 5 yet.

Here is what does work in the browsers:

Here is a breakdown of input types that DON'T work yet:

Google Chrome (20.0+) :
type = "datetime"
type = "datetime-local"
type = "month"
type = "week"

Firefox:
type = "date"
type = "datetime"
type = "datetime-local"
type = "month"
type = "week"

IE:
type = "date"
type = "datetime"
type = "datetime-local"
type = "month"
type = "week"

»