Modern Practical Tools Course Code: 4340705

GUJARAT TECHNOLOGICAL UNIVERSITY (GTU)

Competency-focused Outcome-based Green Curriculum-2021 (COGC-2021)

Semester-IV

Course Title: Modern Practical Tools

(Course Code: 4340705)

Diploma programme in which this course is offered Semester in which

offered
Computer Engineering Forth

1. RATIONALE
Today's modern industry uses many frameworks for a front-end web design and Angular is one
of them for developing dynamic web applications. It covers all the basics of frontend web
application development using the Angular framework in order to provide developers insights
into real-world challenges and scenarios they face throughout their day-to-day development
process, as well as provides tips and best practices for becoming a web application developer.
Self-learning tips on exploring Angular topics are provided to equip the student better to
continuously keep upgrading their knowledge and skills even after landing a career in Angular.
All the key theories and concepts related to the Angular framework and front-end web
development are explained with the help of real-world day-to-day problems. The learners will
be asked to complete projects and challenges based on the concepts which they learned in lab
sessions to help them to get a real-world glimpse into practical Angular front-end programming.
Below are major reasons for considering learning Angular over other platforms.
.
● Optimal code
● Easy to Integrate
● Support for Single Page Applications
● Declarative User Interface
● Modularity
● Cross-platform compatibility

This course will give basic knowledge and skills for front-end design for web application
development using Angular framework.

2. COMPETENCY
The purpose of this course is to help the student to attain the following industry identified
competency through Angular Framework experiences:

● Use Angular Framework to build appealing dynamic web application for all
platforms.

GTU - COGC-2021 Curriculum

Page 1 of 10
Modern Practical Tools Course Code: 4340705

3. COURSE OUTCOMES (COs)

The practical exercises, the underpinning knowledge and the relevant soft skills associated
with the identified competency are to be developed in the student for the achievement of the
following COs:

a) Prepare environment for angular project using Node.js, npm and visual code editor.
b) Apply angular directives, components and pipes in different web page development.
c) Utilize angular template driven and reactive forms in different problem solutions.
d) Design pages to make HTTP GET/POST calls to perform CRUD operations using
different server-side APIs.
e) Develop single page dynamic applications using Angular framework and APIs.

4. TEACHING AND EXAMINATION SCHEME

Teaching Total Credits Examination Scheme
Scheme (L+T+P/2)
Theory Marks Practical Marks Total
(In Hours)
Marks
L T P C CA ESE CA ESE
0 0 2 1 0 0 25 25 50
(*): For this practical only course, 25 marks under the practical CA has two components i.e.
the assessment of micro-project, which will be done out of 10 marks and the remaining 15
marks are for the assessment of practical. This is designed to facilitate attainment of COs
holistically, as there is no theory ESE.
Legends: L-Lecture; T– Tutorial/Teacher Guided Theory Practice; P-Practical; C– Credit, CA
- Continuous Assessment; ESE -End Semester Examination.

5. SUGGESTED PRACTICAL EXERCISES

The following practical outcomes (PrOs) are the sub-components of the COs. Some of the PrOs
marked ‘*’ are compulsory, as they are crucial for that particular CO at the ‘Precision Level’
of Dave’s Taxonomy related to ‘Psychomotor Domain’.
S. Unit Approx. Hrs.
No Practical Outcomes (PrOs) required
. No.

Setup environment for Angular framework by Installing I 01*

1
Node.js, npm package manager using editor like Visual Code.
Create first application to print Hello World mesage using I 01*
2
angular framework.
Design a web page to utilize property binding and event binding I 01*
3
concepts using button and textbox controls.
Create various components of web page using Attribute II 01*
4
Directives.
Design a web page to display student grading system in tabular II 01*
5 format with alternate color style using ngSwitch, ngStyle
Directives.

GTU - COGC-2021 Curriculum

Page 2 of 10
Modern Practical Tools Course Code: 4340705

S. Unit Approx. Hrs.

