AngularJS Fundamentals and TypeScript Basics

Course Outcomes

• Students will understand client-side JavaScript frameworks and the MVC design pattern.
• Students will understand single-page applications in AngularJS for typography.
• Students will apply concepts of functional front-end web applications using AngularJS.
• Students will analyze the implementation of web content using reusable components.
• Students will analyze routing and HTTP services implementation in full-stack development.

Unit I: Introduction

• Introduction to Angular, architecture, development environment, and the first Angular app.
• Structure of Angular projects.

Unit II: TypeScript Fundamentals

• Declaring variables, types, arrow functions, interfaces, classes, objects, and constructors.
• Access modifiers and access modifiers in constructor parameters, properties, and modules.

Unit III: Angular Fundamentals

• Building blocks of Angular apps, components, component generation using Angular CLI.
• Templates, directives, services, and dependency injection.

Unit IV: Displaying Data and Handling Events

• Property binding, attribute binding, bootstrap integration, class binding, style binding, and template variables.
• Two-way binding and pipes.

Unit V: Directives

• Commonly used Angular directives (ngIf, ngHidden, ngSwitchCase, ngFor, ngClass, ngStyle).

Unit VI: Building Reusable Components

• Component API, input properties, output properties, and passing event data.

Unit VII: Template-Driven Forms

• Building bootstrap forms, form types, ngModel, validation, form styling, and directives.
• Working with checkboxes, dropdowns, radio buttons, and disabling the submit button.

Unit VIII: Consuming HTTP Services

• Working with JSONPlaceholder, data retrieval, creation, update, and deletion.
• Error handling (bad request errors).
• Routing and navigation (configurations, routerOutlet, routerLink, routerLinkActive, and parameters).

Unit IX: Authentication and Authorization

• Authorization concepts, JSON web tokens (JWT), user login/logout implementation.
• Conditional element visibility based on user roles and redirection after login.

Unit X: Deployment

• Building applications with Angular CLI
• Deployment to GitHub pages and Firebase.

List of Practical Exercises

• Demonstrate Angular application creation
• Implement TypeScript fundamentals
• Implement fundamental Angular concepts
• Create new components using Angular CLI
• Implement Angular directives and bindings (class, event)
• Implement TypeScript concepts
• Implement reusable components
• Demonstrate template-driven forms/concepts
• Implement JSONPlaceholder/HTTP services
• Implement routing and navigation
• Implement authentication and authorization
• Show/hide elements based on authentication
• Deploy Angular applications.

Textbooks and References

• Learning AngularJS: A Guide to AngularJS Development by Ken Williamson (O'Reilly)
• AngularJS: Up and Running - Enhanced Productivity with Structured Web Apps by Brad Green, Shyam Seshadri (O'Reilly).

This quiz covers the fundamentals of AngularJS, including architecture, project structure, and core building blocks. Students will also explore TypeScript concepts such as variables, types, and classes essential for Angular development. Test your understanding of single-page applications and reusable components in this comprehensive assessment.