AngularJS — Templates

Template Syntax

<!-- Expressions -->
<p>{{name}}</p>
<p>{{price | currency}}</p>

<!-- Directives -->
<div ng-show="isVisible">Visible</div>
<div ng-repeat="item in items">{{item}}</div>

<!-- Bindings -->
<input ng-model="name">

Template with Controllers

<div ng-controller="UserController">
  <h1>{{user.name}}</h1>
  <p>{{user.email}}</p>
  <button ng-click="editUser()">Edit</button>
</div>

Template Inclusion

<!-- Include template -->
<div ng-include="'views/header.html'"></div>
<div ng-include="'views/footer.html'"></div>

ng-view

<!-- In index.html -->
<div ng-view></div>

Templates with Routing

$routeProvider
  .when('/home', {
    templateUrl: 'views/home.html'
  })
  .when('/about', {
    templateUrl: 'views/about.html'
  });

Mini Practice

1. Use expressions
2. Include templates
3. Use ng-view
4. Create template-driven UI

Up Next

Continue with Animations — AngularJS animations.