Post on 11-Feb-2017
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 | 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