Angular Setup, Angular CLI, Workspace Structure, and Your First Application

What You Need Before Angular

Angular projects usually require Node.js, npm, and the Angular CLI. Even if students eventually work inside enterprise build systems, understanding the local development flow first is important.

npm install -g @angular/cli
ng new learning-angular-app
cd learning-angular-app
ng serve

What Angular CLI Does

The Angular CLI generates project structure, development configuration, build settings, test scaffolding, and common code templates. This reduces repetitive setup work and keeps teams aligned around one workflow.

• ng new creates a new Angular workspace
• ng serve starts a local development server
• ng generate scaffolds components, services, guards, and more
• ng build creates production-ready build output
• ng test runs unit tests

Understanding the Workspace Structure

src/
  app/
  assets/
  environments/
angular.json
package.json
tsconfig.json

The src/app folder is where most application features begin. The configuration files around it control compilation, TypeScript behavior, assets, builds, testing, and workspace rules.

How an Angular App Boots

At startup, Angular loads the root application configuration, renders the root component, and then composes the UI through nested components and routing. Students who understand this bootstrapping flow have a much easier time reasoning about where code belongs.

First Practical Example

// app.component.ts
export class AppComponent {
  title = 'Angular Learning Portal';
}

<!-- app.component.html -->
<h1>{{ title }}</h1>
<p>Welcome to Angular fundamentals.</p>

This example teaches property binding through interpolation, component templates, and the basic relationship between TypeScript class state and rendered HTML.