Coffee@DBG - Exploring Angular JS

Exploring
Liju Raj Pillai
CEO, Perfomatix Solutions Pvt Ltd

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
JAVASCRIPT
var myModule=angular.module(“myApp”,[])
myModule.controller(“exampleController”,[“$scope”,function($scope){
$scope.message=“Angular is awesome”
}]);
JAVASCRIPT
var myModule=angular.module(“myApp”,[])
}]);
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>
RESULT
Angular is awesome
RESULT
Angular 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

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 Controllers
CODE SNIPPET
var myModule=angular.module(“exampleModule”,[])
}]);
CODE SNIPPET
var myModule=angular.module(“exampleModule”,[])
}]);
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 $scope
HTML
<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>
SCRIPT
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
SCRIPT
angular.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 tests
CODE SNIPPET
var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
var shinyNewServiceInstance;
// factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
CODE SNIPPET
var 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 SNIPPET
myApp.filter('capitalize', function () {
return function (s) {
if (!s || !angular.isString(s)) {
return s;
}
return s.charAt(0).toUpperCase() + s.substring(1);
};
});
CODE SNIPPET
myApp.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 Directives
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;
});
};
});
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

Coffee@DBG - Exploring Angular JS

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Coffee@DBG - Exploring Angular JS (20)

More from Deepu S Nath (20)

Recently uploaded (20)

Coffee@DBG - Exploring Angular JS