On September 25th we hosted a webinar on “Step by Step AngularJS for beginners” for the Indian region and we’d like to share the presentation and recorded webinar with you now! In the webinar, we covered: • Introduction to AngularJS • Introduction to SPA • Controller and $scope object • Controller hierarchy • Service and factory methods • Routing • CRUD operations in AngularJS application And more!

1. Step by Step - AngularJS
Dhananjay Kumar
@debug_mode
http://debugmode.net

2. Agenda
• 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. Give Away
Tweet your experience about webinar using the hashtag
#Infragistics or tag @infragistics to win cool goodies from
us.
If you are in Delhi/NCR , join us for Infragistics Day
tomorrow. Its free workshop on AngularJS in Noida

4. I am Dhananjay Kumar
Infragistics Evangelist
6 times Microsoft MVP
C-Sharp Corner Mentor
@debug_mode
debugmode@outlook.com
http://debugmode.net

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

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

7. Let us start with writing some
AngularJS code

8. $scope object
view controllerTalk to each other using $scope

9. $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 a new $scope
gets created

10. $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

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

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

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

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

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

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

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

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

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

20. Scopes in Directives
Shared Scope Inherited Scope
Isolated Scope

21. Scopes in Directives
• 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

22. Scopes in Directives

23. Isolated Scope properties

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

25. Q& A ?

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

27. What Infragistics can offer you?
• We welcome all of you to take advantage of a FREE 30 Day Trial by downloading
the product at: http://www.infragistics.com/products/ultimate/download
• Please reach out to us at Sales-India@infragistics.com for any follow up questions
you may have. We welcome the opportunity to assist you.