Kontrolery AngularJS

NG-CONTROLLER - dyrektywa deklarująca kontroler np:

<div ng-app>

<div ng-controller = "MainController">

...

</div>

Kontroler jest funkcją JS którą AngularJS wywołuje np:

var MainController = function($scope){

$scope.message = "Hello!";

};

Kontrolery maja zawsze parametr $scope. Właściwości $scope to nasz model np $scope.message.

Znak $ oznacza, że używamy komponentu AngularJS.

Przykład:

indeks.html:

<!DOCTYPE html>

<html ng-app>

<head>

    <link rel="stylesheet" href="style.css" />

    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>

    <script src="app.js"></script>

</head>

<body ng-controller="MainController">

    <p>{{message}}</p>

</body>

</html>

app.js:

var MainController = function($scope){

$scope.message = "Hello Angular!";

};

Właściwości kontrolerów:

1. Wstawia model do $scope, nigdy nie manipuluje bezpośrednio na HTML tylko binduje model do widoku.

2. W $cope można przekazywać obiekty np:

<div ng-controller="QuoteController">

<div>Stock: {{stock.symbol}}</div>

<div>Price: {{stock.price}}</div>

</div>

3. Kontrolery mogą być zagnieżdżone np:

<div ng-controller="QuoteController">

<div>Stock: {{stock.symbol}}</div>

<div>Price: {{stock.price}}</div>

<div ng-controller="ChartController">

<img src="{{chart.source}}" alt="{{chart.description}}"/>

</div>

Przykład:

indeks.html:

<!DOCTYPE html>

<html ng-app>

<head>

    <link rel="stylesheet" href="style.css" />

    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>

    <script src="app.js"></script>

</head>

<body ng-controller="MainController">

    <h1>{{message}}</h1>

    <div>First name: {{person.firstName}}</div>

    <div>Last name: {{person.lastName}}</div>

    <div>

      <img ng-src="{{person.imageSrc}}" title="{{person.firstName}} {{person.lastName}}">

    </div>

</body>

</html>

app.js:

var MainController = function($scope){

var person = {

    firstName:"Scott",

    lastName:"Allen",

    imageSrc:"http://odetocode.com/Images/scott_allen_2.jpg"

};

$scope.message = "Hello Angular!";

$scope.person = person;

};

Serwis $http

Enkapsuluje komunikację HTTP (GET, POST, PUT, DELETE)
$http może być drugim parametrem funkcji kontrolera -> var PersonController = function($scope, $http){...}
Używa metod http do komunikacji np $scope.user = $http.get("/user/1783");
Zawsze zwraca obiekt PROMISE ponieważ nie wiadomo kiedy żądanie się zakończy.
Funkcja then wykonywana dla żądania posiada dwie funkcje wewnętrzne dla obsługi poprawnego żądania i błędnego.

var promise = $http.get("/user/1783");

promise.then(function(response){

$scope.user = response.data;

},

function(reason){

$scope.error = "Error";

});

GitHub API - przykładowe źródło danych

dostępne dla JS
zwraca JSON
bez uwierzytelnienia

np: https://api.github.com/users/odetocode

Przykład:

indeks.html:

<!DOCTYPE html> <html ng-app> <head> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> <script src="app.js"></script> </head> <body ng-controller="MainController"> <h1>{{message}}</h1> <div>{{error}}</div> <div>First name: {{user.name}}</div> <div>Location: {{user.location}}</div> <div> <img ng-src="{{user.avatar_url}}" title="{{user.name}}"> </div> </body> </html>

app.js:

var MainController = function($scope, $http){ var onUserComplete = function(response){ $scope.user = response.data; }; var onError = function(reason){ $scope.error = "Could not fetch the user." } $http.get("https://api.github.com/users/odetocode") .then(onUserComplete); $scope.message = "Hello Angular!"; };

Moduły

Kontrolery nie powinny być zmiennymi globalnymi.
Kontrolery powinny być osadzone w modułach.

Praca z modułami:

Utworzenie modułu i nadanie mu nazwy np var app = angular.module("githubViewer", []);
W nawiasie kwadratowym dodajemy listę zależności dla tworzonego modułu.
Zarejestrowanie kontrolera w module np app.controller("MainController", MainController);
W html trzeba powiedzieć Angularowi, że używamy modułu w ng-app np <html ng-app="githubViewer">

Aby narzędzia minimalizujące kod JS nie zmieniły ważnych nazw zmiennych przy rejestracji kontrolera używa się zapisu: app.controller("MainController", ["$scope","$http",MainController]);

Przykład:

indeks.html:

<!DOCTYPE html> <html ng-app="githubViewer"> <head> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> <script src="app.js"></script> </head> <body ng-controller="MainController"> <h1>{{message}}</h1> <div>{{error}}</div> <div>First name: {{user.name}}</div> <div>Location: {{user.location}}</div> <div> <img ng-src="{{user.avatar_url}}" title="{{user.name}}"> </div> </body> </html>

app.js:

(function() { var app = angular.module("githubViewer", []); var MainController = function($scope, $http) { var onUserComplete = function(response) { $scope.user = response.data; }; var onError = function(reason) { $scope.error = "Could not fetch the user." } $http.get("https://api.github.com/users/odetocode") .then(onUserComplete); $scope.message = "Hello Angular!"; }; app.controller("MainController", ["$scope","$http",MainController]); }());