Tutorial AngularJS – proste UI do sterowania elementami

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!

Możesz skomentować leave a response, lub podać trackback z własnej strony.