JSFiddle

  • Don't Munge the DOM!

    Examples of directives for DOM interaction

    (function (app) {
    
        function SizeService() {
            this.width = 0;
            this.height = 0;
        }
    
        app.directive('giveFocus', ['$timeout', function ($timeout) {
            return {
                restrict: 'A',
                replace ...
  • No $emit or $broadcast #2 is the latest revision

    Example using properties and services to share information rather than relying on $scope.$emit and $scope.$broadcast

    (function (app) {
    
        var genders = ['Male', 'Female'],
            labels = ['boy', 'girl'];
    
        function GenderService() {}
    
        angular.extend(GenderService.prototype, {
            getGenders: function () {
                return genders.slice ...
  • Avoiding Excess Watches using ECMAScript 6 #14 is the latest revision

    Example of avoiding the use of watch.

    (function (app) {
        
        var genders = ['Male', 'Female'],
            labels = ['boy', 'girl'];
            
        function BadController($scope) {
            $scope.genders = genders;
            $scope.selectedGender = genders[0];
            $scope ...
  • $scope vs. Controller As #4 is the latest revision

    Example of $scope vs. Controller As

    (function () {
        var app = angular.module('myApp', []);
        
        function BadController($scope) {
            
            $scope.notValid = function () {
                var bad = !!$scope.name;
                return !bad || $scope.name ...
  • Constants #2 is the latest revision

    Make a constant value

    (function () {
        
        function makeConstant(name, val) {
        
            var x = val; 
            Object.defineProperty(window, name, {
                enumerable: true,
                configurable: false, 
                get: function () {
                    return x ...
  • Tools: AngularJS: From a Different Angle

    Example from AngularJS Talk

    (function () {
    
        var myApp = angular.module('myApp', []);
        baseService = {
            baseUrl: 'http://services.odata.org/V4/OData/OData.svc/Products',
            get: function () {
                var ...
  • Templates: AngularJS: From a Different Angle

    Example from AngularJS Talk

    (function () {
    
        var jeremy = {
            name: 'Jeremy Likness',
            age: 40
        },
        doreen = {
            name: 'Doreen Likness',
            age: 'Not polite to ask'
        },
        people = [jeremy, doreen ...
  • Container: AngularJS: From a Different Angle

    Example from AngularJS Talk

    (function () {
    
        var jeremy = {
            name: 'Jeremy Likness',
            age: 40
        },
        doreen = {
            name: 'Doreen Likness',
            age: 'Not polite to ask'
        },
        people = [jeremy, doreen ...
  • Glue: AngularJS: From a Different Angle

    Example from AngularJS Talk

    (function () {
        
        var person = { name: 'Jeremy Likness', age: 40 };
        
        angular.module('myApp', [])
        .run(['$rootScope', function ($rootScope) {
            $rootScope.jeremy = person;
        }]);
              
    })();
  • Expressions: AngularJS: From a Different Angle

    Example from AngularJS Talk

    (function () {
        angular.module('myApp', []);
    })();