Using AngularJS ui router with this

[David Trinh]

I am creating a full page scrolling web app. I have something like this for a view

<div class="section">Section 1</div> 
<div class="section">Section 2</div> 
<div class="section">Section 3</div> 

And my route looks like this:

.state('home', {
            url: '/',

            templateProvider: function($templateCache) {
              return $templateCache.get('partials/home.html');
            }
        });

I want my routes to look like this:

.state('home', {
            url: '/',

            templateProvider: function($templateCache) {
              return $templateCache.get('partials/home.html');
            }
        })
        .state('section1', {//code}),
        .state('section2', {//code}),
        .state('section3', {//code});

My URL are formatted: www.example.com#section1, www.example.com#section2, etc.

How do I get the route to change each time a user scrolls to a different section?

[Mathew Kleppin]

Like I said previously, its a problem with the angular router. You may have luck however by setting a state variable in the url, and using that as a scrollTo thing.

here is some code that might work

//home.routes.js
.state({
  name: 'home',
  url: '/',
  controller: 'HomeController'
})
.state({
  name: 'home.section',
  url: '/section/:sectionIndex',
  controller: 'HomeController'
})
;

//home controller
function HomeController($stateParams, $timeout) {
  if ($stateParams.sectionIndex) {
    $timeout(function(){
      $.fn.fullpage.silentMoveTo($stateParams.section);
    });
  }
}

So basically your loading setting a pagestate inside of the url, and then telling the fullpage.silentMoveTo function to go to that page when the page loads. There might be a small animation associated with the page moving to that slide, but without some more serious work (like moving the animation before the transition and adding it back-in afterwards) there isn't really a way to avoid this.

Your final url would look like this:
http://yourwesbite.com/#/section/1

[Marcus Molchany]

Hey this is closed but I wanted to mention a few things that worked when I encountered this.

The main issue comes from setUrlHash in fullPage.js (linking to line numbers but this may not work in the future). fullPage attempts to change the location.hash of the application and this conflicts with ui-router.

The first solution was proposed in this stackoverflow answer. This only really works if you just need a marketing scrolling page and don't need a controller or different controller for each substate. The idea is capture change to the index page (or any state's) URL hash, handle the state change with a noop and allow fullPage to continue to scroll the page to that section.

//home.routes.js
.state('home', {
  url: '/',
  controller: 'HomeController'
});

$urlRouterProvider.when(/section[0-9]+/, function () {
  // no op
});

$urlRouterProvider.otherwise('/404');

<!-- home.html -->
<div data-anchor="/section/section1"> ... </div>
<div data-anchor="/section/section2"> ... </div>
<div data-anchor="/section/section3"> ... </div>

...

<li data-menuanchor="/section/section2">Section 2</li>
<li data-menuanchor="/section/section3">Section 3</li>

The second solution is a bit more stable. In the ui-router config create a nested state to home or whichever state has fullPage scrolling, and only set the URL for this state. When setUrlHash is called the state will change, ui-router will handle the state change correctly without changing the template and the page will scroll.

//home.routes.js
.state('home', {
  url: '/',
  controller: 'HomeController'
})
.state('home.section', {
  url: 'section/:sectionIndex'
});

<!-- home.html -->
<div data-anchor="/section/section1"> ... </div>
<div data-anchor="/section/section2"> ... </div>
<div data-anchor="/section/section3"> ... </div>

...

<li data-menuanchor="/section/section2">Section 2</li>
<li data-menuanchor="/section/section3">Section 3</li>

Disclaimer: Both of these approaches break the back button, however the second solution allows the urls to be entered and navigate to the correct state in the application (the first does not).

[Malindu Warapitiya]

Hope there will be a fix for this issue without changing my current URL. 🎱