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.
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.