Downloaded 14 times
![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-150226231720-conversion-gate01/75/Exploring-AngularJS-Liju-Pillai-10-2048.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-150226231720-conversion-gate01/75/Exploring-AngularJS-Liju-Pillai-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>
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-150226231720-conversion-gate01/75/Exploring-AngularJS-Liju-Pillai-17-2048.jpg)
Uploaded byLiju Pillai
Exploring AngularJS - Liju Pillai
The document outlines a talk by Liju Raj Pillai on AngularJS, covering its relevance, core concepts, and practical applications in web development. It highlights the differences between frameworks and libraries, the MVC architecture, and AngularJS features like data binding, dependency injection, controllers, services, filters, and directives. The presentation also suggests resources for further learning and indicates scenarios for when to use or avoid AngularJS.
More Related Content
Similar to Exploring AngularJS - Liju Pillai
Exploring AngularJS - Liju Pillai
- 1. Exploring Liju Raj Pillai CEO,Perfomatix Solutions Pvt Ltd
- 2.
- 3. Topics • What toexpect 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.
- 9. Modules • Divides webapplication 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 ANGULARJS 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 Bindingin Classical Template Systems Data Binding in Angular Templates
- 12. Dependency Injection • Designpattern • 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 behaviour to $scope
- 15. AngularJS Controllers CODE SNIPPET varmyModule=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 • Connectscontroller and view • $rootScope • Example Fiddle
- 17. AngularJS $scope HTML <div ng-controller="MyController"> Yourname: <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 • Statelessobjects that contains useful function • Can be called from controllers,filters,directives etc • Singleton • Injectable by DI • Reusable components
- 19. AngularJS Service • Lazyinstantiated • 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 • Afilter 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 • Functionswhich 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’sway 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 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 • Pathfrom 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.