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

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to AngularJS Mobile Warsaw 20-10-2014 (20)

Recently uploaded (20)

AngularJS Mobile Warsaw 20-10-2014