When to use and when not to use AngularJS - Liju Pillai,
-
Upload
perfomatix-solutions -
Category
Software
-
view
262 -
download
2
Transcript of When to use and when not to use AngularJS - Liju Pillai,
![Page 2: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/2.jpg)
![Page 3: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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
![Page 4: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/4.jpg)
What to expect from this talk?
![Page 5: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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 9: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/10.jpg)
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
![Page 11: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/11.jpg)
Data Binding
Data Binding in Classical Template Systems Data Binding in Angular Templates
![Page 12: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/12.jpg)
Dependency Injection• Design pattern• DI is omnipresent in AngularJS
![Page 13: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/13.jpg)
Dependency Injection
![Page 14: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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 behaviour to $scope
![Page 15: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/15.jpg)
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
![Page 16: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/16.jpg)
AngularJS $scope• Connects controller and view• $rootScope• Example Fiddle
![Page 17: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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>
SCRIPTangular.module('scopeExample', []) .controller('MyController', ['$scope', function($scope) { $scope.username = 'World';
$scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.username + '!'; }; }]);
![Page 18: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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 tests• Example
![Page 20: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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); };});
![Page 21: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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
• Example
![Page 22: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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• Example
![Page 23: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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; }); };});
HTML<div>
My pet is a <span bold-click>tortoise</span>.</div>
https://docs.angularjs.org/api/ng/directive
![Page 24: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/24.jpg)
When to use AngularJS• CRUD Application• SPA• API First
![Page 25: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/25.jpg)
When not to use AngularJS• Games• GUI Editors• Applications with intensive and tricky DOM manipulation• Non SPA applications
![Page 26: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/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: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/27.jpg)
What next• Angular2.0• Tools• http://yeoman.io/ - Scaffolding and build tool• batarang - Debug tool
![Page 28: When to use and when not to use AngularJS - Liju Pillai,](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2853f1a28ab656b8b458b/html5/thumbnails/28.jpg)
Thank you !!!