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 

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>

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 

A(ng)ular JS 

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 

Made with Slides.com