NG-CONTROLLER - dyrektywa deklarująca kontroler np:
     <div ng-app>
          <div ng-controller = "MainController">
          ...
          </div>
     </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>
     </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]); }());