Embed Size (px)
DESCRIPTION
Exploring Angular JS Speaker Liju Pillai, Perfomatix #CoffeeAtDbg
Citation preview
ExploringLiju Raj Pillai
CEO, Perfomatix Solutions Pvt Ltd
2
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
What to expect from this talk?
Why JS is relevant ?
• JavaScript is around since 1995• Considered to be “second class” • Ajax• jQuery,underscore• Modern browsers • Better JS engines
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
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
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
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
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
Data Binding
Data Binding in Classical Template Systems Data Binding in Angular Templates
Dependency Injection
• Design pattern• DI is omnipresent in AngularJS
Dependency Injection
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
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>
AngularJS $scope• Connects controller and view• $rootScope
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 + '!'; }; }]);
AngularJS Service
• Stateless objects that contains useful function • Can be called from controllers,filters,directives etc• Singleton• Injectable by DI• Reusable components
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;});
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); };});
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.
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
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
When to use AngularJS
• CRUD Application• SPA• API First
When not to use AngularJS
• Games• GUI Editors• Applications with intensive and tricky DOM manipulation• Non SPA applications
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/
What next
• Angular2.0• Tools
• http://yeoman.io/ - Scaffolding and build tool
• batarang - Debug tool
Demo
28
Thank you !!!
29
