Nauka AngularJS od podstaw – część II

AngularJS-tutorial-logo

Poziom średnio-zaawansowany

Dziś kontynuujemy naukę frameworku AngularJS od podstaw, opisując najważniejsze aspekty składowych aplikacji Angular, oraz analizując małe przykłady praktyczne.

Nauka AngularJS – kolejne kroki

Poprzednia część opisuje podstawowe kwestie związane z tym znakomitym rozwiązaniem.

Wiemy że AngularJS jest frameworkiem języka JavaScript i rozszerza HTML poprzez dyrektywy ng. Poprzednia część pokazuje także prosty przykład z data-binding. Mamy także świadomość wielu przydatnych dyrektyw, np. ng-init:

<div ng-app="" ng-init="firstName='Joe'">
  <p>The name is <span ng-bind="firstName"></span></p>
</div>

Dodajmy do tego wyrażenia (AngularJS expressions). Egzystują one w podwójnych nawiasach klamrowych np. {{ expression }} i na nich AngularJS może wykonywać swoją magię. Wyrażenia mogą być także zapisane w dyrektywie ng-bind=”expression”.

Przykład – Angular zajmie się dodaniem liczb w wyrażeniu:

<div ng-app="">
  <p>Result: {{ 5 + 5 }}</p>
</div>

Wyrażenia w AngularJS współpracują dobrze z wszystkimi typami danych

– liczby:

<div ng-app="" ng-init="quantity=1;cost=9">
  <p>Total price €: {{ quantity * cost }}</p>
</div>

– łańcuchy:

<div ng-app="" ng-init="firstName='Donnie';lastName='Brasco'">
  <p>The name: {{ firstName + " " + lastName }}</p>
</div>

– obiekty i tablice również typowo dla JavaScript:

<div ng-app="" ng-init="person={first:'Joe',last:'Pistone'}">
  <p>The name: {{ person.last }}</p>
</div>
<div ng-app="" ng-init="points=[1,5,9,20,40]">
  <p>Pick up array element: {{ points[3] }}</p>
</div>

Wyrażenia AngularJS, podobnie jak wyrażenia JS, mogą zawierać literały, operatory i zmienne. Główna różnica jest jednak taka, że wyrażenia AngularJS mogą być zapisane wewnątrz HTML.


Nauka AngularJS – modele i kontrolery

Podczas gdy dyrektywa ng-app definiuje aplikację, dyrektywa ng-controller definiuje element dla kontrolera. Przeanalizujmy prosty przykład. Tworzymy elementy HTML oraz moduł, który implementuje kontroler.

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}
</div>

JavaScript

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

Jak wiemy $scope stanowi klej między modelem a kontrolerem; w naszym przykładzie AngularJS ustawi wartości w wyrażeniu, a także zajmie się ich aktualizacją, gdy użytkownik zmieni wartości pól tekstowych.

Moduły – Angular modules

Jak widzieliśmy przed chwilą, moduł tworzony jest poprzez funkcję angular.module:

<div ng-app="myApp">...</div>
var app = angular.module("myApp", []);

Modele – dyrektywa ng-model

Widzieliśmy jej zastosowanie w praktyce. Dyrektywa ng-model wiąże wartość z kontrolki HTML (input, select, textarea) z danymi aplikacji.

Prosty przykład:

<div ng-app="myApp" ng-controller="MyCtrl">
    Name: <input ng-model="name">
   
    <h3>You entered: {{name}}</h3>

</div>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
    $scope.name = "Donnie Brasco";
});

Wiązanie może być dwu kierunkowe (input z dyrektywą ng-model oraz wyrażenie {{name}}).

Więcej na temat modeli w AngularJS:

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

AngularJS – kontrolery

Kontrolery aplikacji AngularJS, które kontrolują jej dane i zachowanie, definiujemy poprzez dyrektywę ng-controller.

Dyrektywa ng-model wiąże inputy z właściwościami kontrolera. Jest także $scope – obiekt aplikacji, będący właścicielem zmiennych i funkcji aplikacji, zgrupowanych w danym zasięgu.

Wewnątrz kontrolerów możemy dokonywać operacji na danych.

Przykład #1 – angular.uppercase():

<div ng-app="myApp" ng-controller="MyCtrl">
  <p>{{ x1 }}</p>
  <p>{{ x2 }}</p>
</div>
var app = angular.module('myApp', []);
  app.controller('MyCtrl', function($scope) {
    $scope.x1 = "John";
    $scope.x2 = angular.uppercase($scope.x1);
});

Przykład #2 – użycie kontrolerów w AngularJS:

<div ng-app="myApp" ng-controller="MyCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{fullName()}}
</div>

Wyrażenie fullName() jest wywołaniem funkcji.

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

app.controller('MyCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";

    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});

Definiując kontroler możemy użyć również takiej składni:

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

myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.lastName = 'Brasco';
...    
}]);

Tip #1

Kontrolery możemy umieszczać w zewnętrznych plikach i dołączać je do aplikacji, np. myController.js.

Tip #2

Zaleca się, aby nazwy kontrolerów były w „PascalCase”, na przykład DemoController:

angular.module('myApp', []).
  controller('DemoController', function($scope) {
   ...
});

Więcej o kontrolerach w AngularJS:

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

$scope

The Scope is the glue! $scope jest „klejem” spajającym pomiędzy kontrolerem a widokiem. Widok i kontroler nie muszą wiedzieć o sobie – $scope zajmuje się wszystkim.

Scope zajmuje się wiązaniem danych pomiędzy widokiem (HTML) a kontrolerem (JavaScript). Programista nie musi się tym przejmować.

Przykład – użycie Scope:

<div ng-app="myApp" ng-controller="MyCtrl">
  <h2>{{car}}</h2>
</div>
var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.car = "Volvo S80, 4.4 V8";
});

$scope jest obiektem z właściwościami i metodami, które udostępnia zarówno dla widoku, jak i kontrolera.

Root Scope

Wszystkie aplikacje AngularJS mają $rootScope, który jest zasięgiem nadrzędnym, stworzonym na elemencie HTML z dyrektywą ng-app.

rootScope jest dostępny dla całej aplikacji. Jeśli zmienna ma tę samą nazwę w rootScope oraz zasięgach podrzędnych (bieżących), zostanie w nich nadpisana (tylko w nich).

Przykład – rootScope:

<div ng-app="myApp">
  <p>The rootScope's color:</p>
  <h1>{{color}}</h1>

  <div ng-controller="MyCtrl">
    <p>The scope of the controller's color:</p>
    <h1>{{color}}</h1>
  </div>

  <p>The rootScope's color is still:</p>
  <h1>{{color}}</h1>
var app = angular.module('myApp', []);

app.run(function($rootScope) {
    $rootScope.color = 'green';
});

app.controller('MyCtrl', function($scope) {
    $scope.color = "red";
});
</div>

Więcej na ten temat tutaj:

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

Uwaga! Kurs AngularJS od podstaw =>

Kurs AngularJS od podstaw (video)

Kurs AngularJS od podstaw (video)

Nauka AngularJS – przykładowa aplikacja

Pora na nieco więcej praktyki w pracy z Angularem. Nasza prosta aplikacja zajmie się przetworzeniem listy wiadomości. AngularJS zajmie się bezbolesnym renderowaniem danych w DOM.

Załóżmy że mamy listę wiadomości ze źródła danych (np. uzyskaną via AJAX, poprzez API, etc) w postaci tablicy obiektów. Najpierw przypiszmy ją do właściwości w naszym zasięgu:

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

myApp.controller('EmailsCtrl', ['$scope', function ($scope) {
  // an object for the messages
  $scope.emails = {};

  // sample data, obtained from the the server
  // as an array of objects
  $scope.emails.messages = [
    {
        "from": "Joe Pistone",
        "subject": "Something happened...",
        "sent": "2014-10-02T08:05:54Z"
    },{
        "from": "Donnie Brasco",
        "subject": "Forget about it",
        "sent": "2014-09-22T22:22:00Z"
    },{
        "from": "Sonny Black",
        "subject": "What the ****?",
        "sent": "2014-09-21T14:14:14Z"
    }
  ];

}]);

Stwórzmy teraz widok, który implementuje proste przetworzenie danych dostępnych w $scope:

<div ng-app="myApp">
  <div ng-controller="EmailsCtrl">
    <ul>
      <li ng-repeat="message in emails.messages">
        <p>From: {{ message.from }}</p>
        <p>Subject: {{ message.subject }}</p>
        <p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
      </li>
    </ul>
  </div>
</div>

Gotowe! Widzimy tutaj zastosowanie dyrektywy ng-repeat, która implementuje logikę przetwarzania w pętli, a także zastosowanie filtrów (formatowanie daty).

Więcej o filtrach napiszemy w kolejnej części.

Scope functions

Możemy dodać kilka linijek w naszym kodzie JS. Rozszerzy on $scope o funkcję usuwania wiadomości:

myApp.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.deleteEmail = function (index) {
    $scope.emails.messages.splice(index, 1)
  };
}]);

Nasz widok potrzebuje jedynie dodania takiej linijki kodu…

<a ng-click="deleteEmail($index)">Delete email</a>

z dyrektywą ng-click. AngularJS zajmie się resztą.

Zwróćmy uwagę na parametr $index, który reprezentuje numer bieżącego elementu.

Global static data

Dane mogą być współdzielone pomiędzy $scope Angulara, a resztą strony. Na przykład:

window.globalData = {};
globalData.emails = ** tutaj tablica obiektów z listą wiadomości **

Takie dane możemy bez problemu przypisać do zmiennej wewnątrz scope:

myApp.controller('EmailsCtrl', ['$scope', function ($scope) {
    $scope.emails = {};
    $scope.emails.messages = globalData.emails;
}]);

AngularJS naprawdę potrafi pomóc w programowaniu nowoczesnych aplikacji Web.

Zasoby

Bogaty zbiór „przepisów” AngularJS – gotowe przykłady

Strona projektu AngularJS

Książki o AngularJS

Nauka AngularJS – podsumowanie

Na tym kończymy część II kursu AngularJS od podstaw. Modele, kontrolery, widoki i scope. Mając je opanowane, możemy już naprawdę dużo.

W kolejnej części zajmiemy się formularzami i walidacją, filtrami, serwisami i innymi zagadnieniami tej znakomitej biblioteki JS.

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 Facebook1Tweet 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.