Introduction of ASP.NET MVC and AngularJS

Core concepts and case studyBeginner Level

By: Mohamed Elkhodary

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.

ASP.NET MVCIntroduction

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.

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.

MVC | Create a new app

MVC | Create a new app

MVC | Create a new app

MVC | Create a new app

MVC | Model – View - Controller

MVC | Add a controller

MVC | Add a controller

MVC | Add a controllerWhen 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.

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.

MVC | Add a view

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

MVC | Add a view

View

Controller

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?

MVC | Passing data from the controller to the view

Controller

View

MVC | Passing data from the controller to the view

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.

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

AngularJSIntroduction

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.

AngularJS | What is AngularJS?

How do we tell our HTML when to trigger our JavaScript?

AngularJS | What is AngularJS?

How do we tell our HTML when to trigger our AngularJS?

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

AngularJS | Downloading the libraries

https://angularjs.org/

AngularJS | Try it in Plunker!

https://embed.plnkr.co/dbCEOw/

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

Case StudyLet’s discover how ASP.NET MVC and AngularJS can work together.

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

Thank You