angular

Pierwsze (przedświąteczne) podejście do Angulara 29 grudnia 2015

Coraz częściej w branży słychać szepty o nowej wersji Angular2, jego możliwościach, niedociągnięciach; o tym, że nowa wersja zrewolucjonizuje rynek, czy że wykopie sobie grób i umrze śmiercią nagłą i brutalną. Czas więc samemu przekonać się co w trawie piszczy.

Z racji zbliżających się świąt podejdźmy jednak do tematu na luzie i spróbujmy przystroić, w komitywie z tą technologią, choinkę.

Do pracy przyda nam się najprostszy serwer plików z automatycznym śledzeniem zmian- live-server1

standardowo instalowany przy pomocy npm’a

npm install -g live-serve

Jeśli jednak nie posiadamy npm’a, najprościej zainstalować go z NODE.js

2

 

Zacznijmy od stworzenia folderu z projektem ng-christmas i dodajmy pliki index.html oraz tree.ts (w którym znajdować się będzie nasz angularowy komponent).

W pierwszym kroku w pliku index.html wczytujemy niezbędne skrypty:

  • TypeScript.js- obsługa TypeScript
  • adngular2.dev.js- rozwojowa wersja angulara2
  • system.js- potrzebny do skonfigurowania i załączenia plików TypeScript
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>

Skonfigurujmy transpiler i dekoratory TypeScript oraz zaczytajmy plik tree.ts

<script>
   System.config({
      transpiler: 'typescript',
      typescriptOptions: { emitDecoratorMetadata: true }
   });
   System.import('./tree.ts');
</script>

i na koniec dodajmy znacznik pisanego przez nas komponentu

<christmas-tree>loading tree...</christmas-tree>

Sumarycznie powinniśmy otrzymać index.html w postaci:

<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
<script>
   System.config({
      transpiler: 'typescript',
      typescriptOptions: { emitDecoratorMetadata: true }
   });
   System.import('./tree.ts');
</script>
<christmas-tree>loading tree...</christmas-tree>

Teraz przejdźmy do pliku tree.ts. Tutaj zaczniemy od zaimportowania niezbędnych elementów biblioteki

import {bootstrap, Component} from 'angular2/angular2';

i utworzenia podstawowego komponentu

@Component({
   selector: 'christmas-tree',
   template: `
      TODO.: Drzewko świąteczne
   `
})
class ChristmasTree {}

Komponenty są nowymi elementami wprowadzonymi do angulara, pozwalającymi na tworzenie rozbudowanych graficznie widoków (template) w połączeniu z logiką ich zachowania (ChristmasTree) i zamknięcie ich w pojedynczy tag (selector).
Stworzony komponent musimy osadzić na stronie jako korzeń-root aplikacji.

bootstrap(ChristmasTree);

Po tym otrzymujemy plik tree.js w postaci:

import {bootstrap, Component} from 'angular2/angular2';

@Component({
   selector: 'christmas-tree',
   template: `
      TODO.: Drzewko świąteczne
   `
})
class ChristmasTree {}
bootstrap(ChristmasTree);

Możemy teraz pierwszy raz odpalić nasz projekt.
Będąc w katalogu z aplikacją uruchamiamy live-server

live-server

i jeśli wszystko poszło po naszej myśli powinniśmy otrzymać poprawnie utworzoną i skonfigurowaną, najprostszą, aplikację Angular2.

3

Teraz możemy przejść do tworzenia choinki; dodajemy jej elementy do widoku

template: `
   <div class="tree"></div>
   `

oraz plik z podstawowymi stylami (trees.css), który załączymy do strony głównej.

body {
   background-color: cadetblue !important;
}
.tree{
   margin-top: 150px;
   margin-left: 150px;
}
.branch {
   width: 0;
   height: 0;
   border-left: 200px solid transparent;
   border-right: 200px solid transparent;
   border-bottom: 200px solid green;
   z-index: 1;
}
   .branch.top{
      transform: scale(0.5);
   }
   .branch.middle{
      transform: scale(0.75);
      margin-top: -120px;
   }
   .branch.bottom{
      margin-top: -120px;
      transform: scale(1);
   }
.root{
   width: 80px;
   height: 80px;
   background-color: saddlebrown;
   margin-left: 160px;
}

dzięki czemu otrzymujemy najprostsze drzewko świąteczne:

4

Samo drzewko wygląda nieco smutno. Dodamy więc kilka bombek.
Zaczniemy od dodania pliku decoration.ts i utworzenia klasy z konfiguracją ozdoby choinkowej.

export class Decoration{
   public color: string;
   public size: number;
   public marginTop: number;
   public marginleft: number;

   constructor(color, marginTop, marginleft, size = 20) {
      this.color = color;
      this.marginTop = marginTop;
      this.marginleft = marginleft;
      this.size = size;
   }
}

Klasa wykorzystywana będzie w komponencie ChristmasTree, więc musi być wyeksportowana z pliku (modyfikator export) i zaimportowana do pliku z komponentem.

import {Decoration} from "./decoration.ts";

Dalej dodajmy (logicznie) kilka ozdób, z podstawową konfiguracją, do komponentu

