Angular

Creating Single Page Applications with Angular

updated on

Programmingempire

This article is an introduction to Creating Single Page Applications with Angular. Basically, it is useful for beginners who want to start creating applications in Angular. Here I will discuss the basics of Angular and its versions. Then I will create a simple application that runs on the browser. You will find more details on creating applications with Angular in future posts.

What is Angular?

Angular refers to a Framework that lets you create single-page web applications. Like other platforms and frameworks for building web applications, Angular applications also make use of HTML and CSS. As far as the programming language is concerned, we use TypeScript in Angular application for creating functionality.

Installing Angular

In order to install Angular, first, you need to install Node.js and npm (Node Package Manager). Then, you can install the Angular CLI (Command Line Interface). Hence, install Node.js first from here. Now Install Angular CLI with the following command:

npm install -g @angular/cli

What is Angular CLI?

We use Angular CLI for working with Angular projects. Basically, it provides us various commands for creating a project, creating components, creating modules, and so on. As the Angular is a front-end technology, so we don’t need node.js for any other purpose in Angular except for running the CLI.

Angular vs. Angular JS

AngularJs was first released in the year 2010 whereas Angular was released first in the year 2016. In fact, both AngularJs and Angular have different architecture. JavaScript is the language of AngularJs. While Angular is written in TypeScript. It is important to note that Angular contains many extra features such as lambda functions which were not there in AngularJs. Also, Angular supports Modules that help in creating applications efficiently.

We can say that Angular being the newer framework is better in many ways especially when you are working with newer browsers. However, since its first release, there are many versions of Angular, which I discuss next.

Different Versions of Angular

Angular 2 was the next version of AngularJs, that came in 2016. Then, in 2017, Angular 4 was released and subsequent versions of Angular, namely Angular 5, Angular 6, Angular 7, Angular 8, Angular 9, and Angular 10 are released nearly every 6 months. Accordingly, Angular 10 is the latest version which came in June 2020.

Creating Single Page Applications with Angular 10

Now let us create a simple application in Angular 10. For creating a new application, start the command prompt and run following command:

ng new <application-name> --skip-install=true

You will see that a folder with the application-name is created. Now, move to that folder and run the following command:

npm install

Now, compile your application using the following command:

ng serve -o

Example:

Now, we create a basic web application in Angular 10. So, let us start the Command Prompt in Windows 10 and run the following commands:

Create a New Application in Angular

When the Angular project is successfully created, you will notice that a folder with the name of the project also gets created.

Angular Project Created
Angular Project Created

Now, move to the folder MyWebApplication and run npm install command as shown below:

Downloading Dependencies using npm install command
Downloading Dependencies using npm install command

Once the npm install finishes downloading dependencies in the node_modules folder, you can run the ng serve command. Basically, ng serve command launches the server and you will get the default web page. Also, as you make any changes in the project files, ng serve also rebuilds the project.

Compiling the Angular Project
Compiling the Angular Project

Now, you will get your application running in the browser.

Angular Application Running on Port 4200
Angular Application Running on Port 4200

Now, open the project folder in any editor. For instance, I will open it in Atom and browse the app folder inside the src folder as shown below:

Angular Project Structure
Angular Project Structure

Open the file, app.component.html, and remove everything. Now, write the following code.

app.component.html
app.component.html

Also, open the stylesheets file, app.component.css, and write the following code:

app.component.css
app.component.css

save both files and see the application running in the browser.

A Basic Angular 10 Application
A Basic Angular 10 Application

Summary

In this article, I have discussed Angular and its different versions and created a basic application in Angular 10. In the next post I will discuss Components in Angular.

Further Reading

Creating Single Page Applications with Angular

Angular 10 Data Binding in Different Ways

Creating Some Angular Components

Basic Programs in Angular

programmingempire

You may also like...
Angular

How to Create an Angular App?
Angular

Creating Some Angular Components
Angular

Angular 10 Data Binding in Different Ways