Strony:
Wymagania:
  • Dodanie tagu <script src="angular.js"></script>
  • Dodanie atrybutu ng-app do HTML - jest to dyrektywa Angular, w skrócie angular-application.
NG-APP można dodać do dowolnego elementu strony np <html ng-app> lub <body ng-app>.
Hello world:
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <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="MainCtrl"> <p>Hello {{name}}!</p> {{ 843/42 }} </body> </html>
Linijka {{ 843/42 }} da w rezultacie wynik dzielenia ponieważ jest wynikiem binding expression.
JavaScript patterns:
  • Funkcje jako abstrakcja - funkcje pozwalają w js na osiągnięcie poziomu abstrakcji
var work = function(){
  console.log("working hard!");
};
var doWork = function(f){
  console.log("start");
  try{
  f();
  }
  catch(ex){
    console.log(ex);
  }
  console.log("end");
};
doWork(work);
  • Funkcje jako moduły - funkcja może działać jak klasa, zawierać metody i zmienne
var createWorker = function(){
  var task1 = function () {
    console.log("task1");
  };
  var task2 = function(){
    console.log("task2");
  };
  return {
    job1: task1,
    job2: task2
  };
};
var worker = createWorker();
worker.job1();
worker.job2();
  • Funkcje aby unikać zmiennych globalnych - aby uniknąć zmiennych globalnych należy zamieszczać je w funkcjach (np caly program jako f-cja globalna) które mają zawsze swój scope.
(function(){
var createWorker = function(){
  var task1 = function () {
    console.log("task1");
  };
  var task2 = function(){
    console.log("task2");
  };
  return {
    job1: task1,
    job2: task2
  };
};
var worker = createWorker();
worker.job1();
worker.job2();
}());
Powyższa struktura nazywa się w JS jako IIFE (immediately invoked function expression) lub "iffy".