Angular JS

John-Philip Johansson

Presented at Uppsala.js on 5/3-2015

John-Philp "JP" Johansson

UX Developer @ Avanade


Worked with video games, online videos, ecommerce, apps, websites, etc.


<3 code



A(ng)ular JS 


A(ng)ular JS 

I'm not dissing jQuery.

I'm just comparing to it.


React, Ember, etc are all fine options too.


The code is simplified for readability,

don't take it as best practice.

What Angular is


A(ng)ular JS 

Thinking Angular

Getting started

Learn more

A(ng)ular JS 

What is Angular?

A(ng)ular JS 


I hereby declare AngularJS to be MVW framework - Model-View-Whatever

/ Igor Minar, Angular-team

A(ng)ular JS 

Big framework - lot's to learn


Not jQuery - different way of thinking


Testable - SOC, IOC, TDD, ETC.

A(ng)ular JS 

A(ng)ular JS 

How to think in Angular?

  • Fetch input-element
  • Attach event-listener
  • Update JS-variable on event
  • Fetch output-element
  • Set contents to variable



A(ng)ular JS 

How it used to be (e.g. jQuery)





        var firstName = $('#firstName').val();
        var lastName = $('#lastName').val();
        var fullNameTag= $('#fullName');

        var fullName = firstName + ' ' +  lastName;




A(ng)ular JS 

(not showing HTML to save space)

  • Set model on input element
  • Set model on output element

A(ng)ular JS 

How it can be (e.g. Angular)

jQuery example

"unobtrusive javascript"

A(ng)ular JS 

    <input type="date" class="date-input" />
    <p class="date-validation"></p>

    $(function () {
        $('.date-input').on('change', function () {
            var date = $(this).val();
            var isValid = // Do validation
            $('.date-validation').text(isValid ? 'Yeah!' : 'Nope...');
    <input type="text" ng-model="date">
    <p ng-show="dateValid">Yeah!</p>
    <p ng-hide="dateValid">Nope...</p>

A(ng)ular JS 

Angular example

declarative view

    $ = '';
    $scope.dateValid = function () {
        return // Do validation

A(ng)ular JS 

Angular example


    // Controller
    $ = '';
    $scope.dateValid = DateUtils.validate($;

    // Service
    validate = function (date) {
        return // Do validation

    // Unit-test
    var validDate = '1981-09-22';
    var validation = DateUtils.validate(validDate);

    // End-to-end tests
    expect(element(by... you get the point

jQuery + Angular ?


Smart move by the ng-team


But don't do it


(Especially because of 2.0)

(read my article on 2.0)

A(ng)ular JS 

How to get started?

A(ng)ular JS 

<!-- reference AngularJS -->
<script src="js/vendor/Angular.js"></script>
<!-- ng-app attribute -->
<body ng-app="myAngularApp">

A(ng)ular JS 

Easy check to see if it works

    <h1> Hello {{ 1 + 1 }} you</h1>

A(ng)ular JS 


    angular.module('myAngularApp', [])
        .controller('myController', function ($scope) {

            $scope.message = 'This is a message from myController';


    <div ng-controller="myController">

        <!-- This is the domain of myController -->
        <p> {{ message }} </p>

A(ng)ular JS 



"Scope is the glue between application controller and the view."

Two ways to bind to $scope

but prefer "controller as"

A(ng)ular JS 


Loose coupling



    angular.module('myAngularApp', [])
        .controller('myController', function ($scope, gameService) {

            $ = gameService.getGames();

A(ng)ular JS 

"Borde inte någon ha tänkt på detta?"


A(ng)ular JS 

("Shouldn't someone already thought of this?")

/ Martin, quoting me


Think web components




(replace Controllers with Directives for 2.0)

A(ng)ular JS 


E2E-test with Protractor

Unit-test with Jasmine/Karma

Mocking with ngMock

A(ng)ular JS 

(try my apiMock for fast prototyping)





Angular is getting more modular for every version

A(ng)ular JS 


A(ng)ular JS 

Learn more

A(ng)ular JS 

A(ng)ular JS 



A(ng)ular JS 

Y NG? (Uppsala.js)

By John-Philip Johansson

Y NG? (Uppsala.js)

Presentation on Angular. Given at Uppsala.js on 5/3 2015.

  • 1,345