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.

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

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.

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

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:

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

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

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

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

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET