Introduction of ASP.NET MVC and AngularJS
Download as PPTX, PDF0 likes1,097 views
The document introduces ASP.NET MVC and AngularJS, explaining their core concepts, such as the MVC pattern and directives in AngularJS. It outlines the process of creating a new application with controllers, views, and models in ASP.NET MVC, while emphasizing the separation of concerns for better code maintainability. A case study is also presented to demonstrate how ASP.NET MVC can work in conjunction with AngularJS.
Introduction of ASP.NET MVC and AngularJS
- 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.
- 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.
- 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.
- 33. Thank You