AngularJS - Add a header and modal dialog

AngularJS - Add a header and modal dialog

Adding a header to the Bootstrap page, and a modal dialog box for product details.

Details

You will learn

In this tutorial series, we will explore another technology for Single Page Application (SPA) development - AngularJS (or just Angular). Angular is a popular web framework in North America, and is used by many companies for both internal and client-facing systems. These tutorials will parallel our SAPUI5 tutorials, building a visual interface using Angular, and connecting it to an OData back end service.

AngularJS series

Step 6: Add additional screens to our Angular application. First, we will add a header to our list box, and second, we will add a Detail dialog box when the user clicks on a row.

Step 1: Add navbar

The list on the screen is nice, but it would be better if it had a header describing the data below. We can add that header bar in Bootstrap. (Later, we will add to that header bar, and put in an automatic filter component.)

To add a simple title to our list, we start with a navbar. The navbar CSS tag puts a permanent “floating” header on the top of the page, which will not move when the page is scrolled.

The first line sets up a scope variable called selectedProduct. This gives us a place to store the product that was clicked, so the dialog box knows what to display.

The second variable is a function. This will be called when a row is clicked.

Step 9: Bind click event

Finally, we need to attach the Angular code to the HTML, when the user clicks on an object. To do this, we will use another built-in Angular function, called ng-click.

Modify the following attribute to your <button> element:

ng-click="selectProduct(product)"

Step 10: Run the application

Now run your application. When you click on a row, a dialog box will appear.

Step 11: Update dialog header

The ng-click attribute has sent the selected row to the function selectProduct() in our controller. Then we saved that passed variable in to our scope (as $scope.selectedProduct). Now we can use that variable to populate our modal dialog box.

Update the header of the dialog box. Replace the existing <h4> tag with the following HTML: