Serving Static HTML

ionic-v1
1

Howdy,

I’m a noob with ionic and Angular.

I’ve got a large static html file that i want to have show up in my app.
It’s rules for a board game so there are some anchors and the file itself is pretty large ~96k.

I’ve basically put the file as a templates/rules.html

  .state('app.rules', {
    url: "/rules",
    views: {
      'menuContent': {
        templateUrl: "templates/rules.html"
      }
    }
  })

but when i fire up the app i get, at best 1 page that i can’t scroll through, or in some cases just a blank page.

I’ve tried wrapping it in <ion-view> <ion-content>

Any suggestions?

Thanks

2

Can You set up a simple codePen?
Are You sure the issue lays with Your html file? Or maybe Your routing?
I suggest You start with making sure the routes work - by setting up a super simple template with for example just one line of HTML wrapped in <ion-view> and then work Your way to a more complicated situation.

3

Actually it looks like markdown doesn’t add a <body> tag and that was causing issues.

Now i have to figure out how to get my anchors to work (checking out http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs)

Thanks!

4

In Your index.html You should already have a <body> tag. Since You are creating a one-page application this is the only place this tag should appear.

As far as links go, if You want to move the user to the right section when they click links You should look into Angulars $location (docs here).

I hope that helps!

5

weird about the body thing. although i do have a menu app going on and that was only 1 tab in the menu.

I went with this in the controller for my anchors. it seemed to work well.

$scope.scrollTo = function(id) {
   $location.hash(id);
   $ionicScrollDelegate.anchorScroll();
 };

Thanks again!

1 Like