Proč Angular JS framework?

Rozměr: px

Začít zobrazení ze stránky:

Download "Proč Angular JS framework?"

Renata Kolářová
před 8 lety
Počet zobrazení:

1 Angular JS

2 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

3 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

4 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

5 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

6 Router Hashbang url HTML5 history API Nutná úprava serverové části

7 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

8 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

9 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; });

10 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>  <input class="my-directive">

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

12 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">

13 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); } } };

14 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)

15 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)

16 Stavební kameny - $resource angular.module('resource', ['ngresource']).factory('users', function ($resource) { return $resource(' { apikey:'4fb51e55e4b02e56a67b0b66', id:'@_id.$oid' }); }).controller('resourcectrl', function($scope, Users){ }); $scope.users =Users.query();

17 Zdroje informací Dokumentace: Ukázky aplikací: ToDo list: Kniha: Mastering Web Application Development with AngularJS - Packt Publishing Angular-app:

Podobné dokumenty

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015 Webové technologie

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015 Webové technologie RIA, JSON, REST, AngularJS strana 2 RIA - rich internet application chová se podobně jako desktopová aplikace velké množství logiky