Angularjs routing with no HTML changes

Question

I am creating a single page application that shows a table of data on the page. Along the top are several tabs that, when clicked, change the data that is loaded in the page. I would like to make each tab have a unique URL so it can be bookmarked.

Currently I am using Angularjs routes to accomplish this. Basically the route is defined as follows:

Route:

 $routeProvider.
 when('/staticURL/:urlParam', {
    templateUrl: "/partials/table.html",
    controller: 'TableDataCtrl'
 }).
 otherwise({
    redirectTo: '/staticURL/data1'
 });

Controller:

    appControllers.controller('TableDataCtrl', ['$scope', '$routeParams', 
    function ($scope, $routeParams) {
       var thisDrivesData = $routeParams.urlParam;

       //Use loaded url parameter to pull back data 
       //from the server and update $scope. 
}]);

The :urlParam is what tells the controller what data to load into the html table. The html table is held in a partial html file that is pointed to by the templateURL.

The problem with this solution is the HTML is not changing. It is only the data that needs to be re-loaded into the page. It would seem to me there must be a way of keeping the :urlParam to drive the controller but only change the data the controller is using. I also see no need to have a partial html file other than to make routing work. I do notice that the HTML is not being reloaded every time so that is good, but I still am not a fan of needing a separate html file to make this work.

Is there a better way to be using routing? Should routing not be used in this case? If not, what is the recommended way to have angular handle this?

You can try to combine index.html and table.html, and remove ng-view from you index.html, and remove templateUrl from your route config. — Ye Liu
– Ye Liu, Commented Mar 11, 2014 at 20:28
a single-page-application doesn't mean you also have to develop it in a single page. — Eliran Malka
– Eliran Malka, Commented Mar 11, 2014 at 20:34
I am not sure I understand. Do you need to refresh the page or not? The routing looks fine, I am just unsure about what exactly you wanna do. — Alex C
– Alex C, Commented Mar 11, 2014 at 20:39
I do want to refresh the page with the new data that needs to be loaded. From what I understand either template or templateURL is required. Now that I know about template I see about putting a blank string as the template instead of using a templateURL. This may be what I need. Update: As far as my testsing can tell using template: " " causes the logic in the controller to no longer fire. I am not sure why. — EthanTowne
– EthanTowne, Commented Mar 11, 2014 at 20:46
It seems like you should be able to just $scope.watch the $routeParams and then update your data accordingly and see that reflected in the view. — shaunhusain
– shaunhusain, Commented Mar 11, 2014 at 21:00

Josh Bing · Accepted Answer · 2014-03-12 18:32:04Z

One work around is to monitor the URL using the $scope.$watch method, and update your page content appropriately. I have only gotten this method to work with code on a single page, without using partials.

First, merge table.html and your main page.

Next, inject the $location service into your controller, like so:

appControllers.controller('TableDataCtrl', ['$scope', '$location' 
    function ($scope, $location) {
      //controller code
}]);

Next, set $location equal to a variable within the scope, and call the $scope.watch method on the .path method of the location variable:

$scope.location=$location;
//The code below will cause the urlChanged method to fire off whenever the url changes
$scope.$watch('location.path()', urlChanged);

Now, create a method within your controller called, urlChanged (or whatever you want to call it, just be sure to change it in the $scope.$watch as well) and place the code to update your data within that method. You'll probably want to get the url via $scope.location.path() and switch on it to determine which operations to perform as well.

Now, whenever your URL changes, including on initial page load, that method will fire off. Using this method, you will be able create bookmarks to specific url patterns and have the correct data load.

Collectives™ on Stack Overflow

Angularjs routing with no HTML changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related