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 <!DOCTYPE html> <html> <head> <title>aplikace</title> </head> <body ng-app="helo"> <div ng-controller="helloctrl"> Say hello to: <input type="text" ng-model="name"><br> <h1>hello, {{name}}!</h1> </div> </body> </html> 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></my-directive> <input my-directive> <!-- directive: my-directive--> <input class="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 <button type="submit" size="large">submit</button> <button type="submit" class="btn btn-primary btn-large">click Me!</button> <pagination num-pages="tasks.pagecount" current-page="tasks.currentpage"> </pagination> <form name="passwordform"> <input type="password" name="password" ng-model="user.password"> validate- <input type="password" name="confirmpassword" ng-model="confirmpassword" equals="user.password"> </form> <input ui-date ui-date-format="dd, d MM, yy" ng-model="mydate">
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