Partial page updates with AngularJS

Question

I am building an AngularJS application that has a sidebar and a main content area. Both are populated by separate invocations of the $http service to retrieve some JSON data. The stuff in the sidebar is basically a table of contents and the intent is that clicking on one of the sidebar items will cause the main area to be updated.

My initial stab at this involved putting the sidebar and main area into one partial and then associating it with a controller that does both retrievals. The application has a route that associates the controller to a URL, and the links in the sidebar access these URL with the appropriate parameter that will cause the desired content to appear in the main area. All this works, but it does cause the whole page to refresh. The "partial" really is a "total".

What I'd like to do is somehow cause a click on the sidebar links to trigger a refresh of the main content area only. One thought is to somehow split it into two controller/partial pairs and figure out a way to cause sidebar clicks to request an update. I'm not sure about the mechanics of doing this, though. Another approach is to keep the stuff in one controller and use some kind of shared state that would trigger this update. I attempted to do this by setting an ng-click directive on the links, but this did not update a scope variable, as I had hoped.

Is there a recommended way of structuring an application to achieve this kind of AJAX-driven partial page update? It seems like a fairly common case, but I haven't mastered enough of AngularJS to get a solution.

Sounds like you havn't set up hashbang url's or html5 mode if your page does a full refresh.. also as @JosephSilber said, read up on ng-view — Roger Johansson
– Roger Johansson, Commented Aug 16, 2013 at 23:26

Anton · Accepted Answer · 2013-08-16 23:19:59Z

8

This is what I'm doing:

I have 2 services, 1 for the sidemenu and the other for the main content. They are both injected into the controller.

To handle cross service calls I use $broadcast to send events.

Works really well and is very clean code.

additional info on using services based on comment

For the sidemenu i have a shared menu service, that way all controllers can use the same menu.

The maincontent service doesnt have to be shared, but i use them because services don't loose their data when the controller goes out of scope. If I didn't the controller would have to use some other mechanism to repopulate its data. For me a service handles it without having to code anything

To show the different views i use the following main layout html

<div >
    <!-- left menu -->
    <div id="left" ng-include src="menu.view" ></div>

    <!-- main content -->
    <div id="main" ng-include src="maincontent.view"></div>
</div>

the controller

function myControllerCtrl($scope, $rootScope, menuService, maincontentService) {
    $scope.menu = menuService;
    $scope.maincontent = mainContentService
}

the menu service

app.factory('menuService', ['$rootScope', function ($rootScope) {
    var service = {
        view: 'leftmenuview.html',

        MenuItemClicked: function (data) {
            $rootScope.$broadcast('menuitemclicked', data);
        }
    };
    return service;
}]);

the main content service

app.factory('maincontentService', ['$rootScope', function ($rootScope) {
    var service = {
        view: 'maincontentview.html',

        MenuItemClicked: function(data){
          //handle updating of model based on data here
        }
    };

    $rootScope.$on('menuitemclicked', function (event, data) { service.MenuItemClicked(data) });

    return service;
}]);

edited Aug 16, 2013 at 23:19

answered Aug 16, 2013 at 1:37

Anton

7,7095 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Joseph Silber Over a year ago

That was me, and it was a mistake. Wanted to click to upvote. Sorry. Now that I realized my mistake, it wouldn't let me change it anymore, unless you make an edit to your post.

Joseph Silber Over a year ago

I made a small edit to your post, so that I can revert the vote.

user2643044 Over a year ago

I think I understand the injection part, but can you explain the two services? I've seen references to services, but I think it was in the context of the app creating a single "shared" service injected into two different controllers. This seems to be the "inverse" of that technique. Where are the services defined and what does each one do?

Anton Over a year ago

@user2643044, services can be shared. for the sidemenu i have a shared menu service, that way all controllers can use the same menu. the maincontent service doesnt have to be shared, but i use them because services don't loose their data when the controller goes out of scope.

user2643044 Over a year ago

@Anton, this sounds pretty close to what I'm after. It sounds like your app splits this into (at least) two controllers, sidebar and main. Is there a partial for each one, and if so, what AngularJS directives cause both of them to be loaded? Also, is your service declared up in the module declaration?

|

Collectives™ on Stack Overflow

Partial page updates with AngularJS

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related