class ChristmasTree {
   public decorations: Decoration[] = [
      new Decoration('#ffff09', -350, 344, 26),
      new Decoration('#808080', 33, 326, 30),
      new Decoration('#04455e', 31, 391, 29),
      new Decoration('#ff8080', -33, 265, 28),
      new Decoration('#97004b', 14, 322, 34),
      new Decoration('#ff8000', 26, 430, 28),
      new Decoration('#0080c0', -21, 227, 28),
      new Decoration('#b30000', -21, 339, 24)
   ];
}

i podstawowe style, dzięki którym ozdoby będą wyglądały bombko-podobnie.

.decoration {
   cursor: pointer;
   border-radius: 100px;
   transform: scale(1);
   z-index: 2;
}
   .decoration:hover{
      opacity: .6;
   }

Żeby były one widoczne na choince, musimy jeszcze umieścić je w widoku

<div class="decorations">
   <div class="decoration"></div>
</div>

Wykorzystaliśmy tu kilka podstawowych dyrektyw (*ng-for i [ng-style]), żeby interpreter był w stanie je rozpoznać, musimy zaimportować je do pliku

import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2';

i do komponentu

@Component({
   directives: [CORE_DIRECTIVES],
   selector: 'christmas-tree',

W widoku użyliśmy dyrektywy *ng-for powielającą obiekty DOM dla kolejnych elementów kolekcji; umożliwia ona przy tym na dostęp do właściwości tych elementów; oraz [ng-style] pozwalającą na dynamiczne przypisanie styli.
Na obecnym etapie powinniśmy mieć plik decoration.ts wyglądający jak na listingu poniżej.

import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2';
import {Decoration} from "./decoration.ts";

@Component({
   directives: [CORE_DIRECTIVES],
   selector: 'christmas-tree',
   template: `
      <div class="tree"></div>
      <div class="decorations">
         <div class="decoration"></div>
      </div>
`
})
class ChristmasTree {
   public decorations: Decoration[] = [
      new Decoration('#ffff09', -350, 344, 26),
      new Decoration('#808080', 33, 326, 30),
      new Decoration('#04455e', 31, 391, 29),
      new Decoration('#ff8080', -33, 265, 28),
      new Decoration('#97004b', 14, 322, 34),
      new Decoration('#ff8000', 26, 430, 28),
      new Decoration('#0080c0', -21, 227, 28),
      new Decoration('#b30000', -21, 339, 24)
   ];
}
bootstrap(ChristmasTree);

Wynikiem działania aplikacji powinna być pięknie przyozdobiona choinka:

5

Przydałoby się dodać jeszcze możliwość edycji ozdób.
Zmodyfikujmy więc widok, dodając formę edycyjną ozdoby

<div class="col-lg-6"></div>
<div class="col-lg-3">
   <div class="panel panel-default decoration-form">
      <div class="panel-heading">Edycja bombki</div>
      <div class="panel-body">
         <div class="form-group">
            <div class="input-group input-group-sm"><span class="input-group-addon">Kolor</span>
            <input class="form-control" type="color" /></div>
         </div>
         <div class="form-group">
            <div class="input-group input-group-sm"><span class="input-group-addon">Rozmiar</span>
            <input class="form-control" max="50" min="0" size="" type="range" /></div>
         </div>
         <div class="form-group">
            <div class="input-group input-group-sm"><span class="input-group-addon">Margines górny</span>
            <input class="form-control" type="number" /></div>
         </div>
         <div class="form-group">
            <div class="input-group input-group-sm"><span class="input-group-addon">Margines lewy</span>
            <input class="form-control" type="number" /></div>
         </div>
      </div>
      <div class="panel-footer"><small>*zaznacz bombkę, aby zacząć ją edytować</small></div>
   </div>
</div>

Dodaliśmy tu do elementu bombki zdarzenie (reagujące na kliknięcie) przypisujące ją do właściwości selectedDecoration,

...
(click)="selectedDecoration = decoration">

którą musimy zaimplementować w ChristmasTree

public selectedDecoration: Decoration= this.decorations[0];

Wykorzystaliśmy także dyrektywę [(ng-model)], bindującą pole widoku z właściwością obiektu komponentu. Aby móc ją wykorzystać musimy zaimportować dyrektywy form (FORM_DIRECTIVES).

import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
...
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
...

By forma nie była zbyt surowa dodajmy style bootstrap’a

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

i obniżmy ją nieco

.decoration-form{
   margin-top: 250px;
}

Ostatecznie uzyskaliśmy gotową aplikację i do woli możemy bawić się dekoracjami.

6

Aplikacja nie musi składać się z pojedynczego komponentu; istnieje możliwość dodania dowolnej ich ilości, o zróżnicowanym stopniu skomplikowania.
Możemy na przykład dorzućić komponent wyświetlający jedynie napis Wesołych Świąt, czego i Wam życzę.

<christmas-tree>loading tree...</christmas-tree>
<message>loading message...</message>    

7

Kod źródłowy

Interesujesz się programowaniem i tworzeniem dedykowanych aplikacji?

Pozostań z nami w kontakcie - polub nas w mediach społecznościowych!

Odwiedź nasz profil na FB!
Odwiedź nasz profil na FB!
Zobacz nasze filmy na YT!
Odwiedź nasz profil na LI!
Zobacz inne wpisy:
Node.js - wprowadzenie

09.11.2015 Anna Baron

Log4Net w pigułce

04.01.2016 Anna Baron