Strony:
- https://angularjs.org/ - strona projektu
- https://builtwith.angularjs.org/ - strona projektów zbudowanych w Angular
- http://plnkr.co/ - edytor napisany w Angular
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".