Introduction to AngularJS
•Download as PPTX, PDF•
2 likes•371 views
1) The document introduces AngularJS, a framework for building single-page applications. It discusses why frameworks are needed for SPAs and highlights features of AngularJS like two-way data binding, directives, controllers, and routing. 2) The agenda covers AngularJS concepts like templates, directives, data binding, scopes, controllers, modules, filters, services, and routing. It also explains how an Angular app starts and how views interact with controllers. 3) Examples are provided to demonstrate two-way data binding, directives, controllers, and routing in AngularJS. Links are included for further learning on AngularJS tutorials and documentation.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to AngularJS
Similar to Introduction to AngularJS (20)
Recently uploaded
Recently uploaded (20)
Introduction to AngularJS
- 1. LEARNING & DEVELOPMENT Introduction to AngularJS Presented by: Shyjal Raazi
- 2. Agenda ● Need of framework in SPA ● What is angularJS ● Features of angular ● Angular concepts ● How an angular app starts ● Two way data binding ● Directives ● Controllers ● View - Controller interaction ● Modules ● Services ● Routing
- 3. Why a framework Things to consider for developing SPA DOM manipulation - how to manipulate view effectively History - What happens when pressing back button Routing - Readable urls Data binding - How to bind data from model to view View Loading - how to load view in html Hence use Frameworks
- 4. SPA framework in Javascript Implements client side mvc pattern No direct manipulation of DOM, less code, less complexity Supported by major browsers Large and fast growing open source community Help developers write more meaningful html
- 5. Features ● Dependency injection ● Two way data binding ● Declarative html approach ● Reusable components ● Routing ● Module based
- 6. Angular Concepts ● Templates ● Directive ● Expressions ● Data binding ● Scope ● Controllers ● Modules ● Filters ● Services ● Routing
- 7. How angular app starts
- 9. Directives Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) Directives tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. <body ng-app=”myapp”> <ng-view></ng-view> </body>
- 10. Controllers Provides logic to your app ng-controller directive specifies controller in html Don't modify dom from controller. so how we communicate with view? var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
- 11. View - Controller interaction $scope is an object that can be used to communicate between view and controller https://gist.github.com/shyjal/aa9a0e4b15029f7ea624
- 12. Modules Re usable container for different features of an app or app itself - controllers, services, filters, directives, etc. Modules can be loaded in any order No need of use require js like AMD’s as angular have dependency injection mechanism var myApp = angular.module('myApp',[ngRoute]);
- 13. Services View-Independent business logic should not be in controller it should be in service Controllers are view specific but services are app specific
- 14. Demos Angular tabs implementation : https://gist.github.com/shyjal/bc40f48fbd8293caca6e ng-repeat Example : https://gist.github.com/shyjal/f0ab059d4df553991ea2
- 15. Routing ngRoute (a module in angular package) / UI router ( Thirdparty ) Linking between pages, what should happen on back button, readable urls
Editor's Notes
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- Test is available in word document under 'Attention to Detail' notes. This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
- Test is available in word document under 'Attention to Detail' notes. This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
- Test is available in word document under 'Attention to Detail' notes. This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
- This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment. The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.