1. Dhananjay Kumar @debug_mode Microsoft MVP http://debugmode.net
AngularJS
Dhananjay Kumar
@debug_mode
Microsoft MVP

2. Agenda : 60 to 80 minutes
Setting up Visual Studio as development environment
Getting started with AngularJS
$scope object and $rootScope object
Controllers and nested controllers
Services using service() method and factory() method
CRUD operation
Directives and Creating basic Custom Directive
Scopes in directives
Isolated scope with local properties

3. I am Dhananjay Kumar 5 times Microsoft MVP Infragistics Consultant
@debug_mode
Blog :

4. AngularJS Client side framework Single Page Application
Business logic can be unit tested with ease
Suitable for TDD
To create dynamic web page
Can we used with any server side technology

5. main components of AngularJS
Controllers
Scopes
Services
Directives
Routing
Module
Views
Data Binding
Filters

6. Let us start with writing some AngularJS code

7. Talk to each other using $scope
$scope object
view
controller
Talk to each other using $scope

8. For each controller creation and new $scope gets created
$scope object
$scope serves as the glue between controller and the view
View and the controller both have access of the $scope object
$scope pass data and behaviour to the view from the controller
$scope provides execution context for the DOM and the expression
The $scope object is plain JavaScript object. We can add and remove property as required
For each controller creation and new $scope gets created

9. $rootScope object
$rootScope is top most scope on DOM element with ng-app directive
In angular all the $scope are created with prototypal inheritance
$scope has access to their parent $scope object and eventually to $rootScope object
$rootScope object is parent of all the $scope object

10. Controller in AngularJS
Controller is a JavaScript constructor functions which contains data and the business logic
Controller name should start from the capital letter and ends with controller. For example AuthorController
It takes $scope òbject as parameter and attach data and behaviour to the $scope object
Do not use controller to manipulate DOM or create custom filter

11. Controller in AngularJS
Each controller has its own child $scope object
Whenever new controller gets created on the view angular pass a $scope object to it
Controller can be attached to different level of DOM. Hence it creates $scope hierarchy
$scope of the child controller can access and override data and behaviour of the parent controller

12. Let us write code to understand
Controller and $scope object
Controller Hierarchy
Nested Controller

13. Service in AngularJS
Service organize and share data and functions across the application
Service provides methods to communicate data across the controllers in a consistent way
Service is a singleton object and it gets instantiated only once per application using the $injector
Services are lazy instantiated and gets created when angular app components need it
There are many inbuilt services like $http, $q can be used as it is
There are five different ways a custom service can be created

14. Service in AngularJS Service creation service() factory() provider()
value()
constant()

15. Let us write code to understand
Services using service() method
Services using factory() method
Using $http service to perform AJAX operation
Perform CRUD operation

16. Directives in AngularJS
It attaches specified behaviour to existing DOM elements or create new element
Directives can modify the behaviour of a particular DOM element or add new custom element on the DOM
Directive name must be provided in the camel case
On the view directive can be used by separating the camel case name either using dash, colon, or underscore
Combination of dash, underscore or colon can also be used
If directive name myFirstDirective then on the view it can be used either as my-first-directive or my:first:directive or my_first_directive or  my_first-directive or my-first:directive

17. Directives in AngularJS
There are many built in directives available
Some of them are ng-show ,ng-app,ng-controller etc

18. Custom Directives can be used
As an attribute – set restrict value to A
As a custom element – set restrict value to E
As a comment – set restrict value to M
As a class- set restrict value to C

19. Scopes in Directives
Shared Scope
Inherited Scope
Isolated Scope

20. Scopes in Directives Shared Scope Inherited Scope Isolated Scope
Directive shared scope with the enclosed controller
It is default scope
Shared Scope
Directive inherit scope of the enclosed controller
Inherited Scope
Directive and controller has different scope
Data is not shared
Isolated Scope

21. Scopes in Directives

22. Isolated Scope properties

23. Let us write code to understand
Create custom directive
Using different scopes
Using local scope properties in isolated scope

24. Q& A ?

25. Summary Setting up Visual Studio as development environment
Getting started with AngularJS
$scope object and $rootScope object
Controllers and nested controllers
Services using service() method and factory() method
CRUD operation
Directives and Creating basic Custom Directive
Scopes in directives
Isolated scope with local properties

26. What Infragistics can offer you?
We welcome all of you to take advantage of a FREE 30 Day Trial by downloading the product at:
Any license purchases on or before 4/30/15 entitles you to take advantage of a 10% discount if you attended this webinar session today!
Please reach out to us at for any follow up questions you may have. We welcome the opportunity to assist you.