Step by Step - AngularJSDhananjay Kumar

@debug_modehttp://debugmode.net

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

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

I am Dhananjay Kumar

Infragistics Evangelist 6 times Microsoft MVP C-Sharp Corner Mentor @debug_mode debugmode@outlook.comhttp://debugmode.net

AngularJS

Client side framework

Single Page Application

Business logic can be unit

tested with ease

Suitable for TDDTo create

dynamic web page

Can we used with any server side technology

main components of AngularJS

Controllers Scopes Services

Directives Routing Module

Views Data Binding Filters

Let us start with writing some AngularJS code

$scope object

view controllerTalk to each other using $scope

$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

$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

Controller in AngularJSController 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

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

Let us write code to understand

• Controller and $scope object• Controller Hierarchy•Nested Controller

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

Service creation

service() factory() provider() value() constant()

Service in AngularJS

Let us write code to understand

• Services using service() method • Services using factory() method•Using $http service to perform AJAX

operation • Perform CRUD operation

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

There are many built in directives available

Some of them are ng-show ,ng-app,ng-controller etc

Directives in AngularJS

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

Scopes in Directives

Shared Scope Inherited Scope

Isolated Scope

Scopes in Directives

Shared Scope

•Directive shared scope with the enclosed controller•It is default scope

Inherited Scope

•Directive inherit scope of the enclosed controller

Isolated Scope

•Directive and controller has different scope •Data is not shared

Scopes in Directives

Isolated Scope properties

Let us write code to understand

• Create custom directive •Using different scopes •Using local scope properties in isolated

scope

Q& A ?

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

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.