Angular, the most widely used framework for creating SPA’s.
SPA in web terminology stands for "Single-Page Application".
Why Single-Page Apps?
While traditional web apps require consistent rendering of data from server leading to a page-reload for every app request, the spa’s however, avoid this performance issue by loading content on the browser using Javascript, so most of the work is done on client-side.
If you are wondering whether the app is really a single page then, the answer is yes! there is only one URL or in simple terms one html page as such,and everything is rendered on the same page, you can fill a form, click a link and do almost everything on that page.
How SPA Sites work ?
Our prime savior here is- AJAX. As spa’s heavily depend on AJAX calls to communicate with server, the server responds not with the markup-data but with json. This is how the presentation is separated from services making it more dynamic and responsive to users by reduced page-refreshes.
What frameworks does support SPA’s?
Well, thanks to these javascript frameworks we are able to build fully functional apps.
- Angular.
- Backbone.Js
- React.Js
- Knockout.Js
That’s not the end, there are many more.
Lets Jump onto Angular6
Angular is a Javascript framework to build more interactive web apps. It is designed for both Web, Desktop and Mobile platforms. While, we create apps using HTML, CSS and Javascript, Angular requires us to know Typescript (a typed superset of Javascript that scales), kind of stricter version of Javascript provided with OOPS features. Although, other alternative could be Dart, typescript is the most widely used language for Angular apps.
Note: Typescript is not ES6 or ES7. Browsers do not understand typescript , so the typescript code is transpiled to javascript first.
The Angular CLI:
> npm install -g @angular/cli
Wait until this command gets the angular CLI tool installed in your system. Now you can refer to the angular CLI using the ng command.
Let's create a project?
We want to create a new project, so angular provides us with the newkeyword. Change to the folder where you want to create the new project and type in the command
> ng new angular-app-name
> cd new angular-app-name
> ng serve
> ng serve
