Nauka AngularJS od podstaw – część I

angularjs-logo

Poziom średnio-zaawansowany

AngularJS – otwarta biblioteka języka JavaScript, rozwijana przez firmę Google. Znakomicie wspomaga tworzenie aplikacji na pojedynczej stronie (Single Page Application, SPA). Rozszerza HTML o własne, specjalne tagi. Biblioteka implementuje wzorce Model-View-Controller (MVC) oraz Model-View-ViewModel (MVVM), ułatwiając programowanie i testowanie aplikacji Web.

Nauka AngularJS – wstęp. Jak to działa?

AngularJS został stworzony z założeniem, że programowanie deklaratywne powinno być używane do budowy interfejsów i łączenia komponentów oprogramowania, natomiast programowanie imperatywne znajduje zastosowanie w logice biznesowej.

Biblioteka Angular wczytuje HTML zawierający dodatkowe, specyficzne dla tej biblioteki tagi. Obsługując owe tagi, AngularJS przypisuje wejściowe i wyjściowe elementy strony do modelu, zapisanego jako zestaw zmiennych JS.

Wartości tych zmiennych mogą być ustawiane zarówno ręcznie, jak i pobrane ze źródła w postaci JSON.

AngularJS_logo

Framework przystosowuje i rozszerza możliwości zwykłego HTML do lepszej obsługi dynamicznych treści, umożliwiając automatyczną synchronizację pomiędzy modelem i widokiem. Mówiąc najprościej zdejmuje z programisty naprawdę sporo żmudnej pracy.

Znakomitą i bardzo silną cechą AngularJS jest wiązanie danych (data binding) oraz dwukierunkowe wiązanie danych (two-way binding). Dwukierunkowe wiązanie danych w AngularJS jest uważane za jego najważniejszą funkcję.

Nauka AngularJS – anatomia aplikacji w skrócie

Przed budową pierwszej aplikacji Angular warto poznać składowe i cechy różnych jej komponentów.

1. Model – czyli dane do operowania i przedstawienia użytkownikom; modele są w postaci obiektów JS

2. Widok – czyli to co widzą użytkownicy – końcowy, działający HTML ze stylami

Wydawnictwo Strefa Kursów

3. Kontroler – logika biznesowa, która steruje aplikacją

4. Scope – kontekst utrzymujący modele i funkcje (kontroler zwykle ustawia je w zakresie Scope)

5. Dyrektywy – czyli ng-xxx – coś co „uczy” HTML nowej syntaktyki; rozszerzają HTML o elementy i atrybuty

Dodatkowo mamy jeszcze Wyrażenia (Expressions) oraz szablony (Templates).

Dyrektywami są na przykład ng-app, ng-model, ng-init, natomiast {{ name }} to przykład wyrażenia.

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.

Cechy AngualrJS

Oto główne cechy biblioteki:

– MVC

– Routing

– Testing

– Data Binding

– jqLite embedded

– Templates

– History

– Factories

– ViewModel

– Controllers

– Views

– Directives

– Services

– DI (Dependency Injection)

– Validation

Tworzenie aplikacji AngularJS

Stwórzmy prostą aplikację AngularJS.

1. Biblioteka

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>

2. Kod HTML

Użyjmy dyrektywy ng-app – można ją zastosować dla całego dokumentu, lub dla określonego elementu strony:

<div ng-app="">
    <label>Your name:</label>
    <input type="text" ng-model="theName" 
        placeholder="Enter a name here ...">
    <hr>
    <h1>Hello {{theName}}!</h1>
</div>

Kod JavaScript? Nie potrzeba! Dowolny tekst wpisany w polu tekstowym zostanie automatycznie podstawiony pod wyrażenie {{theName}} – zajmie się tym Angular ze swoim wiązaniem danych.

Oznacza to, że gdy użytkownik wprowadzi jakiś tekst do tego pola, model zostanie automatycznie zaktualizowany!

I tak oto mamy pierwszą aplikację AngularJS.


Obok ng-app istnieje cała masa dyrektyw. Oto najczęściej używane:

ng-app – Declares the root element of an AngularJS application, under which directives can be used to declare bindings and define behavior

ng-bind – Sets the text of a DOM element to the value of an expression. For example, displays the value of ‚name’ inside the span element. Any changes to the variable ‚name’ in the application’s scope reflect instantly in the DOM

ng-model – Similar to ng-bind, but establishes a two-way data binding between the view and the scope

ng-model-options – Provides tuning for how model updates are done

ng-class – Lets class attributes be dynamically loaded

ng-controller – Specifies a JavaScript controller class that evaluates HTML expressions

ng-repeat – Instantiate an element once per item from a collection

ng-show & ng-hide – Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style

ng-switch – Conditionally instantiate one template from a set of choices, depending on the value of a selection expression

ng-view – The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers

ng-if – Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted

ng-aria – A module for accessibility support of common ARIA attributes

ng-animate – A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives

Pełna lista dyrektyw:

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

Zasoby do nauki Angular JS

AngularJS – W3Schools

A Better Way to Learn AngularJS

5 Awesome AngularJS Features

Ultimate guide to learning AngularJS in one day

Small, real AngularJS application

Extra: The seed for AngularJS apps

Książki o AngularJS

Uwaga! Kurs AngularJS od podstaw =>

Kurs AngularJS od podstaw (video)

Kurs AngularJS od podstaw (video)

Nauka AngularJS – podsumowanie

AngularJS to rewelacyjny framework wspomagający tworzenie nowoczesnych, dynamicznych aplikacji WWW. Szybko i profesjonalnie.

Opanowanie podstaw jest generalnie proste i przyjemne, podobnie jak przyjemna jest późniejsza praca z Angular w prawdziwych projektach.

W części II zajmiemy się pracą z kontrolerami, modelami, $scope oraz widokami.

Dziękuję za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

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