CAP917:FRONT-END JAVASCRIPT FRAMEWORKS
L:2 T:0 P:4 Credits:4
Course Outcomes: Through this course students should be able to
CO1 :: Understand client-side Javascript frameworks and the MVC design pattern
CO2 :: Understand single page applications in AngularJS for typography
CO3 :: Apply concepts of functional front-end web application using AngularJS
CO4 :: Build and integrate RESTful services into Angular applications
CO5 :: Analyze and Implement routing, forms, and state management in Angular applications
Unit I
Introduction : what is Angular, architecture, development environment, your first Angular app,
structure of Angular projects
Unit II
TypeScript fundamentals : declaring variables, types, arrow functions, interfaces, classes, objects,
constructors, access modifiers, access modifiers in constructor parameters, properties, modules
Angular fundamentals : building blocks of angular apps, components, generating components using
Angular CLI, templates directives, services, dependency injection
Unit III
Displaying data and handling events : property binding, attribute binding, adding bootstrap, class
binding, style binding, template variables, two-way binding, pipes
Directives : ngIf, Hidden Property, ngSwitchCase, ngFor, ngClass, ngStyle, commonly used angular
directives
Unit IV
Building re-usable components : component API, input properties, output properties, passing
event data
Template-driven forms : building a bootstrap form, types of forms, ngModel, adding validation,
specific validation errors, styling invalid input fields, cleaner templates ngForm, ngModelGroup,
control classes and directives, disabling the submit button, working with check boxes, working with
drop-down lists, working with radio buttons
Unit V
Consuming HTTP services : JSONPlaceHolder, getting data, creating data, updating data, deleting
data, onInit interface, handling bad request errors
Routing and navigation : routing in a nutshell, configuring routes, routerOutlet, routerLink
routerLinkActive, getting the route parameters, routes with multiple parameters
Unit VI
Authentication and authorization : application overview, architecture, JSON web tokens,
implementing login, implementing logout, showing or hiding elements, showing or hiding elements
based on the user's role, getting the current user, redirecting users after logging in
Deployment : preparing for deployment, building applications with angular CLI, deploying to GitHub
pages, deploying to firebase
List of Practicals / Experiments:
List of practical
• Practcal-1: Demonstrate the creation of an angular application.
• Practcal-2: Write programs to implement the fundamental concepts ofTypeScript.
• Practcal-3: Write programs to implement the fundamental concepts ofAngular
• Practical-4: Write a program to create a new component using angular CLI.
• Practcal-5: Write programs to implement various Angular directives andbindings (class binding, event
binding etc).
• Practcal-6: Write programs to implement the fundamental concepts of TypeScript.
Session 2025-26 Page:1/2
• Practical-7: Write a program to implement reusable components.
• Practcal-8: Write programs to demonstrate the use of Template Drivenforms and their concepts
• Practcal-9: Write a program to demonstrate use of JSONPlaceholder and HTTP services
• Practical-10: Write a program to demonstrate use of addition, deletion and other operations in HTTP
services
• Practcal-11: Write a program to demonstrate the use of routing andnavigation in Angular
• Practcal-12: Write a program to implement Authentication and authorization in Angular.
• Practcal-13: Write a program to show or hide the elements based upon the authentication of the
user.
• Practcal-14: Demonstrate the deployment of Angular applications on Heroku, Firebase and Github
Text Books:
1. LEARNING ANGULARJS A GUIDE TO ANGULARJS DEVELOPMENT by KEN WILLIAMSON,
O'REILLY
References:
1. ANGULARJS: UP AND RUNNING- ENHANCED PRODUCTIVITY WITH STRUCTURED WEB
APPS by BRAD GREEN, SHYAM SESHADRI, O'REILLY
Session 2025-26 Page:2/2