Download to read offline
Uploaded byImal hasaranga
Why AngularJs
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.
Why AngularJs
- 1. "Teaching browsers newtricks" Introduction to AngularJs Directives By : Imal hasaranga
- 2. “Conventional web development willstart dying dramatically in coming years” By : Imal hasaranga
- 3. What is ConventionalWeb 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>
- 4.
- 5. Does Loading timematters ? • 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
- 8.
- 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 showus something working please?