Exploring AngularJS Core Concepts

Exploring
Liju Raj Pillai
CEO, Perfomatix Solutions Pvt Ltd

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

What to expect from this talk?

Why JS is relevant ?
• JavaScript is around since 1995
• Considered to be “second class”
• Ajax
• jQuery,underscore
• Modern browsers
• Better JS engines

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

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

Sample Application
8
AngularJS Hello World

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

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

Data Binding
Data Binding in Classical Template
Systems
Data Binding in Angular Templates

Dependency Injection
• Design pattern
• DI is omnipresent in AngularJS

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

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

AngularJS $scope
• Connects controller and view
• $rootScope
• Example Fiddle

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 + '!';
};
}]);

AngularJS Service
• Stateless objects that contains useful function
• Can be called from controllers,filters,directives etc
• Singleton
• Injectable by DI
• Reusable components

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

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);
};
});

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

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

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

When to use AngularJS
• CRUD Application
• SPA
• API First

When not to use AngularJS
• Games
• GUI Editors
• Applications with intensive and tricky DOM manipulation
• Non SPA applications

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/

What next
• Angular2.0
• Tools
• http://yeoman.io/ - Scaffolding and build tool
• batarang - Debug tool

Exploring AngularJS Core Concepts

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Exploring AngularJS Core Concepts

Similar to Exploring AngularJS Core Concepts (20)

Recently uploaded

Recently uploaded (20)

Exploring AngularJS Core Concepts