When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
Download as PPTX, PDF1 like620 views
When to use AngularJS? Which projects are best suited for AngularJS? Which projects are not best suited for AngularJS? Deck by Liju Pillai, www.perfomatix.com http://www.perfomatix.com/angularjs-development
![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](https://image.slidesharecdn.com/angularjsgtechpptx-151130120900-lva1-app6892/85/When-to-use-and-when-not-to-use-AngularJS-Liju-Pillai-www-perfomatix-com-10-320.jpg)
![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](https://image.slidesharecdn.com/angularjsgtechpptx-151130120900-lva1-app6892/85/When-to-use-and-when-not-to-use-AngularJS-Liju-Pillai-www-perfomatix-com-15-320.jpg)
![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 + '!';
};
}]);](https://image.slidesharecdn.com/angularjsgtechpptx-151130120900-lva1-app6892/85/When-to-use-and-when-not-to-use-AngularJS-Liju-Pillai-www-perfomatix-com-17-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com (20)
Ad
More from Perfomatix Solutions (19)
![Smart Water Meter Powered by Internet of Things [Client Case Study]](https://cdn.slidesharecdn.com/ss_thumbnails/smartwatermeterpoweredbyinternetofthings-perfomatixslideshareppt-220928053313-953e5984-thumbnail.jpg?width=560&fit=bounds)
![Aggregator Platform for Professional Services [Client Case Study]](https://cdn.slidesharecdn.com/ss_thumbnails/aggregatorplatformforprofessionalservices-perfomatixslideshareppt-220922051218-ae1a6d55-thumbnail.jpg?width=560&fit=bounds)
![Social Media Analytics Dashboard [Client Case Study]](https://cdn.slidesharecdn.com/ss_thumbnails/socialmediaanalyticsdashboard-perfomatixslideshareppt-220913062158-6d0ea0bf-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
- 1. When to use and when not to use Liju Raj Pillai www.perfomatix.com ?
- 2. 2
- 3. 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
- 4. What to expect from this talk?
- 5. Why JS is relevant ? • JavaScript is around since 1995 • Considered to be “second class” • Ajax • jQuery,underscore • Modern browsers • Better JS engines
- 6. 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
- 7. 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
- 8. Sample Application 8 AngularJS Hello World
- 9. 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
- 10. 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
- 11. Data Binding Data Binding in Classical Template Systems Data Binding in Angular Templates
- 12. Dependency Injection • Design pattern • DI is omnipresent in AngularJS
- 14. 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
- 15. 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
- 16. AngularJS $scope • Connects controller and view • $rootScope • Example Fiddle
- 17. 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 + '!'; }; }]);
- 18. AngularJS Service • Stateless objects that contains useful function • Can be called from controllers,filters,directives etc • Singleton • Injectable by DI • Reusable components
- 19. 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
- 20. 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); }; });
- 21. 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
- 22. 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
- 23. 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; }); }; }); HTML <div> My pet is a <span bold-click>tortoise</span>. </div> https://docs.angularjs.org/api/ng/directive
- 24. When to use AngularJS • CRUD Application • SPA • API First
- 25. When not to use AngularJS • Games • GUI Editors • Applications with intensive and tricky DOM manipulation • Non SPA applications
- 26. 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/
- 27. What next • Angular2.0 • Tools • http://yeoman.io/ - Scaffolding and build tool • batarang - Debug tool
- 28. Thank you !!! 28