Virtual Purely

ADVANCED WEB APPLICATION Theory

Lab Internal C
Course Code MCAO20104 Course Name Course Category D Discipline Elective Course
DEVELOPMENT   4

Pre-requisite Courses Nil Co-requisite Courses Nil Progressive Courses Nil

Course Offering Department Computer Applications Data Book / Codes/Standards Nil
Course Learning Rationale
The purpose of learning this course is to, Learning Program Learning Outcomes (PLO)
(CLR):
CLR-1 : Learn fundamental Javascript concepts that power AngularJS. 1 2 3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
CLR-2 : Write quicker, better AngularJS code by discovering how AngularJS itself is built.
Become fluent in AngularJS terminology, such as dependency injection, services, directives,
CLR-3 :
transclusion, and more.
CLR-4 : Realize the power of dependency injection, and how AngularJS accomplishes it

Level of Thinking (Bloom)

Multicultural Competence
Expected Proficiency (%)
Expected Attainment (%)

Community Engagement
Disciplinary Knowledge
Design custom directives and save time and energy with easily reusable components.

Self-Directed Learning
CLR-5 :

Analytical Reasoning

Scientific Reasoning
Understand what a Single Page Application (SPA) is, and how they work.

Reflective Thinking

Life Long Learning

Ethical Reasoning

Leadership Skills
Build a Single Page Application (SPA) in AngularJS. Be the coder that explains AngularJS to

Problem Solving
Critical Thinking

Research Skills
CLR-6 :
everyone else, because you understand it better than anyone else.

Team Work

ICT Skills
Course Learning Outcomes
At the end of this course, learners will be able to:
(CLO):
Understand the design of single-page applications and how AngularJS facilitates their L H - H L - - - L L - H - - -
CLO-1 : 2 85 80
development
Properly separate the model, view, and controller layers of your application and implement them M H L M L - - - M L - H - - -
CLO-2 : 3 85 80
using AngularJS
CLO-3 : Master AngularJS expressions, filters, and scopes 3 85 80 M H M H L - - - M L - H - - -
CLO-4 : Build Angular forms 3 85 80 M H M H L - - - M L - H - - -
CLO-5 : Elegantly implement Ajax in your AngularJS applications 3 85 80 H H M H L - - - M L - H - - -
CLO-6 : Write AngularJS directives, Unit test and end-to-end test your AngularJS application 3 85 80 L H - H L - - - L L - H - - -
Duration
15 15 15 15 15
(hour)
Introducing Full-Stack Creating and setting up a MEAN Building a data model with REST API- POST Methods: Building a single-page application
SLO-1 Development Project MongoDB and Mongoose Adding data to MongoDB with Angular: Foundations
S-1 Why learn the full stack? A brief look at Express, Node, and Connecting the Express PUT Methods: Updating data in Setting the groundwork for an
SLO-2 npm application to MongoDB MongoDB Angular SPA
Introducing [Link]: The web Creating an Express project Why model the data? Updating an existing Switching from Express routing to
S-2 SLO-1 server/platform subdocument in MongoDB Angular routing

17
SRMIST-DOE- Academic Curricula – Science & Humanities - (M.C.A Regulations 2020)
 Introducing Express: The Modifying Express project Defining Simple Mongoose Deleting method: Deleting data Adding the first views, Controllers,
SLO-2 framework schemas from MongoDB and services
Introducing MongoDB: The Import Bootstrap for quick, Creating more complex schemas Deleting a subdocument from Improving browser performance
SLO-1 database responsive layouts with subdocuments MongoDB
S-3 Introducing AngularJS: The front- Manually injecting dependencies
SLO-2 end framework Make it Live on Heroku Final schema How to call an API from Express
to protect against minification
S-4 SLO-1 Lab 4: How to move data from Lab 10: Building the API Lab 13: Passing Data into
Lab 1: Sample application Lab 7: Pushing up the data
S-5 SLO-2 view to the controller request Modal
Supporting cast Compiling Mongoose schemas Using UglifyJS to minify and
SLO-1 Getting Heroku set up into models Using the request module concatenate scripts
S-6 Hosting with Heroku Using the MongoDB shell to Using list of data from an API: The Building an SPA with Angular:
SLO-2 Pushing the site live using Git create a MongoDB database and Loc8r homepage The next level
add data
Designing a MEAN stack Defining the routes in Express MongoDB shell basics Separating concerns: Moving the A full SPA: Removing reliance on
SLO-1 architecture rendering into a named function the server-side application
S-7 A Common MEAN stack Catching errors returned by the Adding additional pages and
SLO-2 architecture Building basic controllers Creating a MongoDB database API dynamically injecting HTML
Looking beyond SPAs Adding Angular components to an Creating a filter to transform the
SLO-1 Creating some views Getting our database live Express application line breaks
S-8 Designing a flexible MEAN Setting up Mongo Lab and getting Sending HTML through an
SLO-2 architecture A look at Bootstrap the database URI Uncovering two-way data binding Angular binding
Lab 2: Planning a real Lab 5: Setting up the HTML Lab 8: Making the application Lab 11: Displaying and filtering Lab 14: More complex views
S-9 SLO-1 application framework with Jade templates use the right database the homepage list and routing parameters
S- and Bootstrap
10 SLO-2 Breaking the development into Jade templates and Bootstrap Pushing up the data Using Angular filters to format Using URL parameters in
stages data controllers and services
Writing a REST API” Exposing the Adding HTML geolocation to find
S- SLO-1 The Steps to built Loc8r Building a Template MongoDB database to the places near you Building the Details page view
application
11 Using Angular UI components to
SLO-2 Hardware architecture Adding the rest of the views The rules of a REST API Using services for data create a modal popup
S SLO-1
How the MEAN stack components How to more data from the view to Deleting document in MongoDB Modifying data before displaying Creating Modal using Angular UI
12-
13 SLO-2 work together the controller it: Fixing the distances Components

S- Lab 6: Take the data out of the Lab 9: Setting up the API in Lab 12: Making HTTP requests Lab 15: Adding and using a
SLO-1 Lab 3: Development hardware views and make them smarter Express from Angular to an API click handler
14
S- Updating the rest of the views GET methods : Reading data Ensuring forms work as Using the form to submit a
SLO-2 Production hardware. and controllers from MongoDB expected review.
15

18
SRMIST-DOE- Academic Curricula – Science & Humanities - (M.C.A Regulations 2020)
Learning
Resources Text Book: Getting MEAN with Mongo, Express Angular and Node, Simon Holmes Reference Book:
Practical Node JS: Building a Real World Scale Web Apps, Basarat Syed, A Press, 1. MEAN Web Development, AMOS Q. HAVIV
2014.
2. AngularJS: [Link]
Learning Angular JS: A Guide to Angular JS Development, Ken Williamson, O’
Reilly, 2015 3. MongoDB: [Link]

Course Designers
Experts from Industry Experts from Higher Technical Institutions Internal Experts
[Link], Group Project Manager, HCL Technologies, Chennai [Link], Professor, University of Madras, Chennai Mr.N. KRISHNAMOORTHY
Mr.M. Hemachandar, Tech Lead, Wipro Limited, Chennai

19
SRMIST-DOE- Academic Curricula – Science & Humanities - (M.C.A Regulations 2020)