Course Objective:
- Master the fundamentals and advanced concepts of Angular.
- Develop and optimize complex Angular applications.
- Implement best practices and deploy Angular applications.
Still no participant
Still no reviews
| 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) |
Module 1: Introduction to Angular and TypeScript Basics (8 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
Module 2: Angular Architecture (8 hours)
Theory
Components, templates, and modules; Component lifecycle hooks; Creating and using Angular
modules; Angular application structure and best practices.
Practice
Module 3: Data Binding and Directives (8 hours)
Theory
Property binding and event binding; Two-way data binding with ngModel; Built-in directives
(ngIf, ngFor, ngClass, ngStyle); Custom directives.
Practice
applications.
Module 4: Component Communication (8 hours)
Theory
Input and output decorators; Event emitters; Parent-child component communication; ViewChild
and ContentChild decorators.
Practice
applications.
Module 5: Services, Dependency Injection and HTTP Client (8 hours)
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
Module 6: Routing and Navigation (8 hours)
Theory: Configuring routes; RouterLink and router-outlet; Route guards and lazy loading; Child
routes and nested routing.
Practice
Module 7: RxJX, Testing and Deployment (8 hours)
Theory
Introduction to RxJS; Using observables with Angular HttpClient; Introduction to testing in
Angular; Deployment options(FireBase,AWS).
Practice
| Lect. No | Points To Covered | Methodology/Activities |
| 1 | Overview of Angular framework; | Practical |
| Video Link1: https://www.youtube.com/watch?v=QoptnVCQHsU | ||
| Video Link2: https://www.youtube.com/watch?v=5xg4Jvqy_UI | ||
| Practice: Session 1 | ||
| 2 | Setting up the development environment (Node.js, Angular | Practical |
| CLI) | ||
| Video Link1: https://www.youtube.com/watch?v=QpsxFZMEmHg | ||
| Video Link2: https://www.youtube.com/watch?v=Uv6CCHUZUzw&t=169s | ||
| Practice: Session 2 | ||
| 3 | Project Session:1: Gate process and SRS | Project |
| 4 | Creating a new Angular project with Angular CLI | Practical |
| Video Link: https://www.youtube.com/watch?v=fDICKFh4o_Q | ||
| Practice: Session 3 | ||
| 5 | Introduction to TypeScript | Practical |
| Video Link: https://www.youtube.com/watch?v=ahCwqrYpIuM | ||
| Practice: Session 3 | ||
| 6 | Project Session:2: SRS preparation: Use case diagram | Project |
| 7 | Introduction to Java Database Connectivity (JDBC) | Practical |
| Video Link: https://www.youtube.com/watch?v=7v2OnUti2eM | ||
| Practice: Session 4 | ||
| 8 | TypeScript features and syntax | Practical |
| Video Link: https://www.youtube.com/watch?v=S-aprSnsGnQ | ||
| Practice: Session 5 | ||
| 9 | Project Session:3: Gate process and SRS Template design | Project |
| 10 | TypeScript in Angular. | Practical |
| Video Link: https://www.youtube.com/watch?v=YZvfAU3WTNg | ||
| Practice: Session 6 | ||
| 11 | Component lifecycle hooks | Practical |
| Video Link: https://www.youtube.com/watch?v=jFk9-zV27BE | ||
| Practice: Session 6 | ||
| 12 | Project Session:4:ER Model design | Project |
| 13 | Creating and using Angular modules | Practical |
| Video Link: https://www.youtube.com/watch?v=YPvjyMxFbOQ | ||
| Practice: Session 7 | ||
| 14 | Angular application structure and best practices | Practical |
| Video Link: https://www.youtube.com/watch?v=B1VMTMRLE8s | ||
| Practice: Session 7 | ||
| 15 | Project Session5: ER Model design | Project |
| 16 | Property binding and event binding | Practical |
| Video Link: https://www.youtube.com/watch?v=N8FBmB2jme8 | ||
| https://www.youtube.com/watch?v=ZfIc1_oj7uM | ||
| Practice: Session 8 | ||
| 17 | Two-way data binding with ngMode | Practical |
| Video Link: https://www.youtube.com/watch?v=CacMOuzTiJU | ||
| Practice: Session 9 | ||
| 18 | Project Session:6: DFD design | Project |
| 19 | Built-in directives | Practical |
| Video Link: https://www.youtube.com/watch?v=syxyAINjP84 | ||
| Session 11: Session 10 | ||
| 20 | Input and output decorator | Practical |
| Video Link: https://www.youtube.com/watch?v=088HMNixhQg | ||
| Practice: Session 10 | ||
| 21 | Project Session:7: DFD Design | Project |
| 22 | Event emitters | Practical |
| Video Link: https://www.youtube.com/watch?v=GwpGejqHY18 | ||
| Practice: Session 11 | ||
| 23 | Parent-child component communication | Practical |
| Video Link: https://www.youtube.com/watch?v=Ed7f8359vdg | ||
| Practice: Session 11 | ||
| 24 | Project Session:8: Schema Design | Project |
| 25 | ViewChild and ContentChild decorators | Practical |
| VideoLink: https://www.youtube.com/watch?v=bt6d9RJJsi8&t=364s | ||
| https://www.youtube.com/watch?v=jWfNjNvUluA | ||
| Practice: Session 12 | ||
| 26 | creating and using services in angular | Practical |
| Video Link: https://www.youtube.com/watch?v=69VeYoKzL6I | ||
| Practice: Session 12 | ||
| 27 | Project Session:9: Schema Design | Project |
| 28 | Dependency injection in Angular | Practical |
| Video Link: https://www.youtube.com/watch?v=OFPIGlxunL0 | ||
| https://www.youtube.com/watch?v=jWODteEGQmw | ||
| Practice: Session 13 | ||
| 29 | Hierarchical Injectors | Practical |
| Video Link: https://www.youtube.com/watch?v=G8zXugcYd7o | ||
| Practice: Session 13 | ||
| 20 | Project Session:10: Schema Design | Project |
| 31 | managing application-wide services in angular | Practical |
| Video Link: https://www.youtube.com/watch?v=pwuGBvOPFYI | ||
| Practice: Session 14 | ||
| 32 | introduction to angular httpclient in angular | Practical |
| Video Link: https://www.youtube.com/watch?v=_05v0mrNLh0 | ||
| Practice: Session 15 | ||
| 33 | Project Session:11: SRS Presentation | Project |
| 34 | Performing GET,POST,PUT,DELETE requests | Practical |
| Video Link: https://www.youtube.com/watch?v=guYMSP7JVTA | ||
| Practice: Session 16 | ||
| 35 | Configuring routes | Practical |
| Video Link: https://www.youtube.com/watch?v=LNihtMURAg0 Practice: Session 17 | ||
| 36 | Project Session:12:Project Code work | Project |
| 37 | RouterLink and router-outlet | Practical |
| Video Link: https://www.youtube.com/watch?v=z1f8jNnwqZM | ||
| Practice: Session 18 | ||
| 38 | Route guards and lazy loading | Practical |
| Video Link: https://www.youtube.com/watch?v=ibn2yAomxp8 | ||
| Practice: Session 19 | ||
| 39 | Project Session:13: Project Code work | Project |
| 40 | Child routes and nested routing | Practical |
| VideoLink: https://www.youtube.com/watch?v=6sdpyU9Zwns | ||
| Practice: Session 20 | ||
| 41 | Introduction to RxJS | Practical |
| Video Link: https://www.youtube.com/watch?v=3fDbUB-nKqc | ||
| Practice: Session 21 | ||
| 42 | Project Session:14 : Project Code work | Project |
| 43 | Using observables with Angular HttpClient | Practical |
| Video Link: https://www.youtube.com/watch?v=SOaI5Ix7ytA | ||
| Practice: Session 22 | ||
| 44 | Using observables with Angular HttpClient | Practical |
| Video Link: https://www.youtube.com/watch?v=6Owtoy0avA8&list=PL_euSNU_eLbfOjtJGiczeETmx5QZz8lm3 | ||
| Practice: Session23 | ||
| 45 | Project Session:15 : Project Code work | |
| 46 | Introduction to testing in Angular | Practical |
| Video ink: https://www.youtube.com/watch?v=emnwsVy8wRs | ||
| Practice: Session24 | ||
| 47 | Introduction to testing in Angular | Practical |
| Video Link: | ||
| https://www.youtube.com/watch?v=VnaDJOucT-4&list=PL_euSNU_eLbcqJ6_Z3FOZJ8mLZ2oMFItV | ||
| Practice: 24 | ||
| 48 | Project Session:16 : Project Code work | Project |
| 49 | Deployment option | Practical |
| Video Link: https://www.youtube.com/watch?v=K_DFGDPrJJI | ||
| Practice:: Session 25 | ||
| 50 | Deployment option | Practical |
| Video Link: https://www.youtube.com/watch?v=zHrHg4_GNNE | ||
| Practice: Session 25 | ||
| 51 | Project Session:17 : Project Code work | |
| 52 | Testing Angular Services that Use HttpClient | Practical |
| Video Link https://www.youtube.com/watch?v=7rlwryYhGzs | ||
| 53 | Testing Angular Services that Use HttpClient | Practical |
| https://www.youtube.com/watch?v=c57llB8QA2E | ||
| Practice: Session 26 | ||
| 54 | Project Session:18 : Project Code work | Project |
| 55 | Deploying an Angular Application to Firebase and AWS | Practical |
| Video Link: https://www.youtube.com/watch?v=UNCggEPZQ0c | ||
| Practice: Session 26 | ||
| 56 | Deploying an Angular Application to Firebase and AWS | Practical |
| Video Link: https://www.youtube.com/watch?v=dPIyS5R6lHU | ||
| Practice: Session 26 | ||
| Project Session:19 : Project Code work | ||
| 57 | Deploying an Angular Application to Firebase and AWS | Practical |
| Video Link: https://www.youtube.com/watch?v=dPIyS5R6lHU | ||
| Practice: Session 26 | ||
| 58 | Deploying an Angular Application to Firebase and AWS | Practical |
| Video Link: https://www.youtube.com/watch?v=dPIyS5R6lHU | ||
| Practice: Session 26 | ||
| 59 | Project Session:20,21, ,: Project Code work | Project |