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 |