Modal Dialogs with AngularJS and Bootstrap

Modal Dialogs with AngularJS and Bootstrap

A modal dialog is a good way of displaying basic forms to the user, such as a login form, contact form etc. In this post I’m going to cover the basics of using a modal dialog with AngularJS, AngularUI and Bootstrap, giving us a simple modal form with some basic formatting that can be used for a number of scenarios.
First thing to note is that I created this using Visual Studio, so some steps might be different for you, however this is basic enough that it shouldn’t be an issue.
So the first thing is to create a new blank ASP.NET project, and then use Nuget Package Manager to add what we need – in this case that’s AngularJS, AngularJS UI Bootstrap, and Bootstrap.
We’re then going to need a webpage to land on, so create a new index.html file in your project.
In this file add references to the three packages, along with angular-route, in the like so:

The next step is to set up our angular app, so create a folder called ‘app’ in the project. First we want to create a new JavaScript file called ‘ModalDialogsApp.js’.
We don’t want to do too much with the app just now, so just initialise the app and inject ng-route and ui.bootstrap.
We’ll be using ng-route to handling routing in the application later on, and ui.bootstrap is used to make a modal dialog.
The entire file will then look like this:

Now we need our view to display to the user, so under the app folder create a ‘Home.html’ file and a ‘HomeController.js’ file.
Navigate to the newly created ‘HomeController.js’ file and initialise the controller, injecting $scope and $modal, and create an empty function called showModalForm – this will be used later to display the form.
Once done, the controller will now look like this:

The next step is to go to the ‘Home.html’ file and delete all the generated content, and simply replace it with a button that calls the showModalForm function you just created:

Now that the skeleton is set up, we need a way to get to this view, so go back to ‘ModalDialogsApp.js’ and set up the routing to load the view with it’s controller when the user hits ‘/home’ and to redirect there if another address is entered.
So under your app initialisation you’ll have:

In order for the routing to work and the view to be displayed, the app needs to be defined on our main page, and we need to add the references to our JavaScript files. In ‘index.html’ add the references to ‘ModalDialogsApp.js’ and ‘HomeController.js’, and declare the app on the html tag, and the view in the body.
Your ‘index.html’ file should now look like this:

You can now run the app and see the view is being displayed, and that trying to move to another page on the site redirects you back to ‘/home’!
However, nothing is actually happening, so we need to create the form and hook it up to our button.
We need somewhere to keep our form, so create a new folder under the ‘app’ folder called ‘ModalForm’. In this folder create two more files, ‘formTemplate.html’ and ‘formController.js’.
Go to the newly created ‘formController.js’ and initialise the controller, injecting $scope and $modalInstance. Then we want to add a function called submitForm, but leave it blank for now – we’ll use this later to close our dialog.
We also need an object creating for our form to bind to, so create an object called accountDetails. Your controller should now look like this:

Now we need to set up our form to be displayed, so go to the ‘formTemplate.html’ file you created. Remove all generated code as we don’t need it, and add two divs, one for the header and one for the body.
Set the class for the header div to ‘modal-header’ and the class for the body div to ‘modal-body’, these will give us some formatting on the form.
Inside the body, create the form. I added the form-horizontal class to mine, but that’s really just personal preference for the layout.
In the form add two fieldsets, in the first one add a couple of fields for the user to interact with – I added name and email fields to match the object we created in the controller earlier.
In the second fieldset add a submit button that calls the submitForm function, we’ll use this to close the form later.
Your ‘formTemplate.html’ should now look something like this:

In order to make use of this controller, we need to add a reference to the controller we created in our ‘index.html’ file, and finally we need to add the functionality to open the dialog in ‘HomeController.js’ on our showModalForm function, so the controller will now look like this:

Running the app now you can click the button and a modal dialog will be displayed!
Clicking outside of the form will close the dialog, but clicking our submit button currently does nothing. You’ll also notice that the formatting on the form looks pretty terrible.
So lets add another fieldset, improve the formatting, and set up binding on the form.
To improve the formatting we can simply make use of the Bootstrap grid system – this lets you layout components over 12 columns, giving us a nice and easy, and responsive, way of displaying our controls.
I opted to split the grid with 3 columns for the label, and 9 for the inputs. This is done by adding the ‘col-sm-3’ class to the label, and wrapping the input in a div that has the ‘col-sm-9’ class.
So the first form group will now look like this:

The inputs on the form need binding to an object on the controller so that user input can be used. This is done using ng-model, and binding each input to the accountDetails object we created on the controller earlier.
A form with one legend and one set of input looks a bit barren, so I added another fieldset with two more inputs in the same pattern as before. With the new inputs, we also need to remember to add values to the object on the controller so we have something to bind to.
So the full ‘formTemplate.html’ file looks something like this:

The final thing we need to do is to close the dialog when submit is clicked. To do so go to the ‘formController.js’ file and modify the submitForm function to call close on the $modalInstance we injected earlier:

I also created a variable and set it to the accountDetails object, this allows you to break in the function and see that the binded values have been updated with whatever was input on the form.
And that’s it, a simple modal form that can be used in a number of scenarios.
In my next post I’ll show how I added some basic client side validation to the form so that the user can only submit valid data.

  • Rosen Petrov

    Could we call the modal dialog on different url e.g. /home/accountDetails using $routeProvider e.g.
    modalDialogsApp.config(function($routeProvider) {
    $routeProvider
    .when(“/home”, {
    templateUrl: “app/Home.html”,
    controller: “HomeController”
    })
    .when(“/home/accountDetails”, {
    templateUrl: ‘app/ModalForm/formTemplate.html’,
    controller: ‘formController’
    })
    .otherwise({
    redirectTo: “/home”
    });
    });