Building the articles view

Let’s create the articles view by first creating our data model within the app/scripts/controllers/articles.js file.

Let’s delete the default awesomeThings array and replace it with the following lines of code:

$scope.posts = [
{
title:"Almonds are good for Health",
content:"Almonds contain high amounts of HDL which helps reduce cholestrol.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus quam leo, id tristique sapien viverra eu. Maecenas ipsum lectus, suscipit auctor tristique in, venenatis ut nisl. Quisque eget bibendum libero. Nam nec mi augue."
},
{
title:"Sugar is bad for health",
content:"Sugar besides being bad for diabetes, it also causes overweight and obesity problems. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus quam leo, id tristique sapien viverra eu. Maecenas ipsum lectus, suscipit auctor tristique in."
},
{
title:"Cut down your carbs!!!",
content:"Sugar besides being bad for diabetes, it also causes overweight and obesity problems.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus quam leo, id tristique sapien viverra eu. Maecenas ipsum lectus, suscipit auctor tristique in, venenatis ut nisl. Quisque eget bibendum libero. Nam nec mi augue."
      }

       ];

By now, I’m sure you are well versed of the structure of the preceding data model.

With regard to generating the dummy lorem lipsum text, www.lipsum.com is one of the best places to generate your summary text. Nowadays, many IDEs too have snippets, plugins, or macros to generate the lorem lipsum code.

Note

Lorem lipsum was invented sometime in the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. Since then, it has been used extensively in the type setting and printing industry and has also made it into the electronic age.

Accordions using Angular Bootstrap




Now that our model is ready, let’s get to the partial. We will display the preceding model data within an accordion.

As per our routes setting, ArticlesCtrl is mapped to the views/articles.html file; hence, we’ll write our markup in this file.

Open the app/views/articles.html file and write the following code:

<h1>Articles</h1>
<accordion>
   <accordion-group heading=" {{post.title}}" ng-repeat="post in posts">
         {{post.content}}
   </accordion-group>
</accordion>

The first line sets the page title within the Heading tag.

Next, we call our directive to display the accordion. The <accordion> tag can contain multiple <accordion-group> sections, each with a heading attribute and a body area.

Using ng-repeat, we simply loop through the rows of data in our model and place them within the heading and content area.

Save the file and navigate the browser to see your articles page in action. It should look something like the following screenshot:

Accordions using Angular Bootstrap

Building the image gallery

The next step is to build our image gallery, so let’s create the controller, partial, and routes for it using the Yeoman command as follows:

yo angular:route gallery

We will start with the creation of our model in the app/scripts/controllers/gallery.js file.

This time, rather than creating static object models in the controller, we’ll define a set of arrays and create our model dynamically. This would be a much more efficient way of building the models, especially if you have a large amount of data.

Let’s start by defining the various variables and arrays that we will need within the GalleryCtrl controller function as follows:

var pictures =$scope.pictures=[];

var baseURL="http://lorempixel.com/300/180/";

var titles=["Healthy Food","Healthy @ Work","City Life ",
             "Staying Fit","Looking Good","Nightlife !!"] ;

var keywords=["food", "business","city","sports","fashion", 
               "nightlife"];

var dummyText="Lorem ipsum dolor sit amet, consectetur adipiscing 
                elit. Sed sed erat turpis. Integer eget 
                consectetur quam. Sed at quam ut dolor varius 
                condimentum et sit amet odio. "

First, we declare an empty model named pictures.

The next variable we define is baseURL, which holds the base URL for the images that we will show in the image gallery. As you can notice, in this case, we are using images of width 300 and height 180.

Next, titles is the array containing the titles for all the images.

The keywords array holds the list of all the keywords that we will concatenate at the end of baseURL to get relevant images for the gallery.

Finally, the dummyText variable holds some lorem ipsum text that we will add as a description to each of the gallery images.

Now that we have all the variables and arrays defined, the next step is to create the function that will push them into the pictures model.

The function is defined as follows:

$scope.addPics=function(i){
   pictures.push({
         url:baseURL+keywords[i],
         title:titles[i],
         summary:dummyText
    })
}

The addPics function takes in an input parameter i, which does an array push by iterating through the arrays and updating the values for the url, title, and summary properties.

The final step here is to call the addPics function in a loop, incrementing the value of i. This is done as follows:

for (var i=0;i<5;i++){
    $scope.addPics(i);
}

As, for this example, we need about six images, we run a for loop iterating from 0 to 5.

This completes our work on the controller. Now, let’s look at the markup for the gallery partial.