Exploring AngularJS: Development Environment Setup, Controllers, Services, and More

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

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

I am Dhananjay Kumar 5 times Microsoft MVP Infragistics Consultant @debug_mode Blog : http://debugmode.net

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

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

Let us start with writing some AngularJS code

$scope object view controller Talk 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 and 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 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

Controller in AngularJS Whenever new controller gets created on the view angular pass a $scope object to it Each controller has its own child $scope object 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 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 Service organize and share data and functions across the application 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

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

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 Directives can modify the behaviour of a particular DOM element or add new custom element on the DOM It attaches specified behaviour to existing DOM elements or create new element 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 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 Combination of dash, underscore or colon can also be used

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

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 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 Sales-India@infragistics.com for any follow up questions you may have. We welcome the opportunity to assist you.