coffee@dbg - exploring angular js
DESCRIPTION
Exploring Angular JS Speaker Liju Pillai, Perfomatix #CoffeeAtDbgTRANSCRIPT
![Page 1: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/1.jpg)
ExploringLiju Raj Pillai
CEO, Perfomatix Solutions Pvt Ltd
![Page 2: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/2.jpg)
2
![Page 3: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/3.jpg)
Topics
• What to expect from the talk• Why JavaScript is relevant?• Before diving in to AngularJS• What is AngularJS• Core concepts of AngularJS• When to use AngularJS• What next• Demo
3
![Page 4: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/4.jpg)
What to expect from this talk?
![Page 5: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/5.jpg)
Why JS is relevant ?
• JavaScript is around since 1995• Considered to be “second class” • Ajax• jQuery,underscore• Modern browsers • Better JS engines
![Page 6: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/6.jpg)
Before diving in to AngularJS
• JavaScript(of course !!!)• Model View Controller pattern
• Why MVC ?• Server side MVC• Client side MVC
• SPA – Single Page Application• Framework vs Library
![Page 7: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/7.jpg)
What is AngularJS• Client-side framework• Developed and maintained by Google.• Provides client side MVC capabilities.• Philosophy
• Declarative code is better than imperative • Testing in equal importance to app writing• Decouple client side from server side
• Ideal for SPA
![Page 8: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/8.jpg)
Sample Application
8
JAVASCRIPTvar myModule=angular.module(“myApp”,[])myModule.controller(“exampleController”,[“$scope”,function($scope){
$scope.message=“Angular is awesome”}]);
JAVASCRIPTvar myModule=angular.module(“myApp”,[])myModule.controller(“exampleController”,[“$scope”,function($scope){
$scope.message=“Angular is awesome”}]);
HTML<html ng-app=“myApp”>
<head><script src=“lib/angular.js”><script src=“js/___.js”>
</head><body>
<div ng-controller=“exampleController”>{{message}}
</div></body>
</html>
HTML<html ng-app=“myApp”>
<head><script src=“lib/angular.js”><script src=“js/___.js”>
</head><body>
<div ng-controller=“exampleController”>{{message}}
</div></body>
</html>
RESULTAngular is awesome
RESULTAngular is awesome
![Page 9: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/9.jpg)
Modules• Divides web application into small,reusable components• Controllers,Filters,Directives etc can be declared inside a module• You can package code as reusable modules• Modules can be loaded in any order• Unit tests only have to load relevant modules
![Page 10: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/10.jpg)
Modules
CREATING AN ANGULAR JS MODULE<script type="text/javascript">
angular.module('myApp',[]);angular.module('myApp',['dependentModule1','dependentModule2']);
</script>
CREATING AN ANGULAR JS MODULE<script type="text/javascript">
angular.module('myApp',[]);angular.module('myApp',['dependentModule1','dependentModule2']);
</script>
USING ANGULAR JS MODULE<html ng-app="myApp">
<head>...</head><body>…</body>
</html
USING ANGULAR JS MODULE<html ng-app="myApp">
<head>...</head><body>…</body>
</html
![Page 11: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/11.jpg)
Data Binding
Data Binding in Classical Template Systems Data Binding in Angular Templates
![Page 12: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/12.jpg)
Dependency Injection
• Design pattern• DI is omnipresent in AngularJS
![Page 13: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/13.jpg)
Dependency Injection
![Page 14: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/14.jpg)
AngularJS Controllers
•Where your business logic lives
•Layer between UI and data store
•ng-controller
•Decoupled from the view
•Re-instantiated on every new call
•Add behavior to $scope
![Page 15: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/15.jpg)
AngularJS ControllersCODE SNIPPET
var myModule=angular.module(“exampleModule”,[])myModule.controller(“exampleController”,[“$scope”,function($scope){
$scope.message=“Angular is awesome”}]);
CODE SNIPPETvar myModule=angular.module(“exampleModule”,[])myModule.controller(“exampleController”,[“$scope”,function($scope){
$scope.message=“Angular is awesome”}]);
HTML<div ng-controller="DoubleController">Two times <input ng-model="num"> equals {{ double(num) }}</div>
HTML<div ng-controller="DoubleController">Two times <input ng-model="num"> equals {{ double(num) }}</div>
![Page 16: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/16.jpg)
AngularJS $scope• Connects controller and view• $rootScope
![Page 17: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/17.jpg)
AngularJS $scopeHTML
<div ng-controller="MyController"> Your name: <input type="text" ng-model="username"> <button ng-click='sayHello()'>greet</button> <hr> {{greeting}}</div>
HTML<div ng-controller="MyController"> Your name: <input type="text" ng-model="username"> <button ng-click='sayHello()'>greet</button> <hr> {{greeting}}</div>
SCRIPTangular.module('scopeExample', []) .controller('MyController', ['$scope', function($scope) { $scope.username = 'World';
$scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.username + '!'; }; }]);
SCRIPTangular.module('scopeExample', []) .controller('MyController', ['$scope', function($scope) { $scope.username = 'World';
$scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.username + '!'; }; }]);
![Page 18: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/18.jpg)
AngularJS Service
• Stateless objects that contains useful function • Can be called from controllers,filters,directives etc• Singleton• Injectable by DI• Reusable components
![Page 19: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/19.jpg)
AngularJS Service• Lazy instantiated• Services provided by Angular
• $http - For ajax requests
• $interval and $timeout - Repeats and delays
• $rootScope - very top scope of application
• $location - URL and its parts of current site
• $window - Wrapper of global window. Useful for testsCODE SNIPPET
var myModule = angular.module('myModule', []);myModule.factory('serviceId', function() { var shinyNewServiceInstance; // factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance;});
CODE SNIPPETvar myModule = angular.module('myModule', []);myModule.factory('serviceId', function() { var shinyNewServiceInstance; // factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance;});
![Page 20: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/20.jpg)
AngularJS Filters
• A filter formats the value of an expression for display to the user
CODE SNIPPETmyApp.filter('capitalize', function () { return function (s) { if (!s || !angular.isString(s)) { return s; } return s.charAt(0).toUpperCase() + s.substring(1); };});
CODE SNIPPETmyApp.filter('capitalize', function () { return function (s) { if (!s || !angular.isString(s)) { return s; } return s.charAt(0).toUpperCase() + s.substring(1); };});
![Page 21: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/21.jpg)
AngularJS Filters
• Functions which modify expressions
• But does not alter the original data
• Angular JS provides few of its own filters
• currency, lowercase, date, number, filter, orderBy, uppercase etc.
![Page 22: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/22.jpg)
AngularJS Directives
• Angular’s way to teach html new tricks• Lives in the view • Built in Directives ng-app, ng-controller, ng-repeat, ng-model etc • Directive names, ngModel or ng-model
![Page 23: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/23.jpg)
AngularJS DirectivesJAVASCRIPT
myApp.directive('boldClick', function() { return function(scope, element) { var bold = false; element.click(function() { if (bold) { element.css('font-weight', 'normal'); } else { element.css('font-weight', 'bold'); } bold = !bold; }); };});
JAVASCRIPT myApp.directive('boldClick', function() { return function(scope, element) { var bold = false; element.click(function() { if (bold) { element.css('font-weight', 'normal'); } else { element.css('font-weight', 'bold'); } bold = !bold; }); };});
HTML<div>
My pet is a <span bold-click>tortoise</span>.</div>
HTML<div>
My pet is a <span bold-click>tortoise</span>.</div>
https://docs.angularjs.org/api/ng/directive
![Page 24: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/24.jpg)
When to use AngularJS
• CRUD Application• SPA• API First
![Page 25: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/25.jpg)
When not to use AngularJS
• Games• GUI Editors• Applications with intensive and tricky DOM manipulation• Non SPA applications
![Page 26: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/26.jpg)
What next
• Path from novice to ninja
• Learn JavaScript http://eloquentjavascript.net/• Read https://docs.angularjs.org/guide
• Do https://docs.angularjs.org/tutorial
• Refer https://egghead.io/
![Page 27: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/27.jpg)
What next
• Angular2.0• Tools
• http://yeoman.io/ - Scaffolding and build tool
• batarang - Debug tool
![Page 28: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/28.jpg)
Demo
28
![Page 29: Coffee@DBG - Exploring Angular JS](https://reader033.vdocuments.net/reader033/viewer/2022052507/558c8757d8b42a0c078b4736/html5/thumbnails/29.jpg)
Thank you !!!
29