Acrosys Technologies

Angular Front-End Developer Course

Duration: 4 Months / 16 Weeks
Level: Beginner to Job-Ready
Technology Stack: HTML, CSS, Bootstrap, JavaScript, TypeScript, Angular, RxJS, REST API, Git, GitHub and Deployment

Month 1: Web Development, JavaScript and TypeScript

Introduction to web development
Frontend and backend concepts
Client-server architecture
HTTP and HTTPS fundamentals
HTML document structure
Headings, paragraphs and text formatting
Links and navigation
Images and multimedia
Lists and tables
HTML forms
Input controls
Semantic HTML
CSS selectors
Colors, fonts and backgrounds
Box model
Margin and padding
Flexbox
CSS Grid
Responsive web design

Practical: Build a responsive personal portfolio website.

Introduction to Bootstrap
Bootstrap containers
Grid system
Responsive breakpoints
Buttons and cards
Navbar and navigation
Forms and validation
Modals and alerts
JavaScript introduction
Variables
Data types
Operators
Conditional statements
Loops
Functions
Arrays
Objects
String methods
Array methods

Mini-project: Responsive business landing page with JavaScript interactions.

DOM introduction
Selecting HTML elements
DOM manipulation
Event handling
Event bubbling
Form validation
LocalStorage
SessionStorage
JSON
JavaScript modules
Arrow functions
Destructuring
Spread and rest operators
Promises
Async and await
Fetch API
REST API basics
Error handling

Mini-project: JavaScript employee management application.

Introduction to TypeScript
TypeScript installation
Type annotations
Primitive data types
Arrays and tuples
Enums
Functions
Optional parameters
Interfaces
Type aliases
Classes and objects
Constructors
Inheritance
Access modifiers
Abstract classes
Generics
Union and intersection types
Modules

Mini-project: TypeScript-based student management application.

Month 2: Angular Fundamentals

Introduction to Angular
Angular architecture
Angular CLI
Node.js and npm
Creating Angular projects
Angular project structure
Components
Templates
Interpolation
Property binding
Event binding
Two-way data binding
Directives
ngIf
ngFor
ngClass
ngStyle

Practical: Create a multi-section Angular website.

Component architecture
Creating reusable components
Parent and child components
Input properties
Output properties
EventEmitter
Component lifecycle
ngOnInit
ngOnDestroy
Angular services
Dependency injection
Creating custom services
Angular routing
Router configuration
RouterLink
Route parameters
Query parameters
Navigation

Mini-project: Angular course management website with multiple pages.

Angular forms introduction
Template-driven forms
Reactive forms
FormGroup
FormControl
FormBuilder
Validators
Custom validation
Required validation
Email validation
Password validation
Form submission
Validation messages
Dynamic form controls
Form reset
Handling form errors

Practical: Student registration and admission form.

Angular pipes
Built-in pipes
Custom pipes
Dependency injection
Services architecture
ViewChild
ContentChild
Template references
Angular lifecycle hooks
Reusable UI components
Dynamic components
Standalone components
Angular configuration
Environment files
Application structure
Code organization

Mini-project: Angular admin dashboard interface.

Month 3: Angular API Integration and Advanced Concepts

Introduction to REST APIs
HTTP methods
GET requests
POST requests
PUT requests
PATCH requests
DELETE requests
Angular HttpClient
HttpClientModule concepts
HTTP services
Request headers
Query parameters
Request body
JSON responses
API error handling
Loading indicators

Mini-project: Product management application connected to REST API.

Introduction to RxJS
Observables
Observers
Subscriptions
Subjects
BehaviorSubject
Operators
map
filter
tap
switchMap
mergeMap
catchError
debounceTime
combineLatest
Async pipe
Observable error handling

Project: Live search and filtering application using RxJS.

Authentication concepts
Login and registration
Connecting authentication API
JWT authentication
Token handling
LocalStorage considerations
HTTP interceptors
Adding authorization headers
Route guards
CanActivate
CanDeactivate
Role-based access
Protected routes
Logout
Token expiration
Unauthorized response handling

Mini-project: Secure Angular login and role-based dashboard.

Introduction to Angular Material
Material buttons
Cards
Toolbar
Navigation menu
Dialogs
Tables
Pagination
Sort functionality
Autocomplete
Date picker
Form controls
Responsive layouts
Dashboard design
Reusable UI components

Mini-project: Professional Angular admin dashboard.

Month 4: Advanced Angular, Testing and Deployment

Angular application architecture
Feature-based folder structure
Shared modules and components
Reusable services
Lazy loading
Standalone components
Route-level code splitting
Dynamic routing
State management concepts
Signals fundamentals
Performance optimization
Change detection concepts
TrackBy optimization
Production configuration

Project: Scalable Angular business management application.

Angular testing fundamentals
Unit testing concepts
Jasmine fundamentals
Karma fundamentals
Testing components
Testing services
Testing forms
Testing HTTP requests
Mocking services
Debugging Angular applications
Browser developer tools
Angular DevTools
Error handling
Performance debugging

Practical: Write unit tests for an Angular CRUD application.

Git fundamentals
GitHub repositories
Creating branches
Commit and push
Pull requests
Merging branches
Merge conflict resolution
Team development workflow
Angular production build
Environment configuration
Deployment preparation
Hosting Angular applications
Domain configuration
SSL concepts
Application optimization

Practical: Publish an Angular application to a production hosting environment.

Students will create a complete professional Angular application containing:

Responsive Angular front end
TypeScript application architecture
Reusable components
Angular routing
Reactive forms
REST API integration
CRUD operations
Authentication
JWT integration
Route guards
Role-based navigation
Search and filtering
Pagination
Dashboard
Reports
API error handling
Form validation
GitHub repository
Production deployment

Suggested Final Projects

Hospital Management System
Student Management System
Employee Management System
Computer Service Centre Management System
Sales and Inventory Management System
Customer Relationship Management System
E-Commerce Application
Online Appointment System
Learning Management System
Job Portal

Assessment Structure

Assessment	Weightage
Weekly practical assignments	15%
JavaScript and TypeScript project	10%
Angular fundamentals project	10%
Angular forms and CRUD project	15%
API and authentication project	15%
Final Angular project	30%
Attendance and presentation	5%