AngularJS

Rich client-side interactivity without messy event handlers
MVVM pattern - object-oriented JS and declarative bindings
IE6+ FF2+ Chrome Safari Opera ...
MIT License

Declarative Data-binding

Data-binding programmatically

Basic binding

Explicit binding

Controller

Add custom listeners

Binding collections

Load and Save data

<div class="control-group">
                <label class="control-label" >First name</label>
                <div class="controls">
                    <input type="text" data-ng-model="value.firstName" placeholder="First name">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" >Last name</label>
                <div class="controls">
                    <input type="text" data-ng-model="value.lastName" placeholder="Last name">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>

</div>

</div>
<script src="../js/lib/angular.js"></script>

var serverDB = window.localStorage;

// ============================================
    // CLIENT - jquery ajax functions hacked to call our "Server"

$.getJSON = function(addr, callback) {
        Server.getData(function(data) {
            callback(data && JSON.parse(data));
        });
    };
    $.post = function(addr, data, callback) {
        Server.saveData(data, callback);
    };
    var Demo = angular.module( "Demo", [] );
    Demo.controller('MyCtrl', function($scope) {
        $scope.langs = [{text: "Java"}, {text: "C#"}];

$scope.load = function() {
            $.getJSON('/some/url/data', function(resp) {
                $scope.value = resp;
                $scope.$apply();
            });
        };
        $scope.save = function() {
            $.post('/some/url/save', angular.toJson($scope.value), function() {});
        };
    });
    angular.bootstrap($('#main'), ["Demo"]);
</script>

Binding lists

<h2>TODOS ( {{numDone()}} / {{todos.length}} )</h2>

$scope.numDone = function() {
                var count = 0;
                for(var i = 0; i < $scope.todos.length; i++) {
                    if($scope.todos[i].done)
                        count++;
                }
                return count;
            };
            $scope.add = function(newItem) {
                $scope.todos.push({text:newItem.text, done:false});
                newItem.text = '';
            };

});
        angular.bootstrap($('#main'), ["Demo"]);
    </script>
</div>

Binding lists + Validation

<h2>TODOS ( {{numDone()}} / {{todos.length}} )</h2>

<span data-ng-show="myForm.newItem.$error.required">
                    Required field!
                </span>

<span data-ng-show="myForm.newItem.$error.maxlength">
                    Too long, use fewer characters!
                </span>
            </p>
            <button type='submit' data-ng-disabled="myForm.$invalid" class="btn btn-primary">Add</button>
        </form>
    </div>

$scope.numDone = function() {
                var count = 0;
                for(var i = 0; i < $scope.todos.length; i++) {
                    if($scope.todos[i].done)
                        count++;
                }
                return count;
            };
            $scope.add = function(newItem) {
                $scope.todos.push({text:newItem.text, done:false});
                newItem.text = '';
            };

});
        angular.bootstrap($('#main'), ["Demo"]);
    </script>
</div>

Filters

Basic filter

Basic filter with arguments

Angularjs native filter

<div id='main'>
    <div data-ng-controller="MyScope">
        <input type="text" data-ng-model="search.name"  >
        <table>
            <tr><td>Name</td><td>Phone</td></tr>
            <tr ng-repeat="friendObj in friends | filter:search:false">
                <td>{{friendObj.name}}</td>
                <td>{{friendObj.phone}}</td>
            </tr>
        </table>

</div>
</div>
<script src="../js/lib/angular.js"></script>
<script>
    (function() {
        var Demo = angular.module( "Demo", [] );
        Demo.controller("MyScope", function($scope) {
            $scope.friends = [{name:'John', phone:'555-1276'},
                {name:'Mary', phone:'800-BIG-MARY'},
                {name:'Mike', phone:'555-4321'},
                {name:'Adam', phone:'555-5678'},
                {name:'Julie', phone:'555-8765'},
                {name:'Juliette', phone:'555-5678'}];
        });
        angular.bootstrap($('#main'), ["Demo"]);
    })();
</script>

Dependency Injection

Inject values

Inject Factories (Services)

Directives

Directive Maps Demo

Based on the maps directive

<div style="margin: 1em; padding: 1em; border: solid 1px gray; border-radius: 15px">
        <h1>{{longitude}} / {{latitude}}</h1>
        <hr>
        <input type="text" ng-model="longitude">
        <input type="text" ng-model="latitude">
        <hr>
        <button ng-click="findCurLoc();" class="btn">Find current location</button>
    </div>

// controller
    myApp.controller('mapCtrl', function function_name ($scope) {

$scope.latitude = 42.35670;
        $scope.longitude = -71.05690;

$scope.findCurLoc = function() {
            window.navigator.geolocation.getCurrentPosition(function(position) {
                $scope.latitude = position.coords.latitude;
                $scope.longitude = position.coords.longitude;
                $scope.$apply();
            });
        };
    });

