🌐 Angular & AngularJS Basics – A Complete Beginner’s Guide

Modern web development has evolved far beyond plain HTML, CSS, and JavaScript. Frameworks like Angular and React bring structure, modularity, and reusability to front-end applications.

This guide walks you through the core concepts of Angular, how it evolved from AngularJS, and how to get started building your first Angular project using the Angular CLI.

---

🧱 Understanding Angular Design Principles

In a traditional website:

• HTML defines structure and content
• CSS provides design and styling
• JavaScript handles behavior and logic

However, frameworks like Angular and React combine all three into a single component-based architecture — enabling you to build interactive, scalable, and maintainable applications.

💡 TypeScript, used in Angular, introduces classes and strong typing — features missing in traditional JavaScript.

---

⚙️ Node.js and StackBlitz Integration

Node.js

Node.js acts as a runtime environment that serves your Angular application locally during development.

StackBlitz (Online IDE)

You can open and edit any GitHub Angular project instantly using StackBlitz.

Example:
If your GitHub repo link is:

https://github.com/Write4Dinesh/MyAngularProjectsRepo/tree/master/MyFirstAngularProject

then open it in StackBlitz as:

https://stackblitz.com/github/Write4Dinesh/MyAngularProjectsRepo/tree/master/MyFirstAngularProject

👉 Visit stackblitz.com to experiment online — no setup required!

---

🔄 From AngularJS to Angular

Feature	AngularJS	Angular
Language	JavaScript	TypeScript
Complexity	High	Simplified syntax
Compilation	Interpreted	Transpiled to JavaScript
Architecture	MVC	Component-based

Angular is the modern, rewritten version of AngularJS — more powerful, modular, and TypeScript-based.

---

📦 Node Package Manager (NPM)

NPM (Node Package Manager) is used to install Angular and other dependencies.

When you install Node.js, NPM comes bundled with it.

Install Angular CLI

To install Angular CLI globally:

npm install @angular/cli@7 -g

Or install the latest version:

npm install @angular/cli@latest -g

The -g flag installs it globally, and --save ensures it’s added to your package configuration.

---

🧰 Useful Angular CLI Commands

📖 Full list of CLI commands: Angular CLI Generate Reference

Task	Command
Create a new project	ng new MyFirstAngularProject
Serve the project	ng serve
Run tests	ng test
Create a component	ng generate component Employee or ng g c Employee
Create a service	ng generate service Product

---

🚀 Creating and Running Your First Angular Project

Step 1: Create a New Project

C:\> ng new MyFirstAngularProject

Step 2: Run the Application

C:\> ng serve

Now open your browser and visit:

http://localhost:4200/

You’ll see your first Angular app running locally 🎉

---

🧪 Running Unit Tests

Angular uses Jasmine as its default test framework.

To execute tests, run:

C:\> ng test

This command looks inside the e2e folder for test cases.

---

🧭 Project Structure Overview

Typical Angular project structure:

src/
 ├── app/
 │    ├── app.component.ts
 │    ├── app.component.html
 │    └── app.module.ts
 ├── assets/
 ├── environments/
 ├── main.ts
 └── index.html

Notes:

• Files ending with .ts → TypeScript source files
• Files ending with .spec.ts → Test files
• Angular transpiles TypeScript to JavaScript since browsers understand only JavaScript.

---

🧩 Installing TypeScript

TypeScript provides strong typing and OOP features for Angular.

Install TypeScript Globally

npm install typescript@3 -g

Check Version

tsc -version

Example output:

Version 3.7.5

---

✍️ Writing and Running Your First TypeScript Program

Step 1: Create a TypeScript File

Save the following as MyFirstTypescriptFile.ts:

function myFunction() {
  if (true) {
    var a = 10;
    console.log(a);
  }
  console.log(a);
}

myFunction();

Step 2: Compile to JavaScript

tsc MyFirstTypescriptFile.ts

This creates MyFirstTypescriptFile.js.

Step 3: Run the JavaScript File

node MyFirstTypescriptFile.js

Output:

10
10

---

⚡ Combine Transpile + Execution with ts-node

Install ts-node globally to run TypeScript files directly without manual compilation:

npm install ts-node -g

Run the file directly:

ts-node MyFirstTypescriptFile.ts

Output:

10
10

---

🔢 TypeScript Data Types & Function Example

function myFunction(): number {
  let a: number = 10;
  let b: number = 20;
  return a + b;
}

console.log("Sum = " + myFunction());

The syntax for declaring variables is:
<variableName>: <dataType> = <value>

---

🧩 Modules, Components, and Services

Access Restriction

The export keyword in TypeScript provides access control at the module level, not the component level.

Best Practice

Always create one component per module to maintain separation of concerns.

Generating Components and Services via CLI

Task	Command
Generate a component	ng g c Employee
Generate a service	ng g s Product

---

🧠 Summary

Angular simplifies front-end development by combining HTML, CSS, and TypeScript into modular, reusable components.

With Node.js, NPM, and the Angular CLI, you can quickly scaffold, build, and deploy web applications efficiently.

Whether you’re migrating from AngularJS or starting fresh with Angular, mastering TypeScript, CLI commands, and component-driven architecture is the key to success.

---