Dariusz Kalbarczyk
Experienced programmer, currently working in IT. Develops Angular based projects for large enterprises in Poland . Editor in chief of PIMM (www.issuu.com/independent-music-magazine)
Arkadiusz Kalbarczyk
Young student with a fresh view on IT, studying computer engineering at the Polish Japanese Institute of Information Technology. Engaged in projects regarding AngularJS technology.
What is AngularJS? Where to start? The first application $scope = bridge; Directives Communication with server Most Popular Mobile Web APP Frameworks IONIC Mobile Angular UI Why would you bother learning AngularJS afterall
Open source JavaScript based library Brief history Greatest advantages Society
https://angularjs.org/ https://www.youtube.com/user/angularjs http://ng-poland.pl/
Index.html <html ng-app="app"> <head> <title>First AngularJS app</title> </head> <body ng-controller="firstCtrl"> <div>{{name}} {{1-0}}.{{1+2}}.{{3-3}}</div> <div><input data-ng-model= "name" /></div> <script src="angular.js"></script> <script src="first-ctrl.js"></script> </body> </html>
first-ctrl.js var app = angular.module('app', []); app.controller('firstCtrl', function ($scope) { $scope.name = "AngularJS"; });
Why do we really need $scope? Importance of Inheritance $scope in slightly greater detail
function FurnitureStore($scope) { $scope.offers = [ {name: ‘chair’, price: 149.99}, {name: ‘table’, price: 189.99 }, {name: ‘drawer’ price: 205.99}, ]; };
What the fudge is a directive ? Are the any important? Methods of implementation Priorities Build-in directives
<new-directive></ new-directive >
<span new-directive ="expression"></span> <!-- directive: new-directive expression --> <span class=" new-directive : expression;"></span>
<!doctype html>
<html ng-app="app"> <body> <div ng-controller="ExampleController"> {{test}} </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script> <script> var app = angular.module('app', []); app.controller('ExampleController', function ($scope) { $scope.test = '123'; }); </script> </body> </html>
<!doctype html> <html> <body> <div ng-controller="ExampleController"> {{test}} </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script> <script> var app = angular.module('app', []); app.controller('ExampleController', function ($scope) { $scope.test = '123'; });
angular.bootstrap(document, ['app']); </script> </body> </html>
Module (<html ng-app=â&#x20AC;?moduleNameâ&#x20AC;?>)
Config
Filter
Directive
Factory Service Provider
Routes
Value
Controller
a form input input[checkbox] input[dateTimeLocal] input[date] input[email] input[month] input[number] input[radio] input[text] input[time] input[url] input[week]
ngApp
ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd
ngClick ngCloak
ngController
ngCopy ngCsp ngCut ngDblclick ngDisabled ngFocus ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress ngKeyup ngList
ngModel
ngModelOptions ngMousedown ngMouseenter ngMouseleave
ngMousemove ngMouseover ngMouseup ngNonBindable ngOpen ngPaste ngPluralize ngReadonly
ngRepeat
ngSelected ngShow ngSrc ngSrcset ngStyle ngSubmit ngSwitch ngTransclude ngValue script select textarea
<div data-ng-controller="mainCtrl"> <!-- main --> <div data-ng-controller="childOneCtrl"><!-- one --></div>
<div data-ng-controller="childTwoCtrl"> <!-- two --> <div data-ng-controller="nextCtrl"><!-- next --></div> </div> </div> The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports principles behind the Model-View-Controller design pattern.
<input type="text" ng-model="yourName" > <h1>Hello {{yourName}}!</h1>
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope.
<input type="text" data-ng-model="search" style="width: 80px" /> <ul> <li data-ng-repeat="mountain in mountainsList | filter : search"> {{mountain}} </li> </ul>
The ngRepeat directive creates an instance of a template once per item from a collection. Each template instance gets its own scope.
$http No callback hell thanks to promises
var http = new XMLHttpRequest(); var params = „name=Jan&surname=Kowalski’; http.open(„GET”, ‘data.json’, true); http.onreadystatechange = function() { if(http.readystate == 4 && http.status == 200) { var response = http.responseText; } else if (http.status = 400) { //error handling } } http.send(params);
POST PUT DELETE HEAD JSONP
$http.post(url, data, config) $http.put(url, data, config) $http.delete(url, config) $http.head(url, config) $http.jsonp(url)
Sencha Touch jQuery Mobile + Backbone Kendo UI
Angular
React
JS + Ionic
Mobile Angular UI is a mobile UI framework just like Sencha Touch or jQuery Mobile. If you know Angular JS and Twitter Bootstrap you already know it! [ http://mobileangularui.com/ ] Angular JS Everywhere No jQuery dependencies, no fat bootstrap js. Just a few angular.js directives super easy to learn to put things together.
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn Supports MV* Rapidly growing community Google’s child
d.kalbarczyk@orange.pl, akalbarczyk@hotmail.com ng-poland.pl www.facebook.com/AngularJS.A.New.Hope