AngularJS - Mobile Warsaw 20/10/2014

Page 1


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=�moduleName�>)

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.