Angular-CUST1052

Teacher

MR.MANOJ PADHI

Category

Domain Courses

Course Attendees

Still no participant

Course Reviews

Still no reviews

Course Objective:

  • Master the fundamentals and advanced concepts of Angular.
  • Develop and optimize complex Angular applications.
  • Implement best practices and deploy Angular applications.

Course Outcomes:

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 (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

  • 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.

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

  • 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.

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

  • 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

applications.

Module 4: Component Communication (8 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

applications.

  • Experiment 4.10: Research and present advanced component communication patterns.

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

  • 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

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

  • 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.

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

  • 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

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

Our Main Teachers