Downloaded 17 times
![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](https://image.slidesharecdn.com/angularjsliju-141106075105-conversion-gate01/75/Coffee-DBG-Exploring-Angular-JS-8-2048.jpg)
![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](https://image.slidesharecdn.com/angularjsliju-141106075105-conversion-gate01/75/Coffee-DBG-Exploring-Angular-JS-10-2048.jpg)
![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>](https://image.slidesharecdn.com/angularjsliju-141106075105-conversion-gate01/75/Coffee-DBG-Exploring-Angular-JS-15-2048.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> 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 + '!'; }; }]);](https://image.slidesharecdn.com/angularjsliju-141106075105-conversion-gate01/75/Coffee-DBG-Exploring-Angular-JS-17-2048.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 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; });](https://image.slidesharecdn.com/angularjsliju-141106075105-conversion-gate01/75/Coffee-DBG-Exploring-Angular-JS-19-2048.jpg)
Uploaded byDeepu S Nath
Coffee@DBG - Exploring Angular JS
This document provides an overview of AngularJS, including: - Core concepts like MVC pattern, data binding, dependency injection, modules, controllers, scopes, services, filters and directives - When to use AngularJS for CRUD and single-page applications versus when not to for games or non-SPA apps - Next steps like learning JavaScript fundamentals, reading documentation, doing tutorials, and checking out tools like Yeoman and Batarang - A sample AngularJS application is demonstrated
Coffee@DBG - Exploring Angular JS
- 1. Exploring Liju RajPillai CEO, Perfomatix Solutions Pvt Ltd
- 2.
- 3. Topics • Whatto 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 expectfrom this talk?
- 5. Why JS isrelevant ? • JavaScript is around since 1995 • Considered to be “second class” • Ajax • jQuery,underscore • Modern browsers • Better JS engines
- 6. Before diving into 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 • Dividesweb 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 ANANGULAR 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 DataBinding in Classical Template Systems Data Binding in Angular Templates
- 12. Dependency Injection •Design pattern • DI is omnipresent in AngularJS
- 13.
- 14. AngularJS Controllers •Whereyour 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 CODESNIPPET 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 useAngularJS • CRUD Application • SPA • API First
- 25. When not touse 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.
- 29.