Coffee@DBG - Exploring Angular JS
•Télécharger en tant que PPT, PDF•
3 j'aime•1,280 vues
Exploring Angular JS Speaker Liju Pillai, Perfomatix #CoffeeAtDbg
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Coffee@DBG - Exploring Angular JS
Similaire à Coffee@DBG - Exploring Angular JS (20)
Plus de Deepu S Nath
Plus de Deepu S Nath (20)
Dernier
Dernier (20)
Coffee@DBG - Exploring Angular JS
- 1. Exploring Liju Raj Pillai CEO, Perfomatix Solutions Pvt Ltd
- 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 JAVASCRIPT var myModule=angular.module(“myApp”,[]) myModule.controller(“exampleController”,[“$scope”,function($scope){ $scope.message=“Angular is awesome” }]); JAVASCRIPT var myModule=angular.module(“myApp”,[]) myModule.controller(“exampleController”,[“$scope”,function($scope){ $scope.message=“Angular is awesome” }]); 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
- 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> 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
- 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 behavior to $scope
- 15. AngularJS Controllers CODE SNIPPET var myModule=angular.module(“exampleModule”,[]) myModule.controller(“exampleController”,[“$scope”,function($scope){ $scope.message=“Angular is awesome” }]); 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> HTML <div ng-controller="DoubleController"> Two times <input ng-model="num"> equals {{ double(num) }} </div>
- 16. AngularJS $scope • Connects controller and view • $rootScope
- 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> 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 + '!'; }; }]);
- 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 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; });
- 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); }; }); 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.
- 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
- 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; }); }; }); 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
- 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. Demo 28
- 29. Thank you !!! 29