Code Carrots

AngularJS, część 2

Framework do Single Page Webapps

Prowadzący: Michał Matulka

Działająca aplikacja!

Funkcja w kontrolerze

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

app.controller('quizController', function () {
    this.jakasMetoda = function () { alert("Cześć!") };
});

Kontroler jest konstruktorem!

var app = angular.module('quiz', []);
var QuizController = function () {
};
QuizController.prototype.jakasMetoda = function () { alert("Cześć!") };
app.controller('quizController', quizController);

Dyrektywa sterująca ng-click

<div ng-controller="quizController">
    <button ng-click="jakasMetoda()"></button>
</div>

Zadanie 1

Doprowadź kod z poprzednich zajęć do postaci zdolnej wyświetlić następującą strukturę danych:

[
    { content: 'pytanie1', answers: ["odpowiedz11", "odpowiedz12"], correctAnswer: 1, selectedAnswer: null },
    { content: 'pytanie2', answers: ["odpowiedz21", "odpowiedz22", "odpowiedz23"], correctAnswer: 0, selectedAnswer: null },
    { content: 'pytanie3', answers: ["odpowiedz31", "odpowiedz32", "odpowiedz33", "odpowiedz34"], correctAnswer: 2, selectedAnswer: null },
    { content: 'pytanie4', answers: ["odpowiedz41", "odpowiedz42", "odpowiedz43"], correctAnswer: 1, selectedAnswer: null },
]

Dyrektywa ng-show

<div ng-show="mojKontroler.czyPokazac">Cześć!</div>

Zmienne dodatkowe

<div ng-repeat="litera in ['a', 'b', 'c']">{{ $index }}. {{ litera }}</div>

Zadanie 2

Spraw, aby pytanie było wyświetlone tylko w przypadku, gdy zmienna quizController.currentQuestion zawiera aktualny numer pytania. W kontrolerze zainicjuj zmienną quizController.currentQuestion na wartość 0.

Moduł

Serwis

var module = angular.module("mojModul");
module.service('mojSerwis', function () {
  this.zrobCos = function () {
    alert("Robię coś!");
  };
});

var app = angular.module('quiz', ['mojModul']);
var QuizController = function (mojModul) {
    mojModul.zrobCos();
};
app.controller('quizController', QuizController);