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.
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
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 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:
Now, compile your application using following command:
ng serve -o
Now, we create a basic web application in Angular 10. So, let us start the Command Prompt in Windows 10 and run following commands:
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 following code:
save both files and see the application running in browser.
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.