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
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
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>
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