O'Reilly logo

AngularJS Directives Cookbook by Fernando Monteiro

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating tab directives

In this recipe, we will see how to use another important interface component, Tabs, using the $http function to load some content.

Getting ready

To accomplish this task, we will create a controller and use the get method of the $http function to retrieve the contents of a JSON file, but first, let's create the JSON content.

We are still using the same code base of the previous example.

How to do it…

  1. Create a new JSON file and name it tab-content.json, and add the following code:
    [
        {
            "title": "Dynamic Title 1",
            "content": "Dynamic content 1"
        },
        {
            "title": "Dynamic Title 2",
            "content": "Dynamic content 2"
        }
    ]
  2. A simple array with two properties, save the file in the home directory. Append the following code in the homeCtrl.js file ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required