Downloaded 20 times
Uploaded byAmit Thakkar
A different thought AngularJS
The document discusses why JavaScript frameworks are needed and provides an overview of AngularJS. It notes that JS frameworks help with form validation, DOM manipulation, templating, and AJAX calls. AngularJS is highlighted because it was developed by Google, is actively maintained, implements MVW and other design patterns, and features two-way data binding. The document concludes with a basic "Hello World" AngularJS program to demonstrate binding an input to real-time text output.
A different thought AngularJS
- 1.
- 2.
- 3. Agenda ★ Why weneed JS Framework?
- 4. Agenda ★ Why weneed JS Framework? ★ Why AngularJS?
- 5. Agenda ★ Why weneed JS Framework? ★ Why AngularJS? ★ Hello World Program
- 6. About Me Amit Thakkar TechBlogger @ CodeChutney.in JavaScript Lover Working on MEAN Stack Twitter: @amit_thakkar01 LinkedIn: linkedin.com/in/amitthakkar01 Facebook: facebook.com/amit.thakkar01
- 7. Why we needJS Framework?
- 8. Why we needJS Framework? ★ validating form?
- 9. Why we needJS Framework? ★ validating form? ★ dom manipulation?
- 10. Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating?
- 11. Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating? ★ repeating/conditional view
- 12. Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating? ★ repeating/conditional view ★ play with ajax?
- 13. Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating? ★ repeating/conditional view ★ play with ajax?
- 14. Why we needJS Framework?
- 15. Why we needJS Framework?
- 16. Why we needJS Framework? 1. Server is processing JSP with Data for each request.
- 17. Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML.
- 18. Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML. 3. Render/Serve HTML.
- 19. Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML. 3. Render/Serve HTML. 4. Size of render HTML is approx. 100 multiple of Data.
- 20. Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML. 3. Render/Serve HTML. 4. Size of render HTML is approx. 100 multiple of Data. 5. Its client not dependent.
- 21. Why we needJS Framework? We have removed the View from MVC
- 22. Why we needJS Framework? We have removed the View from MVC
- 23.
- 24. Why AngularJS? 1. Developedby Google.
- 25. Why AngularJS? 1. Developedby Google. 2. Actively development happening.
- 26. Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g.
- 27. Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW
- 28. Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW b. Singleton
- 29. Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW b. Singleton c. Dependency Injection
- 30. Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW b. Singleton c. Dependency Injection 4. 2-way data-binding.
- 31. Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
- 33. Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
- 34. Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
- 35. Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
- 36. Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
- 37.