Tutorial AngularJS – proste UI do sterowania elementami

AngularJS-tutorial-logo

Poziom średnio-zaawansowany

Angular w praktyce! Dziś mamy tu mały tutorial AngularJS, w którym stworzymy proste UI powiązane z dynamicznie rysowanym (odświeżanym ) obiektem graficznym.

Tutorial AngularJS – sterowanie obiektem graficznym za pomocą Angular

W kursie podstawowym skupialiśmy się głównie na informacjach, warto więc teraz zobaczyć to w realnym przykładzie. Pomoże nam ten prosty tutorial w kilku krokach.

Krok 1.

Stwórzmy dokument HTML5 i dołączmy bibliotekę AngularJS.

Krok 2.

Zdefiniujmy element, którym będziemy poruszać z poziomu UI. W naszym przykładzie stworzymy prosty element w CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;
}


Krok 3.

Z pomocą HTML5 stwórzmy inputy typu „range”, które powiążemy poprzez Angular z naszym elementem:

...
  <body ng-app="app">
    <div class="ng-scope" ng-controller="TutController">

      <label>dX:</label>
      <input value="10" ng-model="object.pos.x" 
        ng-change="changeStyle(object)"
        min="1" max="500" type="range"><br>

      <label>dY:</label>
      <input value="10" ng-model="object.pos.y"
        ng-change="changeStyle(object)" min="1" 
        max="200" type="range"><br>

      <label>Size:</label>
      <input value="150" ng-model="object.size" 
        ng-change="changeStyle(object)"
        min="1" max="500" type="range"><br>

      <p class="ng-binding" debug-position="">Adjust the ranges</p>

      <div id="container">
          <div id="my-elem" class="my-elem" 
            ng-style="style(object)">
          </div>
      </div>

    </div>
  </body>
...

Są to 3 inputy do sterowania parametrami:

– pozycja X

– pozycja Y

– rozmiar elementu

Uwaga! Kurs AngularJS od podstaw =>

Kurs AngularJS od podstaw (video)

Kurs AngularJS od podstaw (video)

Krok 4.

Przejdźmy do programowania w JavaScript. Robiliśmy to już poprzednio – definiujemy aplikację i kontroler. W zasięgu kontrolera definiujemy 2 metody – zwracającą bieżący styl elementu oraz metodę zmieniającą styl zależnie od zmian w UI. Wszystko oczywiście powiązane i obsłużone przez AngularJS.

var app = angular.module('app', []);

app.controller("TutController", function ($scope) {
    $scope.object = {
      pos: {
        x: 5,
        y: 5
      },
      size: 150,
      style: {}
    };

    // return the object with current styles
    $scope.style = function (object) {
      return object.style;
    };

    // update styles depending on UI inputs state
    $scope.changeStyle = function (object) {
      object.style = {
        'width': object.size + 'px',
        'height': object.size + 'px',
        'left': object.pos.x + 'px',
        'top': parseInt(object.pos.y) + 200 + 'px'
      };
    };

    // ...
});

To właściwie wszystko. Data binding zajmie się aktualizacją wyglądu elementu zależnie od stanu elementów UI.

Dodatkowo możemy napisać prostą dyrektywę, która wyświetli nam debug info:

// ...
app.directive('debugPosition', function () {
  return {
    template: '<strong>Debug:</strong><br> dX: {{object.pos.x}}
    <br>
    dY: {{object.pos.y}}
    <br>
    Size: {{object.size}}',
    };
});

Proszę zwrócić uwagę na użycie jej (nazwy) w kodzie HTML:

<p class="ng-binding" debug-position="">Adjust the ranges</p>

Oto przykładowy widok:

Tutorial AngularJS

Tutorial AngularJS

Źródło dostępne na GitHubie:

https://github.com/dominik-w/angularjs/tree/master/angular-ui-tutorial

Zasoby:

Książki o AngularJS

Tutorial AngularJS – podsumowanie

Kilka małych kroków – dodanie elementów (input) UI oraz odrobina kodu JS oraz dyrektyw Angular i nasza mała aplikacja gotowa. Efekt uzyskany względnie niedużym nakładem pracy.

Miłego programowania!

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook2Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest2
Możesz skomentować leave a response, lub podać trackback z własnej strony.
  • Gapi

    Super artykuł, chciałem go wykorzystać do swoich poczynań, ale natrafiłem na problem chyba z niedouczenia. a mianowicie chciałem poruszać dwoma diw’ami każdym z osobna i nie potrafię. W skrypcie
    „$scope.object = {
    pos: {
    x: 5,
    y: 5
    },
    size: 150,
    style: {}
    };”
    Już wiem że można tu wpisać pozycję x i y na którą przeskoczy div po naciśnięciu suwaka, wpisałem tu dane takie jak w stylach aby nie było skoków, bo to wypróbowałem. ale jak wpisać to dla drugiego DIV’a o innym położeniu początkowym aby nie skoczył na pierwszego jak kliknę suwak?
    Bardzo bym prosił o pomoc, z góry bardzo dziękuję i pozdrawiam.

  • OK! Tutaj kwestia jest taka, że kod JS generuje (odświeża) style zależnie od stanu suwaków, ważne jest gdzie te style zostają aplikowane -> element div”my-elem”, dodając drugi element, możemy np. napisać osobną funkcję $scope.changeStyleCosTam, która aplikuje style do innego elementu. Możemy dodać kolejne suwaki i ich obsługę, możemy w ogóle napisać cały osobny kontorler. Elastycznie 🙂

  • Gapi

    Dzięki za szybką odpowiedź, ja jestem początkujący i dopiero się uczę i w ogóle nie daję sobie rady z tym skryptem. Na razie jest to testowa stronka do nauki. nie chciał bym tu całej kopiować tylko przedstawie w skrócie bez skryptu i styli może by mi Pan podpowiedział gdzie robię błąd. bardzo dziękuję za przyszłe podpowiedzi i naprowadzenie.

    Adjust the ranges
    dX:

    dY:

    DIV 1

    Adjust the ranges
    dX:

    dY:

    DIV 2

    • Trzeba dokładnie się przyjrzeć i zastanowić. To jest nauka. Tutaj po prostu nie ma rozdzielenia ponieważ
      – zarówno formularz pozycja1 i pozycja2 znajdują się w divach w tym samym kontrolerze / zakresie ng-controller=”TutController”
      – dla obu stosowana jest metoda changeStyle

      Jak wspomniałem, można albo wrzucić pozycja1 i pozycja2 w jeden kontroler ng-controller=”TutController” ale stosować osobne metody changeStyle i np ChangeStyleCosTam, albo w ogóle osobne kontrolery ng-controller=”TutController” i ng-controller=”TutControllerCosTam”.

      Tak, żeby odpowiednie sterowanie było przypisane do odpowiednich elementów UI. W tej chwili jest niezły bałagan 🙂

      Powodzenia

  • Gapi

    Dzięki, zrobiłem drugi controler „TutController2” dla DIV’a „TutController2” i jest teraz OK.
    Jeszcze raz dziękuję za podpowiedzi.