AngularJS - Create the Bootstrap Template

You will learn

Developers writing the HTML5 front-end to modern web applications have many choices of development technologies and frameworks. SAP offers SAPUI5 for front-end development, but it is not the only choice for developing rich SPA (Single Page Applications) on the web.

In this tutorial series, we will explore another technology for SPA development - AngularJS (which we will just call Angular). Angular is a popular web framework, and is used by many companies. This series will build a simple web front end, and connect that to OData services.

AngularJS series

Set up a template using Bootstrap, a very popular open source layout system from Twitter. Bootstrap makes it easy to create good looking web forms without manually writing a lot of CSS, and also has JavaScript tools for creating dialog boxes and other screen elements.

We will also be adding in jQuery, a popular web toolkit. jQuery provides a number of great tools to help change web pages in JavaScript. jQuery is required in order to use Bootstrap properly, so we will load it first.

Set up Bootstrap

Instead of downloading the Bootstrap files directly, we will use a set of HTML tags to automatically download the entire framework when we need it.

Open your index.html file.

First, we will need the jQuery toolkit. Add the following line to your index.html file, between the two <head> tags:

Some of the text may run off the side of the editor. That’s fine, we are just using it to display the features of our layout.

Run the application, and you will see the following screen:

Understanding the Bootstrap layout system

Bootstrap has several benefits that we are using here.

First, it offers a column layout system. This allows us to align text on the page, and keep it organized. In many applications, developers has to use tables to do this effectively. Bootstrap allows us to use the same table alignments, but without having a lot of table html elements (like <tr> and <td>) cluttering up the page.

Even better, the column layouts can be used to specify a different layout on different screen sizes, but all in a single page. This allows developers to create both laptop and mobile pages in one place. (We will demonstrate this in a later tutorial.)

Second, Bootstrap offers a clean form design. Each form element is clearly defined in the HTML, and Bootstrap will take care of alignment, fonts, and all the design elements to make it look professional. Here is an example of a Horizontal Form.

Now that we have the basic framework for a list, let’s add in more details in to each row.

For each row, we would like to display the following information:

Product Name

Packaging Description

Price (including currency)

Availability

Let’s add them to the box. Copy the following html code, and add it between the <h4> and <button> tags:

<p>Description</p>
<p>Price in Euros</p>
<p>Available?</p>

Run your application, and you will see the following screen:

Now we have the fields, but the box doesn’t look very organized. So, lets use Bootstrap again to organize the box. To do this, we are going to use the nesting feature to embed a row inside of an existing element.

To do this, let’s split the box in to two sides, left and right, and move the elements inside the box.

Hey, that looks better! But one more element. We want the user to know they can click on the list (which is why we made each list element a button in the first place), to get more details about this item. To make this clear, we will add a chevron to the end of the row.