The Journey from MVC to Angular

Wouldn't you like to move your MVC pages to Angular to increase your web page performance, and to make your web pages quicker and more maintainable? This course will guide you step-by-step to this goal.
Course info
Rating
(84)
Level
Beginner
Updated
Jul 21, 2016
Duration
2h 28m
Table of contents
Course Overview
Why You Need More Client-side Code
Convert MVC Tables to Angular Templates Using Data Binding
Convert MVC Drop Down Lists and Perform Searching Using Angular
Handle UI State and Exceptions with Angular Data Binding
Add, Edit, and Delete with Angular
Don't Forget the Validation of Data
Description
Course info
Rating
(84)
Level
Beginner
Updated
Jul 21, 2016
Duration
2h 28m
Description

Speeding up your MVC or web form applications is always worthwhile, but seldom easy. However, you can use Angular to make this process easier. In this course, The Journey from MVC to Angular, you're going to learn to slowly convert an MVC webpage to use Angular for all your searching, listing, adding, editing, deleting, and validation of data. First, you'll learn why you need more client side code and how it can benefit you. Then, you'll learn how to add, edit, and delete without postbacks. Finally you'll learn some tips and trick on the validation of data. By the end of this course you'll feel comfortable using Angular to handle standard web page functionality.

About the author
About the author

Paul loves teaching and technology, and has been teaching tech and business topics for over 30 years. Paul helps clients develop applications, and instructs them on the best use of technology.

More from the author
Angular Security Using JSON Web Tokens
Intermediate
2h 50m
Apr 2, 2018
More courses by Paul D. Sheriff
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone, my name is Paul Sheriff, welcome to my course, The Journey from MVC to Angular. I am the president and CEO at PDSA, Inc. , a custom development shop specializing in web applications. Hey, wouldn't you like to speed up your MVC, or web form applications? Well, Angular can help you do that. In this course, you're going to learn to slowly convert an MVC web page to use Angular for all your searching, listing, adding, editing, deleting, and validation of data. Some of the major topics you will learn include: why you need more client-side code, replace HTML tables built using Razer to use Angular databinding, calling the Web API from Angular, and handling exceptions, add, edit, and delete data without post backs, and some tips and tricks on the validation of data. By the end of this course you will feel comfortable using Angular to handle standard web page functionality. Now I would suggest that before beginning this course you're familiar with MVC, the Web API, JavaScript, and HTML. I hope you'll join me on your mission to learn Angular with my course entitled, The Journey from MVC to Angular at Pluralsight. com.

Why You Need More Client-side Code
Hello everybody, Paul Sheriff here with Pluralsight. This is, The Journey from MVC to Angular. This module is called, Why You Need More Client-Side Code. Now the goals for this particular module are to see why you want to gradually move from server-side to client-side code. We're going to do this by taking an existing MVC application, and moving it step-by-step to Angular. We're going to element a lot of code in this process, and we're going to see how to speed up your application. So why a step-by-step approach? Well, a lot of times we have applications that are just too large to rewrite or to move all at one time. What we want to do sometimes is just speed up one or two pages because those are the ones that our users are complaining about. We want to move our server-side code slowly so we don't break everything all at one time, we can kind of replace little chunks at a time. There are cases where sometimes, hey we want to keep some MVC functionality, and just add some Angular where it's appropriate. For this course, I am assuming that you are an MVC developer, that you want to learn to speed up your web application by using more Web API calls, and gradually moving to Angular. I also assume that you're familiar with JavaScript, and jQuery, HTML, and CSS, and have at least a little bit of familiarity with the Web API. Should you need any help with any of these particular technologies there are a lot of great Pluralsight courses to help you. There's Angular Fundamentals, Angular Front to Back with the Web API, Implementing an API in ASP. Net Web API, The Basics of Programming with JavaScript, and Consolidating MVC Views Using Single Page Techniques.

Convert MVC Tables to Angular Templates Using Data Binding
Hello everybody, Paul Sheriff here with Pluralsight. This module is Convert MVC Tables to Angular Templates Using Data Binding. The goals of this particular module are to add Angular to your project, call a Web API, and do data binding in Angular. We're also going to take a look at how to transform data using Angular filters. There are a couple of key pieces to an Angular application. The first one is a module. Now a module we define typically in a file called app. module. js. The second key piece is a controller. Now a controller, for this particular course, we're going to define inside of product. controller. js. Now what is a module? Well, a module is like a namespace in C#, it's a wrapper around some other various Angular things such as a controller, or controllers, directives, filters, components, there's a few other things that you wrap a module around. Now, a controller is like a class in C#, it's a JavaScript object, it contains data and functions.

Handle UI State and Exceptions with Angular Data Binding
Hello everybody, Paul Sheriff here with Pluralsight. This module is handle UI State and Exceptions with Angular Data Binding. There's a few goals for this particular module. We're going to create an object literal that will help us maintain our page state. We'll have a constant for each mode such as the list mode, the add mode, or the edit mode. We're going to create a setUIState function. This function will be called from many different other functions to change the page state. Finally, we'll learn how to handle exceptions in our Angular applications.