When to use and when not to use AngularJS - Liju Pillai,

When to use and when not to use

Liju Raj Pillaiwww.perfomatix.com

?

http://www.perfomatix.com/

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

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 ApplicationAngularJS Hello World

http://jsfiddle.net/lijurajpillai/Lapr1mob/

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

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

AngularJS Controllers

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>

Controller Fiddle

http://jsfiddle.net/lijurajpillai/zn1grnka/

AngularJS $scope• Connects controller and view• $rootScope• Example Fiddle

http://jsfiddle.net/lijurajpillai/6qf1pvwv/

AngularJS $scopeHTML

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

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

http://jsfiddle.net/lijurajpillai/b9aykuwr/

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

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

http://jsfiddle.net/lijurajpillai/xv4oae1f/

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

http://jsfiddle.net/lijurajpillai/wdtL3ck9/

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

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/

http://eloquentjavascript.net/

https://docs.angularjs.org/guide

https://docs.angularjs.org/tutorial

https://egghead.io/

What next• Angular2.0• Tools• http://yeoman.io/ - Scaffolding and build tool• batarang - Debug tool

http://yeoman.io/

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

Thank you !!!

When to use and when not to use AngularJS - Liju Pillai,

Software

Transcript of When to use and when not to use AngularJS - Liju Pillai,