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

Website: johansson.jp

A(ng)ular JS

Disclaimers:

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

Demos

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

link

Big framework - lot's to learn

Not jQuery - different way of thinking

Testable - SOC, IOC, TDD, ETC.

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)

jQuery


    $('#firstName, #lastName').on('change', function(){

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

        var fullName = firstName + ' ' +  lastName;

        fullNameTag.val(fullName);

    };

A(ng)ular JS


    <input type="text" id="firstName">
    <input type="text" id="lastName">
     
    <input type="text" id="fullName">

Set model on input element
Set model on output element

A(ng)ular JS

How it can be (e.g. Angular)

A(ng)ular JS


    <input type="text" ng-model="firstName">
    <input type="text" ng-model="lastName">
     
    <input type="text" ng-model="firstName + ' ' + lastName">

AngularJS

simplified

(no JS needed)

A(ng)ular JS


    <div ng-controller="sampleController">
        <input type="text" ng-model="firstName">
        <input type="text" ng-model="lastName">
         
        <input type="text" ng-model="fullName()">
    </div>


    angular.module('sampleModule', [])
    .controller('sampleController', function($scope) {
        $scope.firstName = $scope.lastName = '';
        $scope.fullName = function() {
            return $scope.firstName + ' ' + $scope.lastName;
        };
    });

AngularJS

normal

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>

Exempel

A(ng)ular JS

Angular example

declarative view


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

A(ng)ular JS

Angular example

testability


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

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


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

    // 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

Controller


    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>
    
    </div>

A(ng)ular JS

Controller as


    angular.module('myAngularApp', [])
        .controller('myController', function () {
            var vm = this;
            vm.message = 'This is a message from myController';

        });


    <div ng-controller="myController as my">

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

A(ng)ular JS

$scope

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

...but prefer "controller as"

A(ng)ular JS

Service

Loose coupling

SOC


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

            $scope.games = 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

Directive

Think web components

Reusability

    <my-shared-table></my-shared-table>

(replace Controllers with Directives for 2.0)

A(ng)ular JS

Testing

E2E-test with Protractor

Unit-test with Jasmine/Karma

Mocking with ngMock

A(ng)ular JS

(try my apiMock for fast prototyping)

ng-Animate

ng-Route

ng-Touch

Angular is getting more modular for every version

A(ng)ular JS

DEMO(s)

A(ng)ular JS

Learn more

A(ng)ular JS

Angular-team's design docs

Angular API reference

Angular-team blog

John Papa's styleguide

John Papa's podcast

A(ng)ular JS

Questions?

Thanks!

http://johansson.jp

A(ng)ular JS