Angular-CUST1052
angular-cust1052
Syllabus
Faculty: MR.MANOJ PADHI
Course Objective:
Module 1: Introduction to Angular and TypeScript Basics (10 hours)
Theory
Overview of Angular framework; Setting up the development environment (Node.js, Angular
CLI); Creating a new Angular project with Angular CLI; Introduction to TypeScript; TypeScript
features and syntax; Variables, types, and functions; Classes and interfaces; TypeScript in
Angular.
Practice
Theory
Components, templates, and modules; Component lifecycle hooks; Creating and using Angular
modules; Angular application structure and best practices.
Practice
Theory
Property binding and event binding; Two-way data binding with ngModel; Built-in directives
(ngIf, ngFor, ngClass, ngStyle); Custom directives.
Practice
Module 4: Component Communication (15 hours)
Theory
Input and output decorators; Event emitters; Parent-child component communication; ViewChild
and ContentChild decorators.
Practice
Theory: Creating and using services; Dependency injection in Angular; Hierarchical
injectors; Managing application-wide services; Introduction to Angular HttpClient;
Performing GET,POST,PUT,DELETE requests
Practice
Theory: Configuring routes; RouterLink and router-outlet; Route guards and lazy loading; Child
routes and nested routing.
Practice
Theory
Introduction to RxJS; Using observables with Angular HttpClient; Introduction to testing in
Angular; Deployment options(FireBase,AWS).
Practice
Course Objective:
- Master the fundamentals and advanced concepts of Angular.
- Develop and optimize complex Angular applications.
- Implement best practices and deploy Angular applications.
| COs | Course outcomes |
| CO1 | Understand the core concepts and architecture of Angular applications. (Understand, Remember) |
| CO2 | Develop Angular applications using TypeScript and advanced Angular features. (Apply, Create) |
| CO3 | Implement data binding, directives, and component communication in Angular. (Apply, Analyze) |
| CO4 | Utilize Angular services, dependency injection, and HTTP client for dynamic applications. (Apply, Evaluate) |
| CO5 | Optimize, test, and deploy Angular applications following best practices. (Apply, Create) |
Course Content
Module 1: Introduction to Angular and TypeScript Basics (10 hours)
Theory
Overview of Angular framework; Setting up the development environment (Node.js, Angular
CLI); Creating a new Angular project with Angular CLI; Introduction to TypeScript; TypeScript
features and syntax; Variables, types, and functions; Classes and interfaces; TypeScript in
Angular.
Practice
- Experiment 1.1: Install Node.js and Angular CLI.
- Experiment 1.2: Create a new Angular project using Angular CLI.
- Experiment 1.3: Explore the Angular project structure.
- Experiment 1.4: Configure the Angular development environment.
- Experiment 1.5: Implement a simple Angular application.
- Experiment 1.6: Conduct a seminar on the evolution of Angular.
- Experiment 1.7: Present case studies of successful Angular applications.
- Experiment 1.8: Install and set up TypeScript.
- Experiment 1.9: Implement basic TypeScript syntax (variables, types, functions).
- Experiment 1.10: Create and use classes and interfaces in TypeScript.
Theory
Components, templates, and modules; Component lifecycle hooks; Creating and using Angular
modules; Angular application structure and best practices.
Practice
- Experiment 2.1: Create and use Angular components.
- Experiment 2.2: Implement component lifecycle hooks.
- Experiment 2.3: Create and manage Angular modules.
- Experiment 2.4: Structure an Angular application following best practices.
- Experiment 2.5: Document and present the Angular component lifecycle.
- Experiment 2.6: Compare different approaches to structuring Angular applications.
- Experiment 2.7: Conduct a seminar on Angular architecture.
- Experiment 2.8: Implement a modular Angular application.
- Experiment 2.9: Present case studies of Angular application architectures.
- Experiment 2.10: Research and present advanced Angular architectural patterns.
Theory
Property binding and event binding; Two-way data binding with ngModel; Built-in directives
(ngIf, ngFor, ngClass, ngStyle); Custom directives.
Practice
- Experiment 3.1: Implement property binding in an Angular application.
- Experiment 3.2: Use event binding to handle user interactions.
- Experiment 3.3: Implement two-way data binding with ngModel.
- Experiment 3.4: Use built-in directives (ngIf, ngFor, ngClass, ngStyle).
- Experiment 3.5: Create and use custom directives.
- Experiment 3.6: and present the use of data binding in Angular.
- Experiment 3.7: Compare different data binding techniques.
- Experiment 3.8: Conduct a seminar on Angular directives.
- Experiment 3.9: Implement a directive-based project.
- Experiment 3.10: Present case studies of data binding and directives in Angular
Module 4: Component Communication (15 hours)
Theory
Input and output decorators; Event emitters; Parent-child component communication; ViewChild
and ContentChild decorators.
Practice
- Experiment 4.1: Implement component communication using input and output decorators.
- Experiment 4.2: Use event emitters for component interaction.
- Experiment 4.3: Implement parent-child communication in Angular.
- Experiment 4.4: Use ViewChild and ContentChild decorators.
- Experiment 4.5: Document and present component communication techniques.
- Experiment 4.6: Compare different approaches to component communication.
- Experiment 4.7: Conduct a seminar on advanced component communication.
- Experiment 4.8: Implement a project involving complex component interaction.
- Experiment 4.9: Present case studies of component communication in Angular
- Experiment 4.10: Research and present advanced component communication patterns.
Theory: Creating and using services; Dependency injection in Angular; Hierarchical
injectors; Managing application-wide services; Introduction to Angular HttpClient;
Performing GET,POST,PUT,DELETE requests
Practice
- Experiment 5.1: Creating and Injecting a Simple Service in Angular
- Experiment 5.2: Exploring Angular Dependency Injection: Singleton Services
- Experiment 5.3: Hierarchical Dependency Injection: Providing Services in Modules
- Experiment 5.4: Managing Application-Wide Services in Angular
- Experiment 5.5: Introduction to Angular HttpClient: Performing GET Requests.
- Experiment 5.6: Performing POST Requests with Angular HttpClient
- Experiment 5.7: Updating Data with PUT Requests in Angular HttpClient
- Experiment 5.8: Deleting Data with DELETE Requests in Angular HttpClient
- Experiment 5.9: Handling HTTP Errors and Responses in Angular HttpClient
- Experiment 5.10: Interceptors in Angular HttpClient: Modifying Requests and Responses
Theory: Configuring routes; RouterLink and router-outlet; Route guards and lazy loading; Child
routes and nested routing.
Practice
- Experiment 6.1: Configure routes in an Angular application.
- Experiment 6.2: Use RouterLink and router-outlet for navigation.
- Experiment 6.3: Implement route guards for security.
- Experiment 6.4: Implement lazy loading for performance optimization.
- Experiment 6.5: Create and use child routes and nested routing.
- Experiment 6.6: Document and present routing and navigation techniques.
- Experiment 6.7: Compare different approaches to routing in Angular.
- Experiment 6.8: Conduct a seminar on advanced routing techniques.
- Experiment 6.9: Implement a project involving complex routing and navigation.
- Experiment 6.10: Present case studies of routing and navigation in Angular applications.
Theory
Introduction to RxJS; Using observables with Angular HttpClient; Introduction to testing in
Angular; Deployment options(FireBase,AWS).
Practice
- Experiment 7.1: Creating and Subscribing to Observables in RxJS
- Experiment 7.2: Using RxJS Operators for Data Transformation
- Experiment 7.3: Combining Observables Using RxJS Operators
- Experiment 7.4: Implementing Error Handling in RxJS
- Experiment 7.5: Using Observables with Angular HttpClient: Performing GET Requests
- Experiment 7.6: Sending Data with POST Requests Using Angular HttpClient and RxJS
- Experiment 7.7: Testing Angular Services and HTTP Requests with HttpClientTestingModule
- Experiment 7.8: Testing Angular Services that Use HttpClient.
- Experiment 7.9: Deploying an Angular Application to Firebase and AWS.
- Experiment 7.10: Best Practices for Angular Application Deployment.
Textbooks and References:
- Angular Documentation: Angular.io
- Books:
- "Angular Up & Running" by Shyam Seshadri
- "Pro Angular" by Adam Freeman
Online Courses:
- Angular courses on platforms like Udemy, Coursera, and Pluralsight Tools:
- Visual Studio Code, Angular CLI, Postman
Session Plan
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Session plan & materials
No materials published yet.