AngularJS - Part 1
Download as PPTX, PDF0 likes351 views
AngularJS is a JavaScript framework for building single-page applications. It uses HTML as the template language and allows you to extend HTML vocabulary for your application. The main principles of AngularJS are templates, directives, models, scopes, expressions, compiler, filters, data binding and controllers. It follows MVC architecture with modules, controllers and views. $scope provides the connection between the controller and view. Routes are used to define navigation between views.
![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](https://image.slidesharecdn.com/angular-np-1-160308213504/85/AngularJS-Part-1-23-320.jpg)
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
- #2: AngularJs is structural framework for dynamic web app. Client side javascript framework for adding interactivity to HTML
- #6: DRY – don’t repeat yourself
- #10: 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.