Czym jest Angular ?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

https://docs.angularjs.org/guide/introduction

Proces kompilacji

Dlaczego używamy angulara ?

• Kompletne rozwiązanie
• Łatwy do rozpoczęcia nauki
• Bardzo popularny
• Utrzymywany przez Google
• Testowalny

Kompletne rozwiązanie

Łatwy do rozpoczęcia nauki

Bardzo popularny

Utrzymywany przez Google

Testowalny

Główne cechy angulara

• Two way data binding
• Kontrolery
• Serwisy
• Filtry
• Dyrektywy
• Dependency injection
• Modułowość

Two way data binding

http://tinyurl.com/twowaybinding

Angular controller

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

<div ng-controller="GreetingController">
  {{ greeting }}
</div>

Angular factories vs services vs providers

http://tinyurl.com/factoryservice

Angular filters

http://tinyurl.com/howtofilter

Angular directives

http://tinyurl.com/dyrektywy

Modułowość

angular.module('app', ['app.core', 'app.dashboard' ... ]);

Najczęściej popełniane błędy

Struktura projektu

Struktura projektu

Brak modułowości

• Nieprzemyślane dobieranie bibliotek
• Używanie jQuery
• Manipulowanie DOM poza dyrektywami
• Nadużywanie eventów
• Logika biznesowa w kontrolerach/dyrektywach
• Zbyt rozrośnięte dyrektywy/kontrolery
• Niestosowanie isolated scope w dyrektywach
• Niespójne nazewnictwo
• Brak testów

Najczęściej popełniane błędy

Kontrowersje

TypeScript

Angular 2 for JavaScript

Składnia

Demo

Czy warto?

Warto poczekać

• beta

• brak dokumentacji

• mała społeczność

• mało bibliotek

• większy rynek A1

Ale...

• wygląda obiecująco :)