CODEWITHSUNDEEP
javascriptangularjswidget
Le Qs
Le Qs

Reputation: 805

How to build a data widget the angular way

I have a widget which comprises of a side bar and the content area. The sidebar has a tree component with several tree items. When a tree item is clicked,it fetches its own data and injects the data into the content div.

data widget

I am using ajax get to fetch the data from the server and inserting into the content.

While going through angular,i found this method http which makes http requests to a specified server.

In my data widget,i am using jquery and html5 and no angular.The widget works but i am curious how angular js would have approached the building of the same widget.

What are some concepts from angular js that i could have used to come up with the same widget?.

Upvotes: 0

Views: 1775

Answers (1)

paul trone
paul trone

Reputation: 702

Here's a real basic concept of how I would create a widget:

The widget would be composed of controller, service, and template:

Controller

  • handles click events
  • triggers updates in the UI

Service

  • makes the actual REST calls to retrieve the data

the tree/tabs on the sidebar of your app would be linked to click events in the controller:

markup

<a ng-click="getContent(tabNumber)">tab label</a>

and here's where you display the tab content: 

<div class="content-area">{{ contentArea }}</div>

controller

this function gets executed on click from the view:

...
$scope.getContent = function(tab) {
  TabService.getContent(tab)
  .then(function(response) {
    // update the view
    $scope.contentArea = response.data.content;
  });
}

service

the service is then called from the controller's function: 

app.service('TabService', function($http) {
  return {
    getContent: function(tab) {
      return $http.get(....);
    }
  }
});

Here's a real basic working example of those pieces:

http://plnkr.co/edit/Tr5OIdwh1QLqOJFfr3xZ?p=preview

Upvotes: 1

Related Questions