1.
Introduction of ASP.NET MVC
and AngularJS
Core concepts and case study
Beginner Level
By: Mohamed Elkhodary

2.
AGENDA
• ASP.NET MVC
• What is MVC?
• Separation of concern.
• Create a new app.
• Add a controller.
• Add a view.
• Add a model.
• AngularJS
• What is AngularJS?
• Directives.
• Downloading the libraries.
• Definitions.
• Case Study
• Using ASP.NET MVC and AngularJS in one of company’s product.

3.
ASP.NET MVC
Introduction

4.
MVC | What is MVC?
The ASP.NET MVC is a web application framework developed by
Microsoft, which implements the model–view–controller (MVC)
pattern.
• A model represents the classes that represent the data of the app and that
use validation logic to enforce business rules for that data. .
• A controller represents the classes that handle browser requests, retrieve
model data, and then specify view templates that return a response to the
view.
• A view accepts necessary information from the controller and renders a user
interface to display that information.

5.
MVC | Separation of concern
• Separate the different aspects of the app (input logic, business logic,
and UI logic).
• Provide a loose coupling between these elements.
• This separation helps you manage complexity, because it enables you
to work on one aspect of the implementation at a time without
impacting the code of another.
• For example, you can work on the view code without depending on
the business logic code.

6.
MVC | Create a new app

7.
MVC | Create a new app

8.
MVC | Create a new app

9.
MVC | Create a new app

10.
MVC | Model – View - Controller

11.
MVC | Add a controller

12.
MVC | Add a controller

13.
MVC | Add a controller
When you run the app and don’t supply any URL segments, it defaults
to the “Home” controller and the “Index” method specified in the
template line highlighted below that can be find in the Startup.cs file.

14.
MVC | Add a controller
The controller now doing the “VC” portion of MVC - that is, the view
and controller work. The controller is returning HTML directly.

15.
MVC | Add a view

16.
MVC | Add a view
• The Index method below uses a view template to generate an HTML
response to the browser.
• Controller methods (also known as action methods), such as the
Index method below, generally return an IActionResult (or a class
derived from ActionResult), not primitive types like string.
Controller

17.
MVC | Add a view
View
Controller

18.
MVC | Add a view
Displayed data “Hello from our View Template!” is hard-coded.
The MVC application has a “V” (view) and you’ve got a “C” (controller),
but how to pass dynamic data?

19.
MVC | Passing data from the controller to the
view
Controller
View

20.
MVC | Passing data from the controller to the
view

21.
MVC | Controller vs View
• Controllers are responsible for providing whatever data or objects are
required in order for a view template to render a response to the
browser.
• A best practice: A view template should never perform business logic
or interact with a database directly.
• A view template should work only with the data that’s provided to it
by the controller.
• Maintaining this “separation of concerns” helps keep your code clean,
testable and more maintainable.

22.
MVC | Add a model
• In Solution Explorer, right click the Models folder > Add > Class.

23.
AngularJS
Introduction

24.
AngularJS | What is AngularJS?
• AngularJS or Angular.js is an open-source web application framework
mainly maintained by Google.
• A client-side JavaScript Framework for adding interactivity to HTML.
• It aims to simplify both the development and the testing of such
applications by providing a framework for client-side model–view–
controller (MVC) architecture.

25.
AngularJS | What is AngularJS?
How do we tell our HTML when to trigger our JavaScript?

26.
AngularJS | What is AngularJS?
How do we tell our HTML when to trigger our AngularJS?

27.
AngularJS | Directives
A Directive is a marker on a HTML tag that tells Angular to run or
reference some JavaScript code.

28.
AngularJS | Downloading the libraries
https://angularjs.org/

29.
AngularJS | Try it in Plunker!
https://embed.plnkr.co/dbCEOw/

30.
AngularJS | Definitions
Directives
HTML annotations
that trigger
JavaScript
behaviors
Modules
Where our
application
components live
Controllers
Where we add
application
behavior behind
the DOM
Expressions
How values get
displayed within the
page

31.
Case Study
Let’s discover how ASP.NET MVC and AngularJS can work together.

32.
References
• http://www.asp.net/mvc
• https://angularjs.org/

33.
Thank You