AngularJS Mobile Warsaw 20-10-2014

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>  <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 Controller Routes Service Provider Value

 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">  <div data-ng-controller="childOneCtrl"></div> <div data-ng-controller="childTwoCtrl">  <div data-ng-controller="nextCtrl"></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

 POST $http.post(url, data, config)  PUT $http.put(url, data, config)  DELETE $http.delete(url, config)  HEAD $http.head(url, config)  JSONP $http.jsonp(url)

 Sencha Touch  jQuery Mobile + Backbone  Kendo UI  Angular JS + Ionic  React

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

AngularJS Mobile Warsaw 20-10-2014

More Related Content

What's hot

Viewers also liked

Similar to AngularJS Mobile Warsaw 20-10-2014

Recently uploaded

AngularJS Mobile Warsaw 20-10-2014