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 Node.js: 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: https://angular.io/docs
Learning Angular JS: A Guide to Angular JS Development, Ken Williamson, O’
Reilly, 2015 3. MongoDB: https://docs.mongodb.com/manual/tutorial/getting-started/

Course Designers
Experts from Industry Experts from Higher Technical Institutions Internal Experts
Mr.G.Muruganandam, Group Project Manager, HCL Technologies, Chennai Dr.S.Gopinathan, 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)