Introduction to

AngularJS

Michiel Staessen / @mstaessen

Who am I?

Profile picture
  • Michiel Staessen
  • September 2013 YP
  • Computer Science @ KU Leuven
  • Thesis about development tools for hybrid mobile apps
  • First encounter with AngularJS
  • Introduced use of Angular on Taxud project

What is AngularJS?

"Angular is what the browser would have been like if it were designed for AJAX-style web apps. We teach the browser new tricks."

— Miško Hevery, creator of AngularJS

The problem is HTML...

  • Designed for static documents, not for dynamic web apps
  • Purely a representation (View) of something (Model)

...and yet we love it

  • It's declarative
  • It's easy (<p>Hello World!</p>)

Current state of practice

jQuery is a great tool...

  • It handles browser differences
  • Great for DOM manipulation

... but it has limitations

  • ~ 80% is DOM manipulation, 20% is actual app
  • Almost impossible to test (no high level abstraction)
  • Tight coupling between DOM and logic
  • It's imperative

We can do better

with AngularJS

AngularJS...

  • ... gives structure to your code (MVC)
  • ... handles DOM manipulation
  • ... lets you focus on the actual application
  • ... provides high level abstraction (dependency injection)
  • ... is declarative

Let's start simple: data binding

http://plnkr.co/2wCWTbWgPJn4PJpTd5dl

Controllers

http://plnkr.co/CUj33fZJ7bgKPXta7wnz

Controller – Model – View

Great and all, but...

  • ... still polluting global scope
  • ... might collide with third party plugins

Modules to the rescue!

Modular applications

Defining a module


// angular.module(name, [dependencies])
angular.module('myApp', ['ngRoute'])

Fetching a module from DIC


// angular.module(name)
angular.module('myApp')

http://plnkr.co/1SYJN9LyqPRLcKkprfTz

Modules can contain...

Module Documentation

Directives

Element ~ widgets



    
        Content Tab 1
    
    
        Content Tab 2
    
    
        Content Tab 3

Attribute ~ additional behavior



There was an error!

Class name ~ additional style/state

Comment

don't know, never used before

Directives example: Tabs

http://plnkr.co/6bhzMtPYdVSgyZF0PIba

Filters

Formatters for certain data



{{ date | date:'dd/MM/yyyy' }}

                    


{{ amount | currency }}

                    


{{ listOfObjects | filter:'filterString' | orderBy:'objectProperty' }}

Filters example: Grid

http://plnkr.co/Kh35wpn6J3EtodesdAbo

Services

Any shared code


angular
    .module('myApp', [])
    .factory('MD5', function() {
        return function(input) {
            // MD5 implementation
        };
    })
    .directive('gravatar', function (MD5) {
        return {
            restrict: 'E',
            template: '', 
            scope: {
                email: '@'
                // ... Other scope properties
            },
            link: function (scope, element, attrs) {
                // rest of implementation
            }
        };
    });

Values

Shared values


angular
    .module('myApp', [])
    .value('value', {
        key: 'MyValue'
    })
    .controller('Controller1', function ($scope, value) {
        $scope.setValue = function (newValue) {
            value = newValue;
        };
    })
    .controller('Controller2', function ($scope, value) {
        $scope.value = value;
    });

Constants

Shared constants


angular
    .module('myApp', [])
    .value('PI', Math.PI)
    .controller('Controller1', function ($scope, PI) {
        $scope.setValue = function (newValue) {
            PI = newValue; // This assignment will not be persisted
        };
    })
    .controller('Controller2', function ($scope, PI) {
        $scope.pi = PI;
    });

"Advanced" subjects

Single-Page Applications


/* 
 * Confguration 
 */
angular
    .module('myModule', [])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'HomeController',
                templateUrl: 'views/home.html'
            })
            .when('/items/:id', {
                controller: 'ItemsController',
                templateUrl: 'views/item.html'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
                    

<body>
    
    <div ng-view></div>
</body>

Form validation

  • Readily available inside forms
  • AngularJS polyfills HTML5 validation in uncapable browsers
  • Extensible, you can create your own validators
  • "Quirk": based on name attribute, but ng-model is required
  • 4 classes: ng-valid, ng-invalid, ng-pristine, ng-dirty
  • 4 properties: $valid, $invalid, $pristine, $dirty,

Form validation documentation

Form validation: example

http://plnkr.co/sQaUEWpHtPlIwxRn2yJ4

Final remarks

Browser Support

All modern browsers

Desktop and mobile

IE8 and earlier require some additional work
IE Compatibility Guidelines

Minification

With non-minified JavaScript


// function (injectables...)
function ($scope, $http) { /* ... */ }

With minified JavaScript


// [injectables..., function(injectables...)]
['$scope', '$http', function(s, h) { /* ... */ }]

Useful resources

Questions?