ASP.

NET MVC with Angular Development

About the Course
The ASP.NET MVC with Angular Development course is primarily designed for .NET Beginner(s)/Professional(s) who want
to learn how to create web applications using ASP.NET MVC and Angular. In this course, you will learn how to create web
pages, custom validation attributes, custom helpers, querying database using Entity Framework ORM, making pages more
interactive using Angular, mobile friendly application and finally publish it on IIS.

Learning Path

Course objectives
At the completion of this course, attendees will be able to;

• Create custom html helpers and validations attributes

• Query database using Entity Framework ORM code first approach
• Design and develop scalable architecture
• Create Application Core layer using Entity Framework Code First approach
• Scale application for Phone, Tablets, Laptop & Desktop
• Understand and Implement Repository, Unit of Work and Dependency Injection Design Pattern
• Understand Angular Core and advanced concepts
• Do errors logging by using ELMAH
• Optimize web page performance
• Understand Filters and Apply filters
• Secure application based on user roles
• Secure ASP.NET Web API using Token based security
• Publish theirs Apps on IIS
1
Page
Who can do this course?
All .NET Beginner(s)/Professional(s) who are keen to develop interactive, light weight and highly extensible web app should
go for this course.

Pre-requisites
Anyone who wants to learn ASP.NET MVC with Angular development should have a basic knowledge of C# and HTML.

Tools/IDE
Visual Studio 2017 or higher, SQL Server 2012 or Higher

Course Curriculum
Module 1
Introduction
• Introduction to ASP.NET MVC
• ASP.NET MVC vs. ASP.NET Web Form
• Advantages of ASP.NET MVC
Visual Studio Project Templates
• Understanding Visual Studio ASP.NET MVC Templates
• Creating an ASP.NET MVC project
• Understanding ASP.NET MVC project folder structure
• Understanding configuration files
Model, View, Controller & Actions
• Understanding Model, View and Controller
• Types of Views
• Creating Controller
• Understanding Actions
• Actions and Non-Actions Methods
• Understanding Action Results
• Communication between Controller and View
Razor View Engine
• Understanding Razor View Engine
• Razor View Engine vs. Web Form Engine
• Razor Syntax
• Razor Statements, Loops etc.
Routes & URLs
• Introduction to Routing
• Defining Routes
• Attribute Routing
• Need of attributes routing
2
Page
Module 2
Helpers
• Understanding Html Helpers
• Types of Html Helpers
• Built-In Html Helpers
o Standard Helpers
o Strongly Typed Helpers
o Templated Helpers
• Inline Helpers
• Custom Helpers
• Url helpers
Server-side Data Receiving Ways
• Action Parameters
• View Models/Objects
• FormCollection
Partial Views
• Static Partial View
• Dynamic Partial View

Module 3
ViewModel & Validation
• Creating ViewModel
• Understanding ASP.NET MVC Validation
• Need of server-side and client-side Validation
• Validation with Data Annotation
Custom Validation
• Custom client-side Validation
• Custom server-side validation
Data Passing Techniques
• ViewData
• ViewBag
• TempData
• Session
• Query String
• Cookies
Assessment #1
• Mock-up test
• Assignment
3
Page
Module 4
Entity Framework
• What is ORM
• ORMs used with .NET
• Understanding Entity Framework
• Advantages of Entity Framework
Data Modeling Approaches
• Entity Framework Data Modelling Approaches
• Choosing DB First, Model First or Code First
Code First Modeling
• Defining Mapping using Data Annotation
• Implementing CRUD Operations
• Defining Mapping using Fluent API
Database Migration, DB Procedures and Functions
• Entity Framework Code First Migrations
• Updating Database when the Model Changes
• Calling Stored Procedures and functions
• Code First with existing Database
Database First Modeling
• Creating Model from Database
• CRUD Operations
• Updating Model when the Database Changes
• Changing and Updating Mapping
• Calling Stored Procedures
Model First Modeling
• Creating Model
• Creating Database from Model

Module 5
Repository Design Pattern and Unit of Work Design Patterns
• Understanding Repository and UOW Design Pattern
• Need of Repository Design Pattern
• Need to Unit of Work Design Pattern
• Implementing Repository and UOW Design Pattern
Dependency Injection
• Understanding Dependency Injection
• Need of Dependency Injection
• Implementing DI
WebGrid: Listing, Paging and Sorting
4

• Creating Custom Paging Method

Page
 • Using WebGrid for Listing, Paging and Sorting
• Ajax WebGrid
Assessment #2
• Mock-up test
• Assignment

Module 6
Introduction to Angular2+4 & Angular5
• Introduction to Angular
• Advantages of Angular
• Angular1 vs. Angular2
• Browsers Support
Get Started with Angular5
• Setting up an Angular App
• Running an Angular App
• Understanding Angular folder structure
• Angular Initialization Process
Angular Building Blocks: Components, Modules, Decorators
• Understanding Component
• Creating a Component
• Understanding Modules
• Understanding Decorators
Databinding
• Understanding Data Binding
• Attribute Binding
• Two-way Data Binding
• Event Binding etc.
Routing
• Understanding Routing
• Defining Routes
• Routing Building Blocks – Routes, Router Outlet and Router Link

Module 7
Directives and Pipes
• Built in Directives - ngIf, ngFor, ngSwitch etc.
• Creating Custom Directives
• Angular2 Pipes
• Creating Custom Pipes
Angular Forms and Controls
• Introduction to Angular Forms
5

• Creating Angular Form

Page
 • Angular form input controls
