Embed Size (px)
Citation preview
Dariusz KalbarczykExperienced 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 KalbarczykYoung 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 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"> <!-- 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 $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 EverywhereNo 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
![[IT기술칼럼 #4] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원](https://img.dokumen.tips/doc/110x75/58effc4f1a28ab79688b45d7/it-4-for-angularjs-reactangularjsreact.jpg)
![Let's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal](https://img.dokumen.tips/doc/110x75/554be4ceb4c9055a368b4841/lets-explore-angularjs-frexplorons-angularjs-gdg-montreal.jpg)
