Building Strongly-typed AngularJS Apps with ASP.NET MVC 5

Just because you are using AngularJS doesn't mean you can't leverage the strengths of C# and ASP.NET MVC. This course will teach you how to leverage Angular and ASP.NET MVC together more effectively.
Course info
Rating
(332)
Level
Intermediate
Updated
Sep 8, 2015
Duration
2h 59m
Table of contents
Introduction
Assembling the Building Blocks
Strongly-typed Binding
Building Strongly-typed Forms with AngularJS
Supporting Angular Validation with Data Annotations
Building Angular-powered Templates
Building Reusable Directives and Helpers
Closing Thoughts
Description
Course info
Rating
(332)
Level
Intermediate
Updated
Sep 8, 2015
Duration
2h 59m
Description

It may sound crazy, but you can indeed create strongly-typed AngularJS applications by leveraging ASP.NET MVC. In this course, you will learn about advanced techniques for passing data from your strongly-typed C# code to your client-side JavaScript. You'll also learn to build strongly-typed HtmlHelper extensions that can transform a lambda expression into a complete, Angular-powered form group (including client-side validation!), or that can generate an entire form for you by using your model and its Data Annotations.

About the author
About the author

Matt is a Senior Software Architect specializing in ASP.NET web application architecture and development. He is also an avid testing practitioner and is the creator of two open-source testing frameworks. When he isn’t writing code, he’s often busy writing about code or helping others improve their own development skills.

More from the author
More courses by Matt Honeycutt
Section Introduction Transcripts
Section Introduction Transcripts

Assembling the Building Blocks
Hi, I'm Matt Honeycutt and this is module two of Building Strongly Typed JS Apps With ASP. NET MVC 5. In this module we'll start laying the foundation for our strongly typed framework. By the end of this module we'll have a small collection of helpers that we can build on going forward. Our goal for this module is to build solutions to some common problems so that we don't have to continually readdress them and that will also serve as useful tools for your own applications. First, we'll create a custom action result that we can use to pass data from our MVC controllers to our client-side AngularJS layer in a consistent, strongly typed way. There will be times that when we want to pass data directly from Razor to our JavaScript code on page load. So, we'll also create a HTML helper that we can use. Our client-side JavaScript code is going to need access to some of our server side C# action methods too and we want to be sure we don't put brittle magic strings in our JavaScript that aren't going to be refactor friendly. So, we'll build some helpers that will allow us to turn a strongly typed lambda expression into a URL that we can then use on the client-side and we'll see how we can inject that URL into our Angular objects. Finally, we'll see how we can use Razor for our AngularJS templates. Going forward this will allow us to use our C# models to generate a lot of our client-side markup. It may not sound like much but these pieces are going to provide the foundation for much of what we'll build throughout this course but as you'll see there's actually quite a bit to each of them.

Building Reusable Directives and Helpers
Welcome to module seven of building strongly typed AngularJS applications with ASP. NET MVC 5. I'm Matt Honeycutt. And in this module, we're going to look at how we can leverage ASP. NET MVC to simplify how we work with angular JS directives as well as how we can build our own helpers and directives to solve common problems in our applications. We've already been using directives in this course. The validation stated in our form fields is made visible by a couple of directives we created. But we don't explicitly call these directives. They're called automatically by our form helpers. Sometimes though, directives may provide functionality that's more akin to a complete controller component. Like this directive that provides multi-select capabilities. In this module, we'll look at some of these directives and we'll see how we can leverage ASP. NET MVC and Razor to simplify their usage. We'll start by looking at one of my favorite libraries for AngularJS UI Bootstrap. We'll then create an HTML helper to wrap one of those directives that UI Bootstrap provides which will allow us to apply the directive in our views and templates in a strongly typed way. After that, we'll move on to another of my favorites, the UI grid directive. This directive addresses an extremely common UI pattern displaying data in a table. We'll build our own directive that utilizes UI grid interally and we'll build an HTML helper that makes it easy to add rich grids to our views. Our helper will need to flex in some new ways though, so we'll implement a simple, fluent API that will enable us to change the default behavior of our grid when necessary. Before we dive into the code, let's take a quick look at the UI Bootstrap library.