Download to read offline
![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/75/AngularJS-Part-1-23-2048.jpg)
Uploaded byNishikant Taksande
AngularJS - Part 1
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.
AngularJS - Part 1
- 1.
- 5. The Principles Boilerplate D.R.Y. StructureTestability Source: google I/O
- 6. DatabaseRAM <div> <span> <ul> <li > <li > <li> Where doesit fits in? Source: google I/O
- 7. How it works? AngularJSwill initialize when DOM content is loaded ng-app
- 8. Conceptual Overview TEMPLATE DIRECTIVES MODEL SCOPE EXPRESSIONS COMPILER VIEWFILTER DATA BINDING CONTROLLER MODULE SERVICE
- 9.
- 10. What are directives? They teach HTML new trick!
- 11.
- 12.
- 13.
- 14. RAM {{ databinding }} Logic <div> <span><ul> <li > <li > <li>
- 15. Manages Notifies Observes Logic / Controller (JSClasses) 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 andScope
- 18. View, Controller andScope… $scope $scope is the glue between a controller and a view
- 19. View, Controller andScope… $scope injected dynamically
- 20. Module, Routes andFactories
- 21.
- 22. Module and container <htmlng-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 inModule Creating Module Creating Controller
- 25.
- 26.
- 27.
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.