• Angular form validation
• Angular form and controls properties
Services
• Introduction to Services
• Creating Services
• Data sharing using Services
Assessment #3
• Mock-up test
• Assignment

Module 8
ASP.NET Web API
• Introduction to SOA
• Introduction to REST
• REST Principles
• Understanding ASP.NET Web API
• Choosing between WCF and WebAPI
ASP.NET Web API Controller & Actions
• Understanding Controller & Actions
• Creating Controller
• Creating Actions
Database Operations and Postman
• CRUD Operations using Web API
• Using Postman for testing Web API
• Consuming Web API using ASP.NET MVC
Angular SPA
• Setting Up Angular App using Visual Studio
• Building and Running Angular using Visual Studio
• Consuming Web API using Angular

Module 9
Unit Testing
• What is Unit Testing
• Advantages of Unit Testing
.NET Unit Testing
• .NET Unit Test Frameworks
• Understanding Mocking
• Advantage of Mocking
• Writing, Debugging and Running Unit Tests Cases
6
Page
Angular Unit Testing
• Angular Unit Testing Framework
• Unit Testing with Jasmine and Karma
• Writing, Debugging and Running Unit Tests Cases

Module 10 (Project: Online Shopping Site Development)

Discussing Project Architecture
• Understanding Application layers
• Discussing Application Entities Properties
• Discussing Relationship among Application Entities
Developing Project
• Designing Application Architecture
• Developing DAL layer using Entity Framework Code First
Implementing Design Pattern
• Developing BAL layer
• Repository Design Pattern
• User Login Process
• Dependency Injection
Module Development
• Creating Admin Module using Area
• Creating User Module using Area
Forms Authentication
• Understanding Forms Authentication
• Customizing principal
• Implementing custom Forms Authentication
ASP.NET MVC Pipeline and Filters
• ASP.NET MVC Pipeline
• ASP.NET MVC Filters
• Extending ASP.NET MVC Filters
• Configuring ASP.NET MVC Filters
Assessment #4
• Mock-up test
• Assignment

Module 11 (Project: Online Shopping Site Development)

Securing ASP.NET MVC App
• Implementing Security using Custom Authentication Filter
• Implementing Authorization using Custom Authorization Filter
• Passing Logged in User Info Across the App
7
Page
Category and Product Listing
• Category CRUD Operations
• Product CRUD Operations
Bundling & Minification
• Understanding Bundling & Minification
• Minimize number of static files requests
Web API and Angular
• Developing Web API for shopping Cart
• Setting Up Angular with ASP.NET MVC
• Developing Shopping Site Store using Angular
Shopping Cart
• Creating Shopping Cart
• Adding Products to Shopping Cart
• Removing Products from Shopping Cart

Module 12 (Project: Online Shopping Site Development)

Payment Gateway
• Understanding Payment Gateway Process
• Integrating Payment Gateway
• Sending/Receiving data to and from Payment Gateway
• Placing order
Error Logging
• Understanding ELMAH
• Configuring ELMAH
• Saving errors into database
Securing ASP.NET Web API
• Understanding Token based Security
• Implementing Token based Security
• Customizing principal
• Implementing Authorization
Deployment
• Deployment on IIS 8
Page
Assessments
Dot Net Tricks allows its esteemed users to take your skills to the next level with articles, books and courses on the most
popular programming languages. Skill Assessments are good for anyone and everyone practicing technology.

In less than 10 minutes, with our skill assessments having 20 questions, you can identify your knowledge gaps and
strengths. Your results tell you, how much you know, and what you need to learn. Here at Dot Net Tricks, you can learn
the essential skills to be an exceptional leader and an outstanding professional.

Dot Net Tricks assignments help the professionals to work on real-world projects and to get an edge in their careers and
make their lives better. This training program includes 4 mock-up tests and 4 assignments.

Mockup-Tests objectives
At the completion of mockup-tests, attendees will be able to;

• Monitor their learning progress

• Evaluate themselves
• Crack their technical interview first round with objective questions

Assignments objectives
At the completion of assignments, attendees will be able to;

• Gain confidence to work on ASP.NET MVC project with latest technologies

• Evaluate their development skills
• Prepare themselves for real-application development

Project Details
Description
You will learn how to develop an online shopping site. The site will show the list of products to User/Customer. A user can
purchase products and see the previous order history. Here, admin will be responsible for adding products, categories and
approving customer order.

The application will use n-tier architecture with extensible approach. We would be using payment gateway to do online
payment and finally publishing it on IIS.

Project Architecture
The primary goal of this architecture is to share as much code as possible across the web application and further reuse
existing code for mobile apps development if necessary.

This architecture will help you to develop web application with the recommended design patterns and practices.
9
Page
What you will learn through project?
At the completion of project, attendees will be able to;

• Create shopping cart using Angular

• Integrate payment gateway
• Create Application core layer using Entity Framework Code First approach
• Create Repository layer using Repository and Unit of Work design pattern
• Decouple modules using Dependency Injection
• Break a project into multiple modules using ASP.NET MVC Areas
• Create Service layer using Web API
• Scale application for Phone, Tablets, Laptop & Desktop using Bootstrap
• Consuming Web API using Angular
10

• Do errors logging by using ELMAH

Page

• Optimize web pages performance

 • Secure application based on user roles
• Authenticate/Authorize user using ASP.NET MVC custom filters
• Securing ASP.NET Web API using Token based security
• Publish the app on IIS

Contact Us
• For more information about the course, visit: www.dotnettricks.com/training/mvc-angularjs-development
• Feel free to call us at +91 11 330 34100 or email us at [email protected]

11
Page