Gallery view using Bootstrap Thumbnail

Angular Bootstrap doesn’t have any special directive to create or display the thumbnails for the gallery view; hence, we will be using the regular Bootstrap classes to create our view.

Let’s open the views/gallery.html file and write the following code:

<h1>Gallery</h1>
<div class="thumbnails">
   <div class="col-md-4" ng-repeat="pic in pictures">
      <img ng-src="{{pic.url}}">
      <h3>{{pic.title}}</h3>
      <p> {{pic.summary}}</p>
   </div>
</div>

Save the file and switch to your browser to see your gallery page in action. Ensure your images take the full width of the column by adding the following CSS lines:

.thumbnails img{
width:100%}

Note

In case the page doesn’t show up, open up the console either in Firebug or Chrome developer tools to see if any JavaScript errors are throwing up. Try and fix these errors to get your page to work.

Adding the star rating

Let’s make our gallery page a little more interesting by adding in the star rating feature. Thanks to Angular Bootstrap, adding this feature is as simple as adding one line of code in the partial. So, let’s open up the app/views/gallery.html file and add the following highlighted line:

<h1>Gallery</h1>
<div class="thumbnails">
   <div class="col-md-4" ng-repeat="pic in pictures">         
   <img src="{{pic.url}}">
   <rating ng-model="rate" max="max" readonly="isReadonly" ></rating>
          <h3>{{pic.title}}</h3>
          <p> {{pic.summary}}</p>
   </div>
</div>

In the app/scripts/controllers/gallery.js controller, we simply need to define the following values

$scope.rate = 0;
$scope.max = 10;
$scope.isReadonly = false;

Save the file and view the gallery page in the browser. It should now look like the following screenshot:

Adding the star rating

Building data grids using NG-Grid




Tables or data grids are something that we need to add in our applications quite often. At the beginning, creating tables is fairly simple; you simply create a <table> tag and populate the rows and columns. However, as you proceed, things get complicated; you will be asked to allow sorting on columns, or you will have to paginate through multiple rows and, at times, you will even be asked to allow inline editing like Excel.

Thanks to NG-Grid, creating such feature-rich data grids in angularjs has become very easy.

Adding the NG-Grid component

NG-Grid is not a part of Angular Bootstrap and needs to be added separately. Let’s use Bower to download the components for NG-Grid. In your terminal, navigate to your project folder, and type in the following command lines:

cd hl
bower install ng-grid

You should now be able to see the ng-grid folder and the files within the bower_components folder.

The next thing is to include the ng-grid JS and CSS files in our index.html file. Add the following highlighted line in your app/index.html file to include the ng-grid CSS file:

<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="bower_components/ng-grid/ng-grid.css">
<link rel="stylesheet" href="styles/main.css">

Note

Make sure that the main.css file is the last file being called so that whatever style customization that you write in the main.css overrides the others.

Add the ng-grid JS file as highlighted in the following code snippet:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/ng-grid/ng-grid-2.0.11.min.js"></script>

Next, we need to add the ngGrid dependency to hlApp. We’ll do this by adding it in our app/scripts/app.js file as follows:

angular.module('hlApp', ['ui.bootstrap','ngGrid'])

Now that we have NG-Grid added to our projects, let’s create the routes, controllers, and partials for the subscribers page.

Open up the terminal and run the following command:

yo angular:route subscribers

Once we are done with this, we are all set to start working on our subscribers view.

In most practical cases, we would call a web service that would return the list of subscribers. We can simulate a web service response by creating a static JSON file and putting in some dummy values.

Let’s create a file in the app folder named subscribers.json and add in the following dummy JSON data:

[
{"no": "1","name":"Betty", "loyalty": 3,"joinDate":"3/5/10"},
{"no": "2","name":"John", "loyalty": 5,"joinDate":"3/5/05"},
{"no": "3","name":"Peter", "loyalty": 6,"joinDate":"3/5/10"},
{"no": "4","name":"Jaden", "loyalty": 7,"joinDate":"10/12/12"},
{"no": "5","name":"Shannon", "loyalty": 9,"joinDate":"22/01/08"}
]

Let’s see how to load this data into our controller.

Add the following highlighted code within the SubscribersCtrl controller located in the app/scripts/subscribers.js file:

.controller('SubscribersCtrl', function ($scope,$http) {
$http.get('http://localhost:9000/subscribers.json').success(function(data){
   $scope.subscribers =data
})
})

From the preceding code, you’ll notice that we are injecting the $http service into our controller, and we use the $http.get method to make an HTTP request to the subscribers.json file.

The $http service will return a promise that contains two methods, namely success and error.

Within the success method, we populate our subscribers model with the returned data.

Now that the model is ready, we need to initialize NG-Grid, so let’s initialize ng-grid as follows:

$scope.gridOptions = { 
    data: 'subscribers'
};

Our work on the controller is done. Let’s open the app/views/subscribers.html partial and add the markup for the grid using the following lines of code.

<h1>Subscribers</h1>
<div class="gridStyles" ng-grid="gridOptions">
</div>

We’ll also need to define the width and height of the grid. We’ll do this by setting the width and height properties in the CSS.

Open up the app/styles/main.css file and add the height and width properties to the .gridStyles class.

.gridStyles{
    width:940px;
    height:300px;
}

Note

It is important to define at least the height property so that NG-Grid knows the area within which it should render the grid. If you miss out the height property, NG-Grid will by default take the height of the parent container, which sometimes will display just one row of data when you scroll.

Save the file and refresh the browser to see NG-Grid in action. Click on the column headings to see them sorted.

Note

Sometimes, you’ll need to do a hard refresh to let NG-Grid know about any CSS changes that you would have made.

Right now, NG-Grid uses the model property names as the column headings. Many a times, this would not be ideal as one would want to define their own custom headers. This is possible by defining the Column Definitions property in gridOptions.

To add the Column Definitions property, open the app/scripts/controllers/subscribers.js file and add the following highlighted code:

$scope.gridOptions = { 
    data: 'subscribers',
        columnDefs: [
        {field:'no', displayName:'No.'}, 
        {field:'name', displayName:'Name'}, 
        {field:'loyalty', displayName:'Loyalty Score'},
        {field:'joinDate', displayName:'Date of Joining'}]
};

Save the file and navigate to the browser to see the new column heading take effect.

Now, the obvious question that arises is: how do we customize the alternating row colors? This can be done by simply overriding the default odd and even row classes by adding the following classes to the app/styles/main.css file:

.ngRow.even {
    background: AliceBlue;
}
.ngRow.odd {
    background: YellowGreen;
}

This should now give you a table grid with alternating rows of light-blue and green backgrounds.