Date post: | 07-Feb-2017 |
Category: |
Technology |
Upload: | nitin-giri |
View: | 40 times |
Download: | 0 times |
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 :)