Hello, World!

Basic example of data-binding. Just try to type.

Greeting: Name:

HTML
JS

<div ng-controller="HelloWorld as hw" ng-init="hw.greeting = 'Hello'; hw.name = 'World';">
  <label>Greeting:</label>
  <input type="text" ng-model="hw.greeting">

  <label>Name:</label>
  <input type="text" ng-model="hw.name">

  <h3 ng-bind="hw.greeting + ', ' + hw.name + '!'"></h3>
</div>

// no js is needed

To-do list

Example with a controller and a service. Try to add and remove items. It's also persistent, try to reload the page.

You have items on the list. It's time to organize yourself :)

HTML
JS

<div ng-controller="Todo">
  <input type="text" ng-model="newItem" ng-change="saveNewItemValue()">
  <button ng-click="addItem()">Add</button>

  <p ng-show="items.length >= 5" ng-class="{ warning: items.length >= 7 }">
    You have <span ng-bind="items.length"></span> items on the list.
    It's time to organize yourself :)
  </p>

  <ul ng-repeat="item in items">
    <li>
      <button ng-click="removeItem(item)">&times;</button>
      <span ng-bind="item.name"></span>
    </li>
  </ul>
</div>

ng.controller('Todo', ['_', 'storage'], function (_, storage) {
  var self = this;

  self.newItem = storage.get('newItem') || '';

  self.items = storage.get('items') || [];

  self.saveNewItemValue = function () {
    storage.set('newItem', self.newItem);
  }

  self.addItem = function () {
    self.items.push({ name: self.newItem });
    storage.set('items', self.items);
  };

  self.removeItem = function (item) {
    self.items = _.without(self.items, item);
    storage.set('items', self.items);
  }
});

ng.service('storage', ['_'], function (_) {
  return {
    get: function (key) {
      try {
        return JSON.parse(localStorage.getItem(key));
      } catch (err) {
        return localStorage.getItem(key);
      }
    },
    set: function (key, value) {
      if (_.isObject(value) || _.isArray(value)) {
        value = JSON.stringify(value);
      }

      localStorage.setItem(key, value);
    }
  }
});

Forms

Example with forms, working data-binding for different types of controls.

Name About

Adult

Gender

Male Female

Country

HTML
JS

<form method="post" action="http://google.com" ng-controller="Forms">
  <label>Name</label>
  <input type="text" ng-model="name">

  <label>About</label>
  <textarea ng-model="about"></textarea>

  <div>
    <label>
      <input type="checkbox" ng-model="adult"> Adult
    </label>
  </div>

  <label>Gender</label>
  <div>
    <label>
      <input type="radio" name="gender" value="male" ng-model="gender"> Male
    </label>
    <label>
      <input type="radio" name="gender" value="female" ng-model="gender"> Female
    </label>
  </div>

  <label>Country</label>
  <select ng-model="country">
    <option value="usa">America</option>
    <option value="eng">England</option>
    <option value="rus">Russia</option>
  </select>

  <button type="submit" ng-click="alert($inspect())">Submit</button>

  <pre ng-bind="$inspect()"></pre>
</form>

ng.controller('Forms', [], function () {
  this.name    = 'Speransky Danil';
  this.about   = 'Software Engineer';
  this.adult   = true;
  this.gender  = 'male';
  this.country = 'rus';
});

Author (Speransky Danil): Personal Page | LinkedIn | GitHub | StackOverflow