Angular js- 1.X

AngularJSPresented By:Nitin Giri

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

Scope of Improvement● Frontend needs a MVC framework

● Improve our page load timeHeader, footer common to all pages but still entire page is downloaded each time

● Reduce development effort &

● Server load

jQuery vs Angular

jQuery vs Angular cont ..

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

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

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

$scope explained!

Routing & ModulesRouting● 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

Services & DIServices● 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

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

Roadblocks

● Large no of HTTP requests

● Lazy loading of resources

● Angular does not support IE v8 and below

● SEO

Angular SEO

Thank you :)