No Practical Outcomes (PrOs) required
No.
.
Design component to perform following tasks II 02*
A) To Add or Remove number of students using textbox and
6 button controls and display it in tabular structure format.
B) Give row level remove button option to student table and
record should be deleted when click on it..
Create a component to display a products list from array. the II 02*
product component should display a product Id, name, purchase
7
date, price, and image for the product and search using various
pipes.
Design a student registration page using template driven form III 01*
8 approach and utilize different form and controls level ng
validation classes.
Design component to enter faculty details like Code, Name, III 02*
Email, Type, Faculty Status (Active, Inactive), Subjects
9 Teaching (with option to add multiple subjects dynamically)
using reactive form with various types of validation of form and
controls.
Design a page to implement Add to Cart functionality using III 01*
10 decorators, custom properties, custom events of component
communication.
Develop page to demonstrate different methods of angular III 01*
11
component lifecycle.
Design an e-commerce product page and product details page III 02*
12 that displays product details when clicking on any particular
product.
Design a page to display student information using IV 02*
13
dependency Injection.
Develop a page for product listing and search-as-you- IV 02*
14
type using observables and web APIs from database.
Design web page to display student data in table using IV 02*
15
HTTP GET/POST Calls from web APIs.
Design web page to insert product data in table using IV 01*
16
web APIs.
Design a page to implement Multiview component with V 02*
17 login, logout functionalities using different routing
options.
Develop a page to demonstrate page navigation of V 01*
18
product list using routing concepts.
Design a page to load customer and Sales order data V 01*
19
using lazy loading technique in angular.
20 Design a page to implement CORS concept. V 01*

GTU - COGC-2021 Curriculum

Page 3 of 10
Modern Practical Tools Course Code: 4340705

S. Unit Approx. Hrs.

No Practical Outcomes (PrOs) required
No.
.
Total 20 Practical Exercises 28 Hrs.

Note
i. More Practical Exercises can be designed and offered by the respective course teacher to
develop the industry relevant skills/outcomes to match the COs. The above table is only a
suggestive list.
ii. The following are some sample ‘Process’ and ‘Product’ related skills (more may be
added/deleted depending on the course) that occur in the above listed Practical Exercises
of this course required which are embedded in the COs and ultimately the competency.

S.No. Sample Performance Indicators for the PrOs Weightage in %

1 Use of creative and innovative approach. 20
2 Readability 15
3 Code Efficiency 30
4 Verify practical implementation for desired output. 25
5 Readability and documentation of the program/Quality of 10
input and output displayed (messaging and formatting).
Total 100

6. MAJOR EQUIPMENT/ INSTRUMENTS REQUIRED

These major equipment with broad specifications for the PrOs is a guide to procure them by the
administrators to usher in uniformity of practicals in all institutions across the state.

S. PrO. No.
Equipment Name with Broad Specifications
No.
1 Computer system with operating system and browser that All
supports JavaScript.
2 HTML IDEs and Code Editors Open-source tools like Visual All
Studio Code, Notepad++
3 Open-source jQuery, Node.js, Node Package Manager (npm) All

7. AFFECTIVE DOMAIN OUTCOMES

The following sample Affective Domain Outcomes (ADOs) are embedded in many of the
above-mentioned COs and PrOs. More could be added to fulfil the development of this course
competency.

a) Work as a leader/a team member.

b) Follow ethical programming practices.
c) Practice environmentally friendly methods and processes.
d) Follow safety precautions.

The ADOs are best developed through the laboratory/field-based exercises. Moreover, the level
of achievement of the ADOs according to Krathwohl’s ‘Affective Domain Taxonomy’ should
gradually increase as planned below:

GTU - COGC-2021 Curriculum

Page 4 of 10
Modern Practical Tools Course Code: 4340705

i. ‘Valuing Level’ in 1st year

ii. ‘Organization Level’ in 2nd year.
iii. ‘Characterization Level’ in 3rd year.
8. UNDERPINNING THEORY
The major underpinning theory is given below based on the higher level UOs of Revised
Bloom’s taxonomy that are formulated for development of the COs and competency. If
required, more such UOs could be included by the course teacher to focus on attainment of COs
and competency.

