Why AngularJs
•Download as PPTX, PDF•
0 likes•186 views
This document discusses the differences between conventional web development and single-page application (SPA) development using AngularJS. In conventional web development, each user interaction requires a full page reload and server processing. This results in poor response times and performance issues. AngularJS helps create SPAs where the client-side handles routing and rendering dynamically without full page reloads. This improves responsiveness and reduces server loads. The document explains benefits of the SPA approach like client-side routing, rendering and supporting multiple platforms. It also outlines why AngularJS is well-suited for SPA development with features like directives, filters and testability.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Why AngularJs
Similar to Why AngularJs (20)
Recently uploaded
Recently uploaded (20)
Why AngularJs
- 1. "Teaching browsers new tricks" Introduction to AngularJs Directives By : Imal hasaranga
- 2. “Conventional web development will start dying dramatically in coming years” By : Imal hasaranga
- 3. What is Conventional Web Dev... <!DOCTYPE html> <html> <head>...</head> <body> <form method="POST" action="/userlogin" > <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit" value="login" /> </form> </body> </html> /userlogin Server Controller DB View Model <!DOCTYPE html> <html> <head>...</head> <body> <h1>Welcome : Imal</h1> </body> </html> <!DOCTYPE html> <html> <head>...</head> <body> <h1>Welcome : <%=username %></h1> </body> </html>
- 5. Does Loading time matters ? • A survey revealed that loading time is major contributing factor to page abandonment • Page load time is greater than 3 seconds, 20% of visitors will abandon the page • Wallmart found that every 100ms reduction in loading time leads to an increase in incremental revenue by as much a 1%
- 6. SPA <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div class="content"> <!--- Dynamically filling ---> </div> </body> <script src="bower/angular/angular.js"></script> <script src="bower/angular-route/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> </html> <form method="POST" action="/userlogin" > <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit" value="login" /> </form> <h1>Welcome : {{username}}</h1> /login /loginSuccess <div>Another HTML Content</div> /anotherUrl
- 7. Benefits of SPA • Client Side Routing. • Client Side Rendering. • More responsive than normal web apps. • Because Most of the things happen in client side server load reduces. • SPA forces developers to create REST api so UI become just another client. • Perfect for supporting multiple platforms. Clients is more fatter and intelligent than before
- 9. Why AngularJS ? • AngularJs built specifically focusing SPA Development. • Provide Client side MVC architecture. • Custom elements with directives. • Allows us to write less and manageable code. • Flexibility with filters. • Forces developers to do right things at right places. • Unit testing ready.
- 10. Can you show us something working please?