How to Populate the Index view in angularjs

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:

  • Name
  • Email address
  • Phone number
  • Address
  • Website
  • Notes
  • 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>[email protected]</td>
      <td>01234 56734</td>
      <td><a href="#">View</a></td>
    </tr>
    <tr>
      <td>Declan Proud</td>
      <td>[email protected]</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.

Recommended :  Learn to use angularjs Templates to Create Views

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:

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.

take a look at this article about adding Dom based templates in angularjs

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:

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:

Class NameDescription
btn-defaultWhite button with a grey border
btn-primaryBlue button
btn-successGreen button
btn-infoLight blue button
btn-warningOrange button
btn-dangerRed button
btn-linkStyled 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.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares