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 

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)

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>

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 

A(ng)ular JS 

Questions?

Thanks!

 

http://johansson.jp

A(ng)ular JS 

Made with Slides.com