Basic AngularJS example

This is the very basic AngularJS example where you see all the power of the framework.

by Gabor Laszlo Hajba

HTML

<div ng-app="MyModule" ng-init="colors=[{code:'#000000', name:'Black'}, {code:'#FFFFFF', name:'White'}, {code:'#FF0000', name:'Red'}, {code:'#00FF00', name: 'Green'}, {code: '#0000FF', name: 'Blue'}]">
    <p>Name: <input type="text" ng-model="name"></input></p>
 	<p>Hello {{name}}!</p>
    <p>Hello <span ng-bind="name" >World</span>!</p>

<p>Available colors</p>
<ul>
  <li ng-repeat="color in colors">
    {{color.name + ' (' + color.code + ')'}}
  </li>
</ul>
    
    <p >Select a color</p>
    <select ng-model="selectedColor" ng-options="color.name for color in colors"></select>

    Currently selected: {{ selectedColor.name + ' (' + selectedColor.code + ')' }}
    <div style="border:solid 1px black; height:20px" ng-style="{'background-color':selectedColor.code}"></div>

    <p>Filter some colors:</p>
    <input type="text" ng-model='filterText' />
    <ul>
      <li ng-repeat='color in colors | filter:filterText'>{{color.name + ' (' + color.code + ')'}}</li>
    </ul>
    
</div>

JavaScript

var application = angular.module('MyModule', []);