Unit Unit Outcomes (UOs) Topics and Sub-topics

(4 to 6 UOs at different levels)
Unit – I: 1a Setup Angular 1.1 Why Angular
Introduction Development Environment 1.2 Development Environment: Node
to Angular 1b Getting Started first JS, Type script, Angular CLI
Framework Angular Project 1.3 Starting Your First Angular Project
1c Identify the various pieces 1.4 Understanding the Angular CLI
that the Angular skeleton 1.5 Running first Application for Hello
application generates and World
their needs and uses. 1.6 Basics of an Angular Application
1d Relate basic Angular data Root HTML--index.html
binding mechanism. The Entry Point--main.ts
Main Module--app.module.ts
Root Component-AppComponent
1.7 Creating a Component
1.8 Understanding Data Binding
1.9 Understanding Property Binding
1.10 Understanding Event Binding
1.11 Using Models for Cleaner Code
Unit– II: 2a. Classify various type of 2.1 Introduction Directives
Angular Directives used in angular 2.2 Built-In Attribute Directives:
Directives, 2b. Apply various attributes, NgClass, NgStyle
Components decorator, and styles to 2.3 Alternative Class and Style Binding
and Pipes components. Syntax
2c. Use various states of 2.4 Built-In Structural Directives
component life cycle. Ngif , NgFor, NgSwitch, Multiple
2d. Utilize various types of Sibling Structural Directives
pipes in template expression 2.5 Defining a Component
for display data in Angular. 2.6 Selector, Template, Styles, Style
Encapsulation, Others Components
and Modules
2.7 Input, Output and Change Detection
2.8 Component Lifecycle, Interfaces
and Functions, View Projection
2.9 Introduction to Pipes
2.10 Built-In Pipes, Angular Custom
Pipes, Pure and Impure Pipes
2.11 Pipe Transform Interface &

GTU - COGC-2021 Curriculum

Page 5 of 10
Modern Practical Tools Course Code: 4340705

Unit Unit Outcomes (UOs) Topics and Sub-topics

(4 to 6 UOs at different levels)
Transform Function
Unit– III: 3a. Show usage of template 3.1 Introduction to Template-Driven Forms
Angular driven Forms. 3.2 Setting Up Forms
Template 3b. Perform page design with 3.3 Alternative to NgModel-Event and
Driven Forms Reactive Forms. Property Binding
and Reactive 3c. Apply Form Array in 3.4 NgModel
Forms various components. 3.5 A Complete Form, Control State and
3d. Differentiate Template Validity
driven and reactive Forms. 3.6 Working with Form Groups
3.7 Introduction to Reactive Forms
3.8 Using Reactive Forms: Form Controls,
Form Groups, Form Builders
3.9 Form Data, Control State, Validity, and
Error Messages
3.10 Form Arrays
Unit–IV: 4a. Correlate the concepts of 4.1 Introduction to Angular Services.
Angular Angular services and 4.2 Creating Our Own Angular Service and
Services and Dependency Injection Dependency Injection
HTTP calls 4b. Develop customize APIs for 4.3 Introducing HttpClient, Server Setup,
different CRUD operations. Using HitpClientModule,HTTP
4c. Apply Various HTTP calls in GET/POST Calls
application development. 4.4 Design Server-side APIs using PHP and
4d. Utilize Observables feature in MYSQL
customized application. 4.5 Advanced HTTP: Options-
Headers/Params, Observe/Response
Type, Interceptors
4.6 RxJS, Observables and Advanced
Observables
Unit–V: 5a. setup the Angular router for 5.1 Server Setup, Importing the Router
Angular any Angular application. Module, Displaying the Route Contents,
Routing and 5b. Apply different routing Navigating Within the Application,
Application concept for navigation. Wildcards and Defaults
Development 5c. Use Route Guard for 5.2 Common Routing Requirements,
authenticated page Required Route Params, Optional Route
navigation. Params
5d. Utilize concepts of CORS 5.3 Route Guards: Authenticated-Only
and Lazy loading to design Routes, Preventing Unload, Preloading
web pages. Data Using Resolve
5.4 API/Server Calls and CORS
5.5 Lazy Loading

