Exploring AngularJS - Liju Pillai

29
Exploring Liju Raj Pillai CEO, Perfomatix Solutions Pvt Ltd

Transcript of Exploring AngularJS - Liju Pillai

Exploring

Liju 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

AngularJS Hello World

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>

USING ANGULAR JS MODULE

<html ng-app="myApp">

<head>...</head>

<body>…</body>

</html

Data Binding

Data Binding in Classical Template

SystemsData 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 behaviour to $scope

AngularJS Controllers

CODE SNIPPET

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

Controller Fiddle

AngularJS $scope• Connects controller and view

• $rootScope

• Example Fiddle

AngularJS $scope

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 + '!';

};

}]);

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

• Example

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

};

});

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

• Example

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

• Example

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;

});

};

});

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