AngularJs 1.X - Architecture, benefits and Why and how should we use it

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 :)