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

<div ng-controller="mainController as main">
    <ul>
        <li ng-repeat="question in main.questions">{{ question.content }}</li>
    </ul>
</div>

Partiale

<div ng-controller="mainController as main">
</div>

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

<div ng-controller="mainController as main">
    <ul>
        <li ng-repeat="question in main.questions"><input type="radio" ng-change="changeCurrentAnswer()"> {{ question.content }}</li>
    </ul>
</div>

<div ng-app="">
    <p>Wpisz coś! :) <input type="text" ng-model="cos"></p>
    <h3>Wpisano: {{ cos }}</h3>
</div>

Wstawianie tekstu i wyrażeń

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

<div ng-app="">
    <p>{{ 3 + 5 }}</p>
</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">
	    <p>{{ kontroler.obiekt.pierwszaWlasnosc }}</p>
	    <p>{{ kontroler.tablica[1] }}</p>
	</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">
        <p ng-repeat="literka in kontroler.tablica">{{ literka }}</p>
    </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.