9. SUGGESTED SPECIFICATION TABLE FOR QUESTIONPAPER DESIGN

GTU - COGC-2021 Curriculum

Page 6 of 10
Modern Practical Tools Course Code: 4340705

Unit Unit Title Teaching Distribution of Theory Marks

No. Hours R U A Total
Level Level Level Marks
I Introduction to Angular Framework 3
II Angular Directives, Components
6
and Pipes
III Angular Template Driven Forms and
7
Reactive Forms
IV Angular Services and HTTP calls 7
V Angular Routing and Application
5
Development
Total 28
Legends: R=Remember, U=Understand, A=Apply and above (Revised Bloom’s taxonomy)
Note: This specification table provides general guidelines to assist students for their learning
and to teachers to teach and question paper designers/setters to formulate test items/questions
to assess the attainment of the UOs. The actual distribution of marks at different taxonomy
levels (of R, U and A) in the question paper may slightly vary from above table.

10. SUGGESTED STUDENT ACTIVITIES

Other than the laboratory learning, following are the suggested student-related co-curricular
activities which can be undertaken to accelerate the attainment of the various outcomes in this
course: Students should perform following activities in group and prepare reports of about 5
pages for each activity. They should also collect/record physical evidences for their (student’s)
portfolio which may be useful for their placement interviews:

a) Identify tools used for web page development and present its features.
b) Undertake course “Angular - The Complete Guide (2023 Edition)” available on Udemy
online platform. (https://www.udemy.com/course/the-complete-guide-to-angular-2/).
c) Undertake course “Angular Course” available on internsala online platform. (Angular
Course - Learn Angular JS Online with Certificate (internshala.com)) or any other such site.
d) Undertake course “Routing and Navigation Concepts in Angular” available on coursera
online platform. Routing and Navigation Concepts in Angular (coursera.org) ) or any other
such site.

11. SUGGESTED SPECIAL INSTRUCTIONAL STRATEGIES (if any)

These are sample strategies, which the teacher can use to accelerate the attainment of the various
outcomes in this course:
a) Massive open online courses (MOOCs) may be used to teach various topics/sub topics.
b) Guide student(s) in undertaking micro-projects.
c) ‘P’ in section No. 4means different types of instructions that are to be employed by
teachers to develop the outcomes.
d) About 20% of the topics/sub-topics which are relatively simpler or descriptive in nature
is to be given to the students for self-learning, but to be assessed using different
assessment methods.
e) With respect to section No.10, teachers need to ensure to create opportunities and
provisions for co-curricular activities.
f) Guide students for open-source Angular framework and other resources.

GTU - COGC-2021 Curriculum

Page 7 of 10
Modern Practical Tools Course Code: 4340705

g) Motivate students to visit as many websites as they can to increase the design knowledge
and creativity.

12. SUGGESTED MICRO-PROJECTS

Only one micro-project is planned to be undertaken by a student that needs to be assigned to
him/her in the beginning of the semester. In the first four semesters, the micro-project are group-
based (group of 3 to 5). However, in the fifth and sixth semesters, the number of students in
the group should not exceed three.
The micro-project could be industry application based, internet-based, workshop-based,
laboratory-based or field-based. Each micro-project should encompass two or more COs which
are in fact, an integration of PrOs, UOs and ADOs. Each student will have to maintain dated
work diary consisting of individual contribution in the project work and give a seminar
presentation of it before submission. The duration of the microproject should be about 12-14
(twelve to fourteen) student engagement hours during the course. The students ought to
submit micro-project by the end of the semester to develop the industry-oriented COs.
A suggestive list of micro-projects is given here. This has to match the competency and the
COs. Similar micro-projects could be added by the concerned course teacher:

