Tom Anderson: Directing AngularJS with ASP.Net MVC

Now that we have some basic layout in place, it is time to start creating and using some declarative html in our new AngularJS ASP.Net MVC site.

One of the things that are not out of the box with ui-bootstrap is the jumbotron. Since it is a really simple one to make, lets create a directive for it.

In the shared folder in the app directory, let’s create a new jumbotron.directive.js.

My.AngularJS.Module.directive('jumbotron', [function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '@',
            lead: '@'
        },
        template: '<div class="jumbotron"><h1>{{ title }}</h1><p class="lead">{{ lead }}</p><p data-ng-transclude></p></div>'
    };
}]);

This is very exactly what our existing jumbotron looks like in our home-view.html page.

Now before we use this directive, let’s explain it a bit first.

restrict: ‘E’ – this is restricting the directive usage to an element <jumbotron>. There are three other options with restrict ‘A’ for attribute, ‘C’ for class, and ‘M’ for comment. You can combine any of the options to support multiple, but in our case, we just want it to be an element for more declarative html.
replace: true – this signifies that we want to replace the dom element with our template, this is pretty common with element type directives.
transclude: true – transclusion is an angular thing, basically it means “translate and include” the body of the element. You can read a really good article from Omkar Patil on transclude.
scope: {} – this is our custom scope declaration for this directive.
- propertyName: ‘@’ this one is a bit interesting, there are a few different ways of doing this, first and foremost, propertyName: ‘@’ is the same as propertyName: ‘@propertyName’. Leaving out the name of the property is just a shortcut if they match. What this is doing is setting the property value from the attribute with the same name. There are three different modes for settings these properties, the @ sign, which is just a value pass, the = sign, which is a binding, and the & which is a function.
template: ‘html here’ – this is the template that is used for the directive, it can either be inline like above, or it can be a template file, or script element. We aren’t going to cover templating just yet, just be mindful that there are different ways of setting them.
controller: – this is a very simple directive, therefore it doesn’t need a controller, but you can specify one here. We will cover controllers in a future blog post.

Now that we have our custom directive, we can swap out the ugly html that we have in our home-view.html with the new jumbotron directive.

<jumbotron title="AngularJS" lead="HTML enhanced for web apps!">
    <a href="http://angularjs.org/" class="btn btn-primary btn-large">Learn more »</a>
</jumbotron>

Now that is much more declarative than our previous html block! And the layout didn’t change at all (good thing).