What is Single Page Application | Single Page Application Tutorial | Angular 2 Tutorial

What is Single Page Application | Single Page Application Tutorial | Angular 2 Tutorial

Hello Everyone, Welcome to Angular 2 tutorial video that talks about single page application (SPA) conducted by Acadgild.

Here are the topics covered in this tutorial:
• Evolution of the web
• Introduction to Frontend Frameworks
• What is Single Page Application (SPA)
• How Single Page Application Works
• Traditional websites
• Misconception about SPA
• What’s new in Single page application
• Benefits of Single page application
• History of Angular
• Problems with Angular 1.x
• Introduction to Angular 2
• Transpilers
• Tech supporting ng2
• Dev Environment setup
• Hello World Example

The glimpse of the above topics:
1. Evolution of the web:
1993-1997: Static HTML websites, Gifs, Minimal JavaScript and DHTML Scripts, Macromedia Flash – only CGI Scripts for backend
1995-2000: Dynamic Web pages are driven by backend PHP, JSP, Java & MySql, CSS being used for styling, Tables used for Layouts, JS for Minimal Scripting
2000-2008: Content Management Systems like Wordpress, Drupal, Joomla etc., HTML4, Initial Ajax, Canvas, Web Fonts
2009-2013: Rich Internet Application, Client Server Architecture, CSS3, Animations, Ajax, Offline Web Apps, Responsive Design, Mobile Web
2014-2015: Single Page Apps, Pure Front End MVC Frameworks

2. Introduction to Front-end Frameworks:
Today Front-end Application became more complex, with dozens of JS Files, plenty HTML files, Images and huge CSS files.
Front-end frameworks have following objectives:
- Modularity
- Built-in Features
- Common Libs
- Easier to maintain the code
- Faster Development – Time to market is very essential and reiterations are required too quickly
- Debugging is easier
- Code collaboration between multiple teams
- Shorter learning curve for new developers
- Supporting all concerns for single page apps

Popular Front-end Frameworks
- AngularJs
- ReactJs
- NockoutJs
- BackboneJs

What is Single Page Application?
• Single-Page Application (SPAs) are web apps that load single HTML page ad Dynamically update that page as the user interacts with the app
• A single-page application (SPA) is a web application or website that fits on a single web page with the goal of providing a more fluid user experience similar to desktop application

What’s new in Single page application?
• Responsive design (support multiple platforms)
• Load single page application
• More interactive
• Better user experience
• Use Ajax and HTML to create responsible web apps without constantly reloads
• Have the capability to perform DOM Manipulation
• Should be able to store navigation history for views
• Capacity to Manage to route for views and nested views
• Capability to perform Ajax – fetch data asynchronously from servers
• Implement templating for views
• Capability for dynamic Data Binding
• Organizing code into modules
• No Refresh or Page

Benefits of Single Page application:
• Faster interactions
• SPA works and feels more like an application than a web page
• It is easy to scale and it is easy to cache resources
• SPA can use caching and local storage effectively
• SPA is fast as most resources HTML + CSS + Scripts are only loaded once, throughout lifespan of application, only data is transmitted back and forth

Principles of Single Page Application:
• Render with JavaScript Library
• Use css3
• Performance matters
• Front-end and Back-end is decoupled

Introduction to Angular 2:
• Angular 1.5x is the latest stable release of Angular 1
• Angular 2 is a complete overhaul of an Angular framework with major core architectural changes to solve the problems of Angular 1 and align itself to the latest technology standards like Web Components.
• It supports ES6 at its core with Typescript
• Mobile first has been one of the core thoughts behind the framework
• Speed and Performance has been given special focus using the new change detection system in Angular 2
• Hierarchical Dependency Injection system
• New directives and components with improved lifecycle hooks

So go through the entire video to learn the introductions of single page application as well as Angular 2.

#singlepageapplication, #singlepageapplicationusingangularjs, #angular2tutorial, #AngularJs, #Introductiontoangular2, introductiontosinglepageapplication, #single, #page, #Application, #angular2, #AngularJs

For more updates on courses and tips follow us on: