O czym będziemy mówić ?
- Czym jest Angular?
- Dlaczego używamy Angulara?
- Główne cechy Angulara
- Najczęściej popełniane błędy
- Przykład aplikacji
- Kilka słów o Angular 2
- Budujemy aplikację w A2
- Podsumowanie
Dariusz Tomaszewski
Piotr Pietrzak
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
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
Angular filters
Angular directives
Modułowość
angular.module('app', ['app.core', 'app.dashboard' ... ]);
Najczęściej popełniane błędy
Struktura projektu
- css/
- img/
- js/
- app.js
- controllers.js
- directives.js
- filters.js
- services.js
- lib/
- partials/
- controllers/
- LoginCtrl.js
- SearchCtrl.js
- directives.js
- filters.js
- models/
- CartModel.js
- UserModel.js
- services/
- CartSvc.js
- UserSvc.js
- ProductSvc.js
- cart/
- CartModel.js
- CartSvc.js
- Cart.tmpl.html
- _Cart.scss
- common/
- directives.js
- filters.js
- user/
- UserModel.js
- UserSvc.js
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
Przykład niewielkiej aplikacji
Angular 2
Założenia
-
wydajność (5x)
-
mobile first
-
wieloplatformowość (browser, server, webworker)
-
nowe standardy (es6, reactive, shadow DOM)
-
prostota / łatwość nauki
-
brak wsparcia dla IE <
119
Plany
-
wydanie prawdopodobnie w maju 2016
-
wsparcie dla A1 ~ 1 rok
-
promocja (1,3mln vs 0,3mln)
-
rozwój ekosystemu (angular-cli)
Co nowego?
Directive
Module
Data binding
Service
Template
DI
Scope
Filter
Model*
Component
Metadata
Pipe
Angular 1.4
Angular 2.0
Kontrowersje
TypeScript
Angular 2 for JavaScript
API 2.0
Preview (angular.io)
Składnia
Czy warto?
Warto poczekać
-
beta
-
brak dokumentacji
-
mała społeczność
-
mało bibliotek
-
większy rynek A1
Ale...
-
wygląda obiecująco :)
Pytania?
Zapraszamy do PGS
Dariusz | dtomaszewski@pgs-soft.com
Piotr | pipietrzak@pgs-soft.com
Slajdy
Angular Praktycznie I Niepraktycznie
By Dariusz Tomaszewski
Angular Praktycznie I Niepraktycznie
- 1,076