Routing through several html files with angularjs

Question

I'm new to all web and coding in general, not just angular. So sorry if this is obvious, how do I handle a large majority of templates that could all use the same controller?

My thinking was I could treat a folder of html files (my slides) as if they were in an array, and create two navigation buttons that could simply move back and forth through the array.

A way I've tried to accomplish this is as follows:

.when('/lesson1/slide/:slideCount', {

template : function($routeParams) {

return 'pages/lessons/lessons01/slide' + $routeParams.slideCount + '.html'

},

controller: 'lessonsCtrl'

})

But this just displays the string "pages/lessons/lessons01/slide1.html" at my ng-view instead of putting in the html found on in that file. I've also tried

.config(function ($routeProvider, $routeParams) ...

templateUrl: 'pages/lessons/lessons01/slide' + $routeParams.slideCount + '.html'

This one gives a blank ng-view at every .when, not just the specific one I'm trying to get my html slides to work on. Is there another way of doing this that works? The end goal to all this to create a more interactive powerpoint type presentation I could post on the web. Hope that makes sense.

Update:The content on the slides will be a couple images, a few blocks of text revealed on a time delay or click, and an audio clip. Eventually I'd like to add a way to record and play back audio within these slides too, but I'll cross that bridge when I get there.

depending on what the data in all those html files looks like (considering they could all use the same controller), you might try just moving the data into a json object. It would make things much simpler if that's possible — wesww
– wesww, Commented Aug 17, 2015 at 16:34
Perhaps, but I haven't done much with that yet. I'll look up more about json today on w3schools, etc. Updated question with slide contents. — Dookie67
– Dookie67, Commented Aug 17, 2015 at 16:45

just95 · Accepted Answer · 2015-08-17 16:54:16Z

2

You just have to pass a function to templateUrl instead of a string:

$routeProvider.when('/lesson1/slide/:slideCount', {
  templateUrl: function($routeParams) {
    return 'pages/lessons/lessons01/slide' + $routeParams.slideCount + '.html';
  },
  // ...
});

answered Aug 17, 2015 at 16:54

just95

1,0998 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Routing through several html files with angularjs

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