AngularJS - Part 1
•Download as PPTX, PDF•
0 likes•349 views
Angular JS presentation during training session at NetPay Merchant Services, Southampton, UK.
Recommended
More Related Content
Similar to AngularJS - Part 1
Similar to AngularJS - Part 1 (20)
More from Nishikant Taksande
More from Nishikant Taksande (7)
Recently uploaded
Recently uploaded (20)
AngularJS - Part 1
- 1. gAngularJS By Nishikant Taksande NetPay Merchant Services
- 5. The Principles Boilerplate D.R.Y. Structure Testability Source: google I/O
- 6. DatabaseRAM <div> <span> <ul> <li > <li > <li> Where does it fits in? Source: google I/O
- 7. How it works? AngularJS will initialize when DOM content is loaded ng-app
- 8. Conceptual Overview TEMPLATE DIRECTIVES MODEL SCOPE EXPRESSIONS COMPILER VIEW FILTER DATA BINDING CONTROLLER MODULE SERVICE
- 9. Kick Start
- 10. What are directives ? They teach HTML new trick!
- 13. Using Filters
- 14. RAM {{ databinding }} Logic <div> <span> <ul> <li > <li > <li>
- 15. Manages Notifies Observes Logic / Controller (JS Classes) UI / View (DOM) RAM Data / Model <div> <span> <ul> <li> Structure
- 16. Model View var firstName = “john” <h1>john</h1> controller, viewModel MVC
- 17. View, Controller and Scope
- 18. View, Controller and Scope… $scope $scope is the glue between a controller and a view
- 19. View, Controller and Scope… $scope injected dynamically
- 20. Module, Routes and Factories
- 21. $scope
- 22. Module and container <html ng-app="sampleApp">
- 23. Creating Module var sampleApp = angular.module('sampleApp', []); What it is for? This is where dependency injection comes in var sampleApp = angular.module('sampleApp', [‘helperApp’]); sampleApp depends on helperApp module
- 24. Creating Controller in Module Creating Module Creating Controller
- 27. AngularJS
Editor's Notes
- AngularJs is structural framework for dynamic web app. Client side javascript framework for adding interactivity to HTML
- DRY – don’t repeat yourself
- Template – Html with additional markup Model – Data shown to user and with which user interact Directive – extends html with custom element and attributes Scope – context where the model is stored so that controllers, directives, and expressions can access it. Expressions – access variables and functions from the scope. Compiler – parses the template and instantiate directives and expressions Filter – Format the value of and expressions for display to user. View – What user sees (DOM) Data Binding – Sync data between the model and the view. Controller – the business logic behind views Module – Container for different part of and app, including controllers, service, filter, directive, which configures the injector. Service – reusable business logic independent of views.