HOW CAN ANGULAR HELP US?

Templates are easy to understand.
Iterating on new designs involves less work.
Angular is built for testing.
Less will go wrong in JavaScript land.
No more jQuery DOM manipulation...
...which means no more inline JavaScript.

Design changes are hard

HTML

<div class="miniProfile lift:MiniProfileSnippet.render">
    <h2 class="displayName"><a href="">masterblaster69</a></h2>
    <img class="avatar" alt=""/>
</div>

MiniProfileSnippet.render

 class MiniProfileSnippet {
  def render = {
    ". miniProfile *" #> unboxProfiles(username).map{miniProfile =>
      ".displayName" #> miniProfile.displayName &
        ".avatar [src]" #> miniProfile.avatarUrl &
        ".avatar [alt]" #> miniProfile.displayName "'s avatar" &
        ".profileLink [href]" #> miniProfile.linkUrl
    }  
  }
}

Curly (em)brace me

Embraced :)

<div class="miniProfile" ng-controller="MiniProfileCtrl">
    <h2><a href="{{url}}">{{displayName}}</a></h2>
    <img alt="{{alt}}" ng-src="{{avatar}}"/>
</div>

Not embraced :(

<div class="miniProfile lift:MiniProfileSnippet.render">
    <h2 class="displayName"><a href="">masterblaster69</a></h2>
    <img class="avatar" alt=""/>
</div>

Data Binding made easy

Putting the data into $scope

var app = angular.module('MiniProfile', []);

app.controller('MiniProfileCtrl', function($scope){
    $scope.displayName = 'masterblaster69';
    $scope.url = '/profile/overview/51f1ad63c02615c0de1ab82a';
    $scope.avatar = 'some/avatar/url.png';
    $scope.alt = 'user avatar';
});

The "stuff" in the curly braces are in $scope

<div class="miniProfile" ng-controller="MiniProfileCtrl">
    <h2><a href="{{url}}">{{displayName}}</a></h2>
    <img alt="{{alt}}" ng-src="{{avatar}}"/>
</div>

(design) ignorance is bliss

The old design template:

<div class="miniProfile" ng-controller="MiniProfileCtrl">
    <h2><a href="{{url}}">{{displayName}}</a></h2>
    <img alt="{{alt}}" ng-src="{{avatar}}"/>
</div>

The new, text-only, design (but with the same data):

<span ng-controller="MiniProfileCtrl">
    {{displayName}}'s {{alt}} can be downloaded at:<br>
    {{avatar}} and their profile is located
    <a href="{{url}}">here</a>.
</span>

(The Controller doesn't change)

The Power of Directives

Event binding, conditional views, and more!

<div class="miniProfile" ng-controller="MiniProfileCtrl"
        ng-mouseenter="showMiniProfile()"
        ng-mouseleave="hideMiniProfile()">
    <h2><a href="{{url}}">{{displayName}}</a></h2>
    <img alt="{{alt}}" ng-src="{{avatar}}"/>
    <ul>
        <li ng-show="gender">{{gender}}</li>
        <li ng-show="location">{{location}}</li>
    </ul>
</div>

Directives Cont'd

Just a few more you might like...

ng-submit
ng-class-even / ng-class-odd
ng-click
ng-keyup
ng-include
ng-repeat
ng-disabled

ng-app (Tell angular to do stuff)

For your directives to work, you need to tell initialize Angular. There are multiple ways to do this, but this is the simplest, most basic method.

<div ng-app>
    <a class="userName" href=""
        ng-controller="MiniProfileCtrl"
        popover-placement="{{isViewable() && 'top' || 'bottom'}}"
        ng-mouseenter="showMiniProfile()"
        ng-mouseleave="hideMiniProfile()"
        popover-template="miniprofile.html">username</a>
</div>

ng-app (But a bit more specific)

You can also pass in a Module name, which would only initialize Angular "stuff" for that particular module.

 <div ng-app="MiniProfile">
    <a class="userName" href=""
            ng-controller="MiniProfileCtrl"
            popover-placement="{{isViewable() && 'top' || 'bottom'}}"
            ng-mouseenter="showMiniProfile()"
            ng-mouseleave="hideMiniProfile()"
            popover-template="miniprofile.html">username</a>
</div>

angular.module('MiniProfile', ['ui.bootstrap.popover'])
       .controller('MiniProfileCtrl', function($scope){...});

"Lazy" Angular

If you want to hold off on initializing your

Angular module, no problem!

<div>
    <a class="userName" href=""
        ng-controller="MiniProfileCtrl"
        popover-placement="{{isViewable() && 'top' || 'bottom'}}"
        ng-mouseenter="showMiniProfile()"
        ng-mouseleave="hideMiniProfile()"
        popover-template="miniprofile.html">username</a>
</div>

$('.userName').on('mouseenter', function(){
    angular.bootstrap($this, ['MiniProfile']);
});

ANGULAR IS A SPA FRAMEWORK

(Single Page App)

A single page can have multiple modules.
Each instance of a Controller has its own scope.
Angular can use Routes to control the view.
Two-way data binding automatically updates the view.

"[Angular] handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a well-defined structure." --Google

Why Angular JS?

By Curt Kirkhoff