Download to read offline
![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!'; }]);](https://image.slidesharecdn.com/angular-150612115617-lva1-app6891/75/Introduction-to-AngularJS-10-2048.jpg)
![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]);](https://image.slidesharecdn.com/angular-150612115617-lva1-app6891/75/Introduction-to-AngularJS-12-2048.jpg)
Uploaded byShyjal Raazi
Introduction to AngularJS
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.
Introduction to AngularJS
- 1. LEARNING & DEVELOPMENT Introductionto AngularJS Presented by: Shyjal Raazi
- 2. Agenda ● Need offramework 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 Thingsto 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 inJavascript 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 appstarts
- 8.
- 9. Directives Directives are markerson 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 toyour 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 - Controllerinteraction $scope is an object that can be used to communicate between view and controller https://gist.github.com/shyjal/aa9a0e4b15029f7ea624
- 12. Modules Re usable containerfor 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 logicshould 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 modulein angular package) / UI router ( Thirdparty ) Linking between pages, what should happen on back button, readable urls
- 16.
Editor's Notes
- #4 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.
- #5 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.
- #6 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.
- #7 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.
- #8 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.
- #9 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.
- #10 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.
- #11 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.
- #12 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.
- #13 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.
- #14 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.
- #15 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.
- #16 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.
- #17 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.