Our Index view is what’s displayed when we first open the app. It is probably a good idea to list all of our contacts here, as we’re going to need quick access to the information stored.
so you are new to angularjs ? follow up these tutorials i am sure these will help you a bit !
A table seems like it would be a good option, but first we need to think about what’s going to be stored in our contact manager. Here’s a list of possible items:
- Email address
- Phone number
- Gravatar (A global avatar service from the creators of WordPress)
Not all of this information will need to be displayed in our Index view. Don’t forget that we also have the option to click through to the contact so we can display more information there.
A sensible option seems to be name, email address, and phone number displayed in our table with a link to click through.
Open up your Index’s partial, which is located at
assets/partials/index.html. Currently, this file is completely blank, so let’s add a page header to begin with:
<div class="page-header"> <h1>All Contacts</h1> </div>
Remember, we don’t need to include a container around this, as our partial is nested within our app’s main
index.html file on the route and we’ve already included the container there.
<table> <thead> <tr> <th>Name</th> <th>Email Address</th> <th>Phone Number</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>Karan Bromwich</td> <td>firstname.lastname@example.org</td> <td>01234 56734</td> <td><a href="#">View</a></td> </tr> <tr> <td>Declan Proud</td> <td>email@example.com</td> <td>01234 567890</td> <td><a href="#">View</a></td> </tr> </tbody> </table>
That looks like a pretty good structure to me, but it’s not looking too great on our page. Like most components, Bootstrap does include styles for tables, but we need to include an extra class to activate them. Simply add the
table class to our opening table tag and Bootstrap will tidy it up immediately by adding some much-needed borders and making it span the full width.
There are also some secondary classes we can include to add a bit of extra pizzazz to our table:
table-bordered: includes a border around all sides of the table and all cells.
table-striped: adds a grey background to alternating rows to make it easier to read.
table-hover: changes the background of the row when hovered upon.
table-condensed: removes some of the top and bottom padding, making it take up less vertical height.
Apart from these classes, there are also some classes that can be applied to rows or cells specifically, which color the background of the rows to give it some context:
active: adds the hover state to the row
success: colors the background green, indicating a successful action
info: uses below to draw attention to the row or cell
warning: indicates that an action may be required and colors the cell yellow
danger: demonstrates an error or problem
For now, I’m just going to add the
table-striped class, but it’s up to you if you want to experiment with some of the other included classes.
Our table is beginning to look great. You’ll notice, however, that on smaller screen sizes the table is cut off horizontally. To combat this, we need to wrap our table in another element that will allow it to scroll at smaller sizes:
<div class="table-responsive"> … </div>
That’s much better, as our content is no longer getting cut off or breaking our responsive layout. The last thing I want to do to our table is turn that view link into a button. Bootstrap comes with a plethora of button styles that we can take advantage of.
All buttons are combinations of the following classes:
- Default button class
- Context class
- Size class
Together, these give us all the control we need to pick the right button for the right occasion. Let’s put these together to create a button that works within our table:
<a href="#" class="btn btn-default btn-xs">View</a>
Our first class here provides some default button styles; the second gives it color (in this case, the default is white), and the final class defines the size of the button. Alternatively, we could have used one of the following classes to change the color of our button:
||White button with a grey border|
||Light blue button|
||Styled to look like a link|
Apart from providing the default size, there are also three classes we can utilize to change the size of our buttons. In the preceding code, we’ve already used
btn-xs to make our button really small, but we could have also used
btn-sm to make it a little smaller than the default or
btn-lg to make it larger.
Our Index view is looking pretty complete to me now, and it’s ready to be populated when we’re ready.