Nauka AngularJS od podstaw – część III – podsumowanie

angularjs-logo

Poziom średnio-zaawansowany

W części III podstawowego kursu Angular kontynuujemy zagadnienia z części poprzedniej, jak i dotykamy nowych, kolejnych zagadnień dotyczących pracy z tą biblioteką.

Nauka AngularJS – kolejne zagadnienia

Zacznijmy od filtrów. To kolejna cecha AngularJS, która zdejmuje z programisty część żmudnej pracy. Zobaczmy je w akcji, podczas formatowania danych różnego rodzaju.

Filtry (AngularJS filters)

Już w poprzedniej części mogliśmy zobaczyć jak proste w użyciu (a jednocześnie pomocne) są filtry, na przykład:

...
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
...

AngularJS dostarcza różne filtry, które ułatwiają przetwarzanie i formatowanie danych:

– currency – format a number to a currency format

– date – format a date to a specified format

– filter – select a subset of items from an array

– json – format an object to a JSON string


– limitTo – limits an array/string, into a specified number of elements/characters

– lowercase – format a string to lower case

– number – format a number to a string

– orderBy – orders an array by an expression

– uppercase – format a string to upper case

Dodawanie filtrów do wyrażeń jest proste – używamy znaku „|”, po którym podajemy nawę filtru, na przykład uppercase:

<div ng-app="myApp" ng-controller="personCtrl">
  <p>The name is {{ lastName | uppercase }}</p>
</div>

Filtr ten zmienia litery napisu na duże, z kolei lowercase – oczywiście na małe:

<p>The name is {{ lastName | lowercase }}</p>

Dodawanie filtrów do dyrektyw jest również proste, a jakże przydatne:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

W tym przykładzie do dyrektywy ng-repeat dodaliśmy filtr sortowania danych. Tak, sortowaniem zajmie się AngularJS!

Money, money, money i filtr „currency”

Ten filtr formatuje podany numer jako walutę:

<div ng-app="myApp" ng-controller="costCtrl">
  <h3>Price: {{ price | currency }}</h3>
</div>

I tak dalej. Możemy sformatować datę, ciąg JSON, itd.

Przy okazji JSON, warto wspomnieć że Angular posiada własne metody obsługi danych w tym formacie:

angular.fromJSON() – deserializes a JSON string

angular.toJSON() – serializes a JSON string

Dostępne jest także „Global API” – zbiór globalnych funkcji JavaScript do wykonywania typowych zadań, takich jak:

– porównywanie obiektów

– iteracje

– konwersje obiektów

Więcej informacji tutaj:

http://www.w3schools.com/angular/angular_api.asp

Natomiast więcej o samych filtrach znajdziemy tutaj. To nie wszystko, ponieważ możemy także definiować własne filtry. Polecam interesujący artykuł (z przykładami) na ten temat:

https://toddmotto.com/everything-about-custom-filters-in-angular-js

Podczas gdy pojedynczy znak „|” służy do użycia filtrów, podwójny znak „||” definiuje nam normalny operator OR:

<p>{{ data.length > 0 && 'My data' || 'No data' }}</p>

Przyjdźmy teraz do formularzy.

Formularze i AngularJS

Framework wspomaga pracę z formularzami (data-binding oraz walidacja). Rozważmy prosty przykład.

HTML:

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">Reset</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

JS:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "Donnie", lastName: "Brasco"};

    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});

Wykorzystujemy tu znane nam już wiązanie danych pomiędzy modelem a elementami formularza.

Uwaga! Kurs AngularJS od podstaw =>

Kurs AngularJS od podstaw (video)

Kurs AngularJS od podstaw (video)

Więcej o formularzach Angular:

http://www.w3schools.com/angular/angular_forms.asp

http://www.w3schools.com/angular/angular_select.asp

Zobacz także:

AngularJS ng-submit Directive

Nie mieliśmy jednak jeszcze do czynienia z walidacją, która również jest znakomicie wspierana przez AngularJS.

Walidacja formularzy w AngularJS

Pola formularzy mogą być walidowane z pomocą AngularJS. Podstawowo mowa tutaj o walidacji client-side. Do pełnej, bezpiecznej walidacji możemy jednak potrzebować połączenia jej z walidacją server-side.

Przykład – required:

Używamy atrybutu HTML5 (required) do określenia pola wymaganego:

<form name="xForm">
<input name="xInput" ng-model="xInput" required>
</form>

Bez trudu zbadamy stan (poprawność) tego pola w Angular:

<p>State:</p>
<h1>{{xForm.xInput.$valid}}</h1>

Tak samo pracuje się z innymi walidatorami, na przykład email:

<form name="xForm">
<input name="xInput" ng-model="xInput" type="email">
</form>

<p>State:</p>
<h1>{{xForm.xInput.$valid}}</h1>

Komunikat błędu

W tym przykładzie element span z komunikatem zostanie wyświetlony, jeśli wyrażenie z ng-show ($error) zwróci true:

<form ng-app="x" name="xForm">
  Email: <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">
    Invalid e-mail address
  </span>
</form>

Więcej o walidacji formularzy w Angular:

http://www.w3schools.com/angular/angular_validation.asp

Angular includes

Kolejną interesującą możliwością, oferowaną przez AngularJS są dołączenia (includes). Dzięki nim możemy dołączyć zawartość HTML z zewnętrznego pliku.

Służy do tego dyrektywa ng-include:

<div ng-app="x">
  <div ng-include="'xfiles.htm'"></div>
</div>

AngularsJS jest pomocny na wszystkich polach.

Własne dyrektywy

AngularJS jest świetny z wielu powodów. Jednym z nich jest możliwość definiowania dyrektyw. Przykład poniżej.

Definicja w elemencie HTML:

<div ng-app="xApp" x-my-directive></div>

Definicja dyrektywy – kod JS:

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

app.directive("xMyDirective", function() {
  return {
    template : "Jestem nową dyrektywą!"
  };
});

Więcej o dyrektywach: tutaj.

Zasoby

video kursy Angular

strona biblioteki

Książki o AngularJS

Nauka AngularJS – podsumowanie

To 3 część podstaw AngularJS. Oczywiście jest jeszcze masa interesujących zagadnień do poznania (np. ajax, services, routing), jednak postaramy się opisać je już w formie tutoriali, w których stworzymy bardziej rozbudowane przykłady projektów web.

ng-Dziękuję!

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 Facebook3Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.