Thursday, 17 November 2022

Angular #1 Installation

Why is it called Angular?

Because it's written between < >! Get it? (Okay, bad joke, but now you won’t forget it!)

Angular is a powerful framework built with TypeScript for developing client-side applications. It’s like a superhero for web developers—making code cleaner, reusable, and testable!

Angular Architecture (Frontend + Backend)

Frontend (UI)

This is what users see in their browsers! It includes:

HTML & CSS (Templates & Styles)
TypeScript (Super-powered JavaScript)
Angular (The magic framework!)

Backend (Data Processing)

This is where the data magic happens!

Data + API (Application Programming Interface)
Business Logic (The brain behind the app)

In short, Angular makes life easier!

Angular Versions: What’s the Deal?

The first version was AngularJS.
Later versions dropped the "JS" and are called Angular (Vx) (Latest: Angular 14.0).

AngularJS vs Angular – What’s Different?

Feature	AngularJS	Angular
Architecture	MVC Model	Components & Directives
Language	JavaScript	TypeScript
Mobile Friendly?	Nope	Yes!
Expression Syntax	`{{ }}`	`() []`
Dependency Injection	Not used	Hierarchical DI
Routing	`@routeProvider`	`@Route Configuration`
Code Structure	Messy 😵‍💫	Well-structured ✅

Let’s Build Our First Angular Project! 🚀

Step 1: Install Node.js

Go to nodejs.org
Download the latest stable version (Windows/Mac/Linux)
Install it like a pro! (Run as Administrator)
Check if it's installed by running:
```
node --version
```

Step 2: Install Angular CLI (Command Line Interface)

CLI is your best friend for Angular projects!

npm install -g @angular/cli

Check if it's installed:

ng version

Step 3: Create Your First Angular Project

Run this command:

ng new hello-universe

hello-universe is your project name! It will ask a few questions:

Would you like to add Angular routing? (Say ‘N’)
Which stylesheet format to use? (Choose CSS)
Then, it will take some time to set up all the files. Grab a coffee! ☕

Step 4: Install Visual Studio Code (VS Code)

Download it from Visual Studio Code
Install it as Administrator
Open your project by running:
```
cd hello-universe
code .
```

Now, your VS Code will open with your first Angular project! 🎉

Step 5: Run Your First Angular App! 🚀

Run this command inside your project folder:

ng serve

Wait for the magic words: Compiled Successfully!

Now, open your browser and go to:

localhost:4200



Great My friend, You have done it!

Boom! Your first Angular app is live! 🎉🎉🎉

🎯 What’s Next?

Learn about Components, Modules & Directives
Play around with Routing and Services
Build something cool & show off your Angular skills! 😎

Happy Coding! 🚀

AMET-SOLID