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
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! 🚀