AngularJS is a framework that improves on existing architectures by providing MVC structure, two-way data binding, and directives to add functionality and abstract away DOM manipulation. It aims to improve front-end development by reducing page load times and development effort. Key features include templating with expressions, routing, modules to organize code, services for sharing data and functionality, and dependency injection. While powerful, it faces some challenges around performance for older browsers and search engine optimization that require strategies like lazy loading and SEO-focused rendering.

1. AngularJS
Presented By:
Nitin Giri

2. Architecture Most followed (ex)
MVC framework (Symfony) + templating engine (Smarty) + jQuery
Symfony
● Separates the data model and business logic from the application code
Smarty
● Separates the presentation from the application code
jQuery
● Makes things like DOM traversal and manipulation, event handling,
animation, and Ajax simpler with multiple browser support

3. Scope of Improvement
● Frontend needs a MVC framework
● Improve our page load time
Header, footer common to all pages but still entire page is downloaded each
time
● Reduce development effort &
● Server load

4. jQuery vs Angular

5. jQuery vs Angular cont ..

6. Why use Angular?
MVC
● Well structured code
● Maintainable, easy debugging & testing
Two-way data binding
● Approach to synchronize the data between model and view
● Binding is two way which means that any change in the model will update
the view and vice versa

7. Templating
Expressions
● Allows you to insert dynamic values into your HTML
Directives
● Extends HTML by adding custom elements and attributes
● Adds functionality to our markup
● Makes our web app more informative
● Abstracts away DOM manipulation logic
● Eg, ng-repeat directive

8. Two way data binding
➢ Approach to synchronize the data between model and view
➢ Binding is two way which means that any change in the model will update
the view and vice versa
➢ Bind the variable using $scope and angular handles the rest
What is $scope?
➢ Service provided by angular for communication between the controller and
the view
➢ A controller can add data and function in its scope and then they will be
accessible in the view

9. $scope explained!

10. Routing & Modules
Routing
● Angular team provides an extra, angular-route.js that contains $route
service to write configurations for routing
● Switch between views
● Downloading only that portion of html that actually changes
Modules
● Keeps our global namespace clean
● Easy to share code between applications

11. Services & DI
Services
● Singleton objects that are instantiated only once per app
● Lifetime entire application
● Allows us to share data and functionality between controllers
● Eg, $http service
Dependency Injection
● No need of including the code of service and creating an instance of that
service
● Instead pass dependency as a parameter and angular handles the rest

12. Some more features …
Filters
● Provides a way to format the data displayed to the user
● Some built in filters:- lowercase, uppercase, limitTo …
Write very less code!
Support for form validation

13. Roadblocks
● Large no of HTTP requests
● Lazy loading of resources
● Angular does not support IE v8 and below
● SEO

14. Angular SEO

15. Thank you :)