Angular JS

Martin Sandström

A(ng)ular JS

Vad är Angular?

Demos

A(ng)ular JS

Varför Angular?

Hur använder man Angular?

Reservationer:

Jag dissar inte jQuery.

Använder det mest som en jämförelse.

React, Ember, Knockout är också bra databinding verktyg.

Koden är skriven för att ge exempel, hänvisa inte till den som best practice.

A(ng)ular JS

Vad är angular?

A(ng)ular JS

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

/ Igor Minar, Angular-team

läs mer här

A(ng)ular JS

Varför Angular?

SOC och slippa krångla

Binda data till HTML

* Lyssna på input

* Uppdatera variabel

* Hämta elementet

* Sätt dess värde till variabel

A(ng)ular JS

Hur ser det ut "idag" med jQuery?

jQuery

        

    $('#myButton').click(function(){

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

        var fullName = firstName + ' ' +  lastName;

        fullNameTag.val(fullName);

    };

A(ng)ular JS

Visar inte html för att spara utrymme.

Angular

    <input type="text" ng-model="firstName">
     
    <input type="text" ng-model="lastName">
            
    <p>{{ firstName + " " + lastName }}</p>

Exempel

A(ng)ular JS

Angular + jQuery?

fungerar, men är ingen bra ide.

"unobtrusive javascript"

A(ng)ular JS


    
    <!-- inte rekommenderat-->
    <input type="text" name="date" onchange="validateDate()" />
    
    
    <!-- rekommenderat-->
    <input type="text" name="date" id="date" />
    
    
    window.onload = function() {
        document.getElementById('date').onchange = validateDate;
    };

Hur använder man Angular?

A(ng)ular JS


<!-- referens till AngularJS -->
<script src="js/vendor/Angular.js"></script>


<!-- ng-app attributet -->
<body ng-app="myAngularApp">

Kontrollera att JS-ramverket fungerar => börja koda

A(ng)ular JS

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

Controller

A(ng)ular JS

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

            $scope.message = "This is a message from myController";
            
        });

    <div ng-controller="myController">

        <!-- Här bestämmer myController -->
        <p> {{ message }} </p>
    
    </div>

$scope

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

Två sätt att binda till $scope

Service

A(ng)ular JS

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?"

Directive

A(ng)ular JS

Olika sidor kan dela på samma HTML

Resulterar i reusability

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

Web components

Testning

e2e-test

unit-test

Mock för att testa bla data connections och klick-event.

ng-Animate

ng-Route

ng-Touch

A(ng)ular JS

Så pass stort att man har lyft ut vissa delar

DEMO(s)

A(ng)ular JS

Nya webben

A(ng)ular JS

Controller As



angular.module("myAngularApp", [])
    .controller("myController", function () {

        var controller = this;

        controller.message = "this is a message from the controller";
        
    });

<div data-ng-controller="myController as vm">
    <p> {{ vm.message }} </p>
</div>

Frågor?

Tack!

martinsandstrom.github.io

A(ng)ular JS