a) Develop a Notepad application with functionality of digital Notebook.

b) Develop currency converter application using angular framework.
c) Develop Angular Bare Bones project showcases Angular routing
d) Develop a dynamic single page application for awareness towards blood donation, organ
donation, follow healthy life style and quit smoking in society.

13. SUGGESTED LEARNING RESOURCES

S. Author Publication with place, year
Title of Book
No. and ISBN
1 Angular in Action Jeremy Wilken Manning Publications.
ISBN-10: 1617293318
ISBN-13: 978-1617293313
2 Angular: Up and Shyam Seshadri O'Reilly Media, Inc.
Running: Learning ISBN-10: 9352137426
Angular, Step by Step ISBN-13: 978-9352137428
3 ng-book: The Complete Felipe Coury, Ari Createspace Independent
Guide to Angular Lerner, Carlos Publishing Platform.
Taborda ISBN-10: 1985170280
ISBN-13: 978-1985170285
4 Angular Projects Aristeidis Packt Publishing Ltd.
Bampakos, Mark ISBN-10: 1800205260
Thompson
ISBN-13: 978-1800205260
5 Angular Development Yakov Fain, Anton Manning; 2nd edition
with TypeScript Moiseev ISBN-10: 1617295345
ISBN-13: 978-1617295348
6 Angular Cookbook Muhammad Ahsan Packt Publishing Limited,
Ayaz, Najla Obaid ISBN-10: 1838989439
ISBN-13: 978-1838989439

GTU - COGC-2021 Curriculum

Page 8 of 10
Modern Practical Tools Course Code: 4340705

14. SOFTWARE/LEARNING WEBSITES

● https://www.geeksforgeeks.org/angular-8-introduction/

● Angular7 Tutorial (tutorialspoint.com)

● https://docs.angularjs.org/guide/concepts

● https://www.w3schools.blog/angular-8-tutorial

● https://www.simplilearn.com/tutorials/angular-tutorial

● https://www.javatpoint.com/angular-7-tutorial

15. PO-COMPETENCY-CO MAPPING

Modern Practical Tools (Course Code: 4340705)
Semester IV
POs
PO 1 PO 2 PO 3 PO 4 PO 5 Engineering PO 6 PO 7
Basic Proble Design/ Engineering practices for Project Life-
& m developm Tools, society, Management long
Discipl Analys ent of Experimen- sustainability & learni
Competency
ine is solutions tation&Test environment ng
& Course Outcomes
specifi ing
c
knowl
edge
Competency Use Angular Framework to build appealing dynamic web application for all
platforms.
Course Outcomes
CO a) Prepare environment for angular 2 - 1 1 - - -
project using Node.js, npm and
visual code editor.
CO b) Apply angular directives,
components and pipes in different
web page development.
2 1 1 1 - - 1

CO c) Utilize angular template driven and

reactive forms in different problem 2 2 2 2 - - -
solutions.

CO d)Design pages to make HTTP

GET/POST calls to perform 2 2 2 2 - - 1
CRUD operations using different
server-side APIs.
CO e) Develop single page dynamic
applications using Angular
framework and APIs. 2 2 2 2 1 1 1

Legend: ‘3’ for high, ‘2’ for medium, ‘1’ for low and ‘-’ for no correlation of each CO with PO.

16. COURSE CURRICULUM DEVELOPMENT COMMITTEE

GTU Resource Persons

GTU - COGC-2021 Curriculum

Page 9 of 10
Modern Practical Tools Course Code: 4340705

S.
Name and Designation Institute Contact No. Email
No.
1 Jiger P. Acharya GP Ahmedabad 9429462026 jigeracharya@gmail.com

2 Alpeshkumar
1 R. Thaker GP Ahmedabad 9879709675 alpeshrthaker@gmail.com

3 Umang
2 D. Shah GP Ahmedabad 9427686364 umang.shah111gp@gmail.com

GTU - COGC-2021 Curriculum

Page 10 of 10