O czym będziemy mówić ?

  1. Czym jest Angular?
  2. Dlaczego używamy Angulara?
  3. ​Główne cechy Angulara
  4. Najczęściej popełniane błędy
  5. Przykład aplikacji
  6. Kilka słów o Angular 2
  7. Budujemy aplikację w A2
  8. Podsumowanie

Dariusz Tomaszewski

dtomaszewski@pgs-soft.com

Piotr Pietrzak

pipietrzak@pgs-soft.com

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 < 11 9

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

Slajdy

Angular Praktycznie I Niepraktycznie

By Dariusz Tomaszewski

Angular Praktycznie I Niepraktycznie

  • 1,076