Code Carrots

AngularJS

Framework do Single Page Webapps

Prowadzący: Michał Matulka

Framework - co to takiego?

Architektura MVW

Elementy architektury AngularJS

• Dwukierunkowe wiązanie danych
• Wstrzykiwanie zależności
• Podział odpowiedzialności
• "Testowalność"
• Abstrakcja

Bardzo dużo bardzo mądrych słów :D

Funkcje Angulara

• Partiale
• Kontrolery
• Dyrektywy
• Serwisy
• Filtry

Partiale

    

        
{{ question.content }}
    

Partiale

Kontrolery

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

app.constroller('mainController', function () {
    this.questions = [
        {text: 'Pytanie 1', answers: [ {text: 'test'}, {text: 'test2'} ]},
        {text: 'Pytanie 2', answers: [ {text: 'test3'}, {text: 'test4'} ]}
    ];
});

Dyrektywy

    

        
 {{ question.content }}
    

<div ng-app="">
    
Wpisz coś! :) 
    
Wpisano: {{ cos }}
</div>

Wstawianie tekstu i wyrażeń

<div ng-app="">
    
{{ "Mój tekst" }}
</div>

<div ng-app="">
    
{{ 3 + 5 }}
</div>

Tworzenie aplikacji

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

<div ng-app="mojaAppka">
</div>

Tworzenie kontrolera

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

angular.controller('mojKontroler', function () {
});

<div ng-app="mojaAppka">
	<div ng-controller="mojaKontroler as kontroler">
	</div>
</div>

Każda zmienna przekazana do kontekstu (this) będzie dostępna w widoku do użycia w wyrażeniach oraz dyrektywach.

Funkcja też jest zmienną!

Zadanie 1

Przypisz do kontekstu w kontrolerze zmienną o wartości "Witaj świecie" i dowolnej nazwie, następnie wyświetl jej wartość w partialu.

Zadanie 2

Poniżej wyświetlonej zmiennej utwórz pole typu "text" i utwórz mu dyrektywę

ng-model="twoja_nazwa_zmiennej"

Obiekty i tablice

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

angular.controller('mojKontroler', function () {
    this.obiekt = {
        pierwszaWlasnosc: 'jeden',
	drugaWlasnosc: 'dwa'
    };

    this.tablica = ['a', 'b', 'c'];
});

<div ng-app="mojaAppka">
	<div ng-controller="mojKontroler as kontroler">
	    
{{ kontroler.obiekt.pierwszaWlasnosc }}
	    
{{ kontroler.tablica[1] }}
	</div>
</div>

Instrukcja ng-repeat

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

angular.controller('mojKontroler', function () {
    this.tablica = ['a', 'b', 'c'];
});

<div ng-app="mojaAppka">
    <div ng-controller="mojKontroler as kontroler">
        
{{ literka }}
    </div>
</div>

Zadanie 4

Wykorzystując dotychczasową wiedzę utwórz w kontrolerze strukturę danych zawierającą pytania z odpowiedziami, przekaż ją do widoku i wyświetl. Musi być możliwość zmiany liczby pytań oraz odpowiedzi w dowolnym pytaniu bez potrzeby zmiany widoku.