What is Angular?
Angular is a Javascript framework that allows us to mainly create single-page applications (SPA). This open-source framework was initially released in 2010 and was named AngularJs. It is mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The main benefit was that it let you turn HTML-based documents into dynamic content.
With some drawbacks in the first version of angularjs a complete rewrite of the code was required and it was rewritten with typescript.
Versions
- AngularJs - The official branding guidelines state that “AngularJS” is a term reserved for AngularJS 1.x, that is, the early versions of “Angular”. It was initially released in 2010 and used Javascript as the primary language. This version is on Long Term Support (LTS) and will not get any support from developers after December 31, 2021, and hence the Angular team recommends using the next versions.
- Angular - The new version of Angular used TypeScript (instead of JavaScript) as the primary language, the ‘JS’ was dropped, leaving us with just Angular to avoid confusion with the versions. So after the major changes, the coming versions are said to be Angular with a new major-release upgrade slated for every 6 months.
Prerequisites
Before getting into Angular you should be familiar with the following technology:-
HTML
CSS
Javascript
Typescript
Getting Started 🚀
We need to install some of the tools to get started:
- Nodejs and npm
To get started with Angular, we need to have Node.js installed. You can refer to 👉 Nodejs website and preferably download the LTS version for your operating system.
npm is installed as a part of Node.js and does not require to be downloaded separately.
After installing you can check node and npm is correctly installed on your system by using the following commands in cmd or terminal.
node --version
npm --version
If it shows node version above 14 and npm version above 6 you are ready to go.
- Angular CLI
Angular provides a utility to allow users to create and manage projects from the command line. It is fast and the recommended way to start your angular project. It will help create and maintain common patterns across our application. To work with it on our system we need to install the Angular CLI by running the command:
npm install -g @angular/cli
If you are on Mac or Linux use sudo before npm to give permission.
To test you can try the following command to get a similar output stating successful installation of Angular CLI.
ng --version
Now you are ready to create your first Angular project
Creating First Project
To create a new Angular project you can open your command line and run the following command :
ng new first-project
replace first-project with your desired name for the project.
This will init project creation and will ask you a couple of questions. You can press enter and leave things default. It downloads all the node packages required to begin which might take more than 5-10 minutes based on your bandwidth.
After all the packages are installed you need to go to the newly created folder using the command:
cd first-project
Now it's time to start your server:
ng serve
After a successful compilation, you can see the output of your project in the browser on port 4200.👇
You will land on the default page of Angular
You can stop the server by pressing 👉 ctrl + c in the command line.
Hurrah! 🥳🥳 If you made up to here by taking the first step.
If you get into any issue feel free to comment.
I Will be posting more content on Angular so stay tuned.😊