What is Angular

Angular is a TypeScript-based free and open-source web application framework. The Angular Team at Google and a community of individuals and corporations lead Angular. It is a complete rewrite from the same team that built AngularJS.

Difference between Angular and AngularJS

Well technically speaking Angular and AngularJS have no concepts in common. AngularJS did not leverage TypeScript and the only way to make it work with TypeScript was to introduce some breaking changes in the framework or to rewrite the framework from scratch. And Angular team took the latter approach.

Why Angular is Important

1. Angular is capable of delivering great web apps with high web page performance.

2. It has a maintainable code base which is quite good.

3. Type safety helps you catch all the bugs in advance. I mean who wouldn't want that?

4. You will also find the interface in Angular quite handy when building your own complex apps.

5. Even all other framework is boarding on the Typescript train as it's a clear way to build complex and maintainable web apps.

6. But Angular has a slight edge over that framework because it supports Typescript since its Inception.

Angular Basics

To demystify Angular, you must have some hands-on experience. So we will build a simple counter app with Angular

First, you will require

✅ VS Code

✅ Node JS

Node is commonly used to write server-side JavaScript but the feature we are going to use for our frontend application is npm which is a node package manager which helps developers manage external libraries or packages more dependably. So, after downloading and installing this two software let's check if both are working correctly node -v returns node version npm -v returns node package manager version

Install Angular

1. Install Angular globally (system-wide)  npm install -g @angular/cli

2. Create a new Angular project ng new counter-app

3. Next, It will ask you a few options

4. Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? : Select Yes (Y) This option ensures you write more type-safe code.

5. Would you like to add Angular routing? : Select Yes(Y) Creates a routing file that helps in configuring routes of your application.

6. Which stylesheet format would you like to use? : SCSS At Oxvsys we love the .scss CSS preprocessor you can choose whatever you like.



Note it may take a few minutes for you your computer to complete the ng new command depending on your computer configuration

Once all files are generated you can cd counter-app and then open the project in code . (Visual Studio Code) here . which means opening VS Code in the current directory

Inside VS Code find a terminal and start your local Angular server by npm start or ng serve both commands will work in this case

After the server is started visit http://localhost:4200 you will see the default Angular screen

Voila! You are now an Angular developer 😎 Well not so soon, it's a long journey. You still need to learn about components, routing, services, forms, state management, and much more but you have taken the first steps in the right direction.

Stay tuned for the second part where we will build our own counter app. Happy Automation ✌