Downloaded 60 times
Uploaded byInfragistics
Step by Step - AngularJS
The document outlines a webinar on AngularJS presented by Dhananjay Kumar, covering topics such as setting up a development environment, understanding the $scope and $rootscope objects, controllers, services, CRUD operations, and directives in AngularJS. It emphasizes coding practices and the creation of custom directives, with a focus on how data is managed across different scopes. Additionally, the document highlights an opportunity for attendees to trial products from Infragistics and encourages engagement via social media.
More Related Content
Similar to Step by Step - AngularJS
Step by Step - AngularJS
- 1. Step by Step- AngularJS Dhananjay Kumar @debug_mode http://debugmode.net
- 2. Agenda • Setting upVisual 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 yourexperience 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 DhananjayKumar 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 Businesslogic 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 ofAngularJS Controllers Scopes Services Directives Routing Module Views Data Binding Filters
- 7. Let us startwith writing some AngularJS code
- 8. $scope object view controllerTalkto each other using $scope
- 9. $scope object $scope servesas 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 istop 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 Controlleris 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 Eachcontroller 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 writecode to understand • Controller and $scope object • Controller Hierarchy • Nested Controller
- 14. Service in AngularJS Serviceorganize 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 writecode to understand • Services using service() method • Services using factory() method • Using $http service to perform AJAX operation • Perform CRUD operation
- 17. Directives in AngularJS Itattaches 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 builtin directives available Some of them are ng-show ,ng- app,ng-controller etc Directives in AngularJS
- 19. Custom Directives canbe 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 SharedScope 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.
- 23.
- 24. Let us writecode to understand • Create custom directive • Using different scopes • Using local scope properties in isolated scope
- 25.
- 26. Summary • Setting upVisual 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 canoffer 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.