// directive
    myApp.directive('googleMap', function function_name () {
        return {
            scope: {
                lat: '=',
                lng: '='
            },
            link: function (scope, elem, attrs) {

var mapOptions = {
                    zoom             : 8,
                    disableDefaultUI : true,
                    center           : new google.maps.LatLng(scope.lat || 0, scope.lng || 0),
                    mapTypeId        : google.maps.MapTypeId.ROADMAP
                };

var map = new google.maps.Map(elem[0], mapOptions);

// update model when map changes
                google.maps.event.addListener(map, 'center_changed', function() {
                    var center = map.getCenter();
                    var lat = center.lat();
                    var lng = center.lng();
                    if (scope.lat != lat || scope.lng != lng) {
                        //console.log('1: '+scope.lat + ' !== '+lat+", "+scope.lng+" !== "+lng);
                        scope.lat = lat;
                        scope.lng = lng;
                        if(!scope.$$phase) scope.$apply();
                    }
                });

// update map when model changes
                scope.$watch('lng + lat', function () {
                    var center = map.getCenter();
                    var lat = center.lat();
                    var lng = center.lng();
                    if (scope.lat !== lat || scope.lng !== lng) {
                        map.setCenter(new google.maps.LatLng(scope.lat, scope.lng));
                    }
                });
            }
        }
    });

angular.bootstrap(document.getElementById('main'), ["myApp"]);
</script>

Directive Video Demo

Based on the webcam directive

<p>This is going to be sweet!</p>
<webcam></webcam>

// GetUserMedia is not yet supported by all browsers
        // Until then, we need to handle the vendor prefixes
        navigator.getMedia = ( navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);

var Demo = angular.module( "Demo", [] );

Demo.directive('webcam', function () {
            return {
                template:
                        '<div class="webcam">' +
                            '<video class="webcam-live"></video>' +
                        '</div>',
                restrict: 'EA',
                replace: true,
                link: function postLink($scope, element) {

// called when camera stream is loaded
                    var onSuccess = function onSuccess(stream) {

// Firefox supports a src object
                        if (navigator.mozGetUserMedia) {
                            videoElem.mozSrcObject = stream;
                        } else {
                            var vendorURL = window.URL || window.webkitURL;
                            videoElem.src = vendorURL.createObjectURL(stream);
                        }

/* Start playing the video to show the stream from the webcam*/
                        videoElem.play();
                    };

// called when any error happens
                    var onFailure = function onFailure(err) {
                        alert("uh oh :(");
                    };

// Check the availability of getUserMedia across supported browsers
                    if (!navigator.getMedia) {
                        onFailure();
                        return;
                    }

var videoElem = element.find('video')[0];

navigator.getMedia (
                            {
                                video: true,  // ask only for video
                                audio: false
                            },
                            onSuccess,
                            onFailure
                    );
                }
            };
        });
        angular.bootstrap($('body'), ["Demo"]);
    })();
</script>

Directive

<div id='main'>
    <div data-ng-controller="MyScope">
        <div data-hello-world></div>
        <input type="text" data-ng-model="name" />
        {{revName()}}
    </div>
</div>
<script src="../js/lib/angular.js"></script>
<script>
    (function() {
        var Demo = angular.module( "Demo", [] );

Demo.value("myValue", 'World');

Demo.factory('myFactory', function() {
            return {
                reverse : function(name) {
                    return name.split("").reverse().join("");
                }
            }
        });

Demo.controller("MyScope", function($scope, myValue, myFactory) {
            $scope.name = myValue;
            $scope.revName = function() {
                return myFactory.reverse($scope.name);
            }
        });

Demo.directive("helloWorld", function ($rootScope) {
            return {
                template : '<fieldset><legend></legend><input type="text" ng-model="name"/></fieldset>', // templateUri
                // scope: false, // false | true | {  }
                link     : function (scope, elm, $attrs) {

// scopes inherit from each other by default...
                    // alert(scope.__proto__ === $rootScope);

var update = function() {
                        elm.find('legend').text(scope.name);
                    };
                    scope.$watch('name', update);
                    update();
                }
            };
        });
        angular.bootstrap($('#main'), ["Demo"]);
    })();
</script>

Directive - with its own scope

<div id='main'>
    <div data-ng-controller="MyScope">
        <div data-hello-world></div>
        <input type="text" data-ng-model="name" />
        {{revName()}}
    </div>
</div>
<script src="../js/lib/angular.js"></script>
<script>
    (function() {
        var Demo = angular.module( "Demo", [] );

Demo.value("myValue", 'World');

Demo.factory('myFactory', function() {
            return {
                reverse : function(name) {
                    return name.split("").reverse().join("");
                }
            }
        });

Demo.controller("MyScope", function($scope, myValue, myFactory) {
            $scope.name = myValue;
            $scope.revName = function() {
                return myFactory.reverse($scope.name);
            };
            $scope.person = {
                firstName: 'Joe'
            };
        });

Demo.directive("helloWorld", function () {
            return {
                template : '<fieldset><legend></legend><input type="text" ng-model="name"/>  <input type="text" ng-model="person.firstName"/></fieldset>', // templateUri
                scope    : false, // true | false | { ...specific params... }
                link     : function (scope, elm, $attrs) {
                    var update = function() {
                        elm.find('legend').text(scope.name);
                    };
                    scope.$watch('name', update);
                    update();
                }
            };
        });
        angular.bootstrap($('#main'), ["Demo"]);
    })();
</script>

AngularJS

Declarative Data-binding

Data-binding programmatically

Basic binding

Explicit binding

Controller

Add custom listeners

Binding collections

Load and Save data

Binding lists

Binding lists + Validation

Filters

Basic filter

Basic filter with arguments

Angularjs native filter

Dependency Injection

Inject values

Inject Factories (Services)

Directives

Directive Maps Demo

Directive Video Demo

Directive

Directive - with its own scope

Routing

Example - ../examples/angularjs/

Rouben Meschian

rmeschian@gmail.com