Angular JS

Proč Angular JS framework? ●

● ●

●

●

Open Source – vytvořený a spravovaný Googlem Vhodný pro tvorbu formulářových aplikací Dodá aplikaci základní architekturu a udržovatelnost Deklarativní způsob práce s UI – rozšiřuje HTML jazyk o nové možnosti Dobrá podpora pro unit testy

Struktura ukázkové aplikace ●

Rozdělení aplikace na server/klient, adresářová struktura

●

Bower, řešení závislostí na klientovi

●

Grunt, buildování klientské aplikace

Stavební kameny - moduly ●

●

Aplikace je rozdělena do modulů, kde se registrují jednotlivé komponenty aplikace Zamezení používání globálních proměnných angular.module('hello', [ ]) .controller('HelloCtrl', function($scope){ $scope.name = 'World'; });

●

Dependency injection

●

$ - jmený prostor angularu

Stavební kameny – MVC vzor ●

View jsou HTML šablony doplňené o výrazy a direktivy

●

One way binding, two way binding

Router ●

Hashbang url –

●

http://myhost.com/admin/#products

HTML5 history API –

http://myhost.com/admin/products

–

Nutná úprava serverové části

Stavební kameny - $scope ● ●

●

●

Objekt, který předává data šablonám $rootScope, předek pro všechny scope objekty, který se vytváří při zavádění aplikace Hierarchická struktura scope objektů kopírující DOM, vlastnosti definované na předkovy jsou dostupné i potomkům Hierarchická struktura scope objektů se využívá i jako event bus. $emit - události vysíláné k předkovi, $broadcast – události vysílané k potomkům

Stavební kameny - Služby ● ●

●

Objekty registrujeme do DI kontejneru Neregistrujeme přímo objekty, ale předpis, podle něhož se objekt vytváří Typy objektů: Values, Constants, Services, Factories, Providers

Stavební kameny - Služby shoppingModule.factory('Items', function() { var items = {}; items.query = function() { // V reálné aplikaci bychom dotazovali server return [ {title: 'Paint pots', description: 'Pots full of paint', price: 3.95}, {title: 'Polka dots', description: 'Dots with polka, price: 2.95}, {title: 'Pebbles', description: 'Just little rocks', price: 6.95} ]; }; return items; });

Stavební kameny - Direktivy ●

●

Direktivy rozšiřují HTML jazyk o novou funkcionalitu. Začínáme používat HTML jako Domain Specific Language (DSL). Direktivy mohou být elementy, atributy, komentáře nebo CSS třídy

<my-directive>

Stavební kameny - Direktivy ●

●

Velké množství direktiv přímo ve frameworku (ngApp, ngRepeat, ngClick, ngModel...) Případy užití vlastní direktivy ✔

Příma manipulace s DOMem, tak jako v JQuery

✔

Přesunutí opakujícího se kódu do direktiv

✔

Obalení jquery pluginů (např. JQuery UI knihovny)

Stavební kameny - Direktivy ●

Ukázky direktiv

Submit → Click Me!

<pagination num-pages="tasks.pageCount" current-page="tasks.currentPage">

validate-

Stavební kameny - Direktivy Ukázka kódu

●

myModule.directive('button', function() { return { restrict: 'E', compile: function(element, attributes) { element.addClass('btn'); if ( attributes.type === 'submit' ) { element.addClass('btn-primary'); } if ( attributes.size ) { element.addClass('btn-' + attributes.size); } } };

Stavební kameny - $http ● ●

●

Obecná služba pro http requesty Použití jako funkce $http(config), kde v config objektu předáváme vše potřebné (url, http metody, data, parametry... ) Zkratky pro jednotlivé http metody –

$http.post(url, config)

–

$http.get(url, config)

–

$http.put(url, config)

–

$http.delete(url, config)

Stavební kameny - $resource ●

●

●

●

●

●

Objekt, který nám umožní komunikovat s REST službami Použití je jednoduší než s $http službou, podpora CRUD operací Objekt.query(params, successcb, errorcb) – vrací kolekci dat Objekt.get(params, successcb, errorcb) – vrací konkrétní položku Objekt.save(params, payloadData, successcb, errorcb) - ukládá položku Objekt.delete(params,successcb, errorcb)

Stavební kameny - $resource angular.module('resource', ['ngResource']) .factory('Users', function ($resource) { return $resource('https://api.mongolab.com/api/1/databases/ascrum/collections/users/:id', { apiKey:'4fb51e55e4b02e56a67b0b66', id:'@_id.$oid' }); })

.controller('ResourceCtrl', function($scope, Users){ $scope.users =Users.query(); });

Zdroje informací ●

Dokumentace: http://docs.angularjs.org/

●

Ukázky aplikací: http://builtwith.angularjs.org/

●

●

●

ToDo list: http://todomvc.com/architecture-examples/angularjs/#/ Kniha: Mastering Web Application Development with AngularJS - Packt Publishing Angular-app: https://github.com/angular-app/angular-app