Getting Started with Angular at VAB

A comprehensive guide for new interns on setting up and understanding the Angular development environment

Part of Week 1 Onboarding

Prerequisites

Before starting with Angular at VAB, ensure you have:

Node.js
npm (comes with Node.js)
SourceTree for Git management
Visual Studio (Code)
TypeScript knowledge

Setting Up Your Development Environment

Follow these steps to set up your Angular development environment:

Install SourceTree

Download from sourcetreeapp.com

VAB uses SourceTree for Git management. It provides a user-friendly interface for Git operations.

Configure SourceTree

Add your Bitbucket/GitHub credentials

Set up your Git credentials in SourceTree and add the repository URL provided by your team lead.

Clone the Project

Use SourceTree's Clone option

In SourceTree: File > Clone/New > Paste repository URL > Choose local path > Clone

Install Angular CLI

npm install -g @angular/cli

This installs the Angular Command Line Interface globally on your machine.

Install Dependencies

npm install

Install all project dependencies listed in package.json.

Essential VSCode Extensions

Install these extensions for better development experience:

•

Angular Language Service

Provides intelligent code completion and error detection

•

ESLint

Ensures code quality and maintains consistent style

•

Angular Console

GUI for Angular CLI commands

Project Structure

Understanding the VAB project structure:

📁

src/app/features/

Contains feature modules and components

📁

src/app/shared/

Shared components, pipes, and directives

📁

src/app/core/

Core services and guards

Development Workflow

Follow these best practices when developing:

Create feature branches for new work
Follow Angular style guide
Implement proper error handling

Git Workflow with SourceTree

Follow these steps for version control:

Create Feature Branch

In SourceTree: Branch > New Branch > Name it following the convention: feature/your-feature-name

Make Changes

Work on your feature and stage changes using SourceTree's File Status view

Commit Changes

Write clear commit messages following the team's convention

Push Changes

Push your feature branch to remote using the Push button

Create Pull Request

Use Bitbucket/GitHub to create a pull request for code review