Use fullPage.js in AngularJS

Posted: 2016-08-12, Modified: 2016-11-25   AngularJS fullPagejs
Copyright certificate by blockai

Summary

angular-fullpage.js is a library to use fullPage.js in AngularJS, but the npm version has a problem in event handling, and you need to use GitHub version.

Although fullPage.js also assumes every section is a child of a same parent node, it is difficult in AngularJS. I modified fullPage.js to solve this problem.

This entry explains how to use my fullPage.js in AngularJS.

angular-fullpage.js

The current version of angular-fullpage.js in npm has a problem in event handling, and you need to use the newest source code from GitHub. dependencies in package.json allows GitHub repositores, i.e.

{
  "dependencies": {
    "angular-fullpage.js": "hellsan631/angular-fullpage.js",
    ...
  },
  ...
}

and npm install downloads the newest source code from GitHub.

To activate fullPage.js, you need to add full-page attribute to the parent node

<div full-page>
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  …
</div>

and give options through options attribute. For example, make a controller

class FullpageCtrl {

  constructor() {

    this.options = {
      sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
      scrollingSpeed: 1000,
      onLeave: (index, nextIndex, direction) => {
        // do something
      }
    };

  }

}

and use it from a template

<div full-page options="$ctrl.options">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  ...
</div>

Apply fullPage.js for not sibling nodes

fullpage.js assumes every section is a child of a same parent node, for example

<div full-page>
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  ...
</div>

This constraint might be a problem when you combine components providing sections. Suppose two components component1 and component2, and those templates are

<div class="section" ng-repeat="item in $ctrl.items">
  <!-- some contents -->
</div>

<div class="section" ng-repeat="item in $ctrl.items">
  <!-- some contents -->
</div>

In this case, a parent node of fullpage.js is

<div full-page>
  <component1></component1>
  <component2></component2>
</div>

This template is extended to

<div full-page>
  <component1>
    <div class="section">
     <!-- some contents -->
    </div>
    <div class="section">
     <!-- some contents -->
    </div>
    ...
  </component1>
  <component2>
    <div class="section">
      <!-- some contents -->
    </div>
    <div class="section">
      <!-- some contents -->
    </div>
    ...
  </component2>
</div>

and those sections are not children of a same parent node, which means fullPage.js doesn’t work in such case.

I fixed this problem and my source code is available in GitHub. To use my version, your package.json should have a link to my repository like

{
  "dependencies": {
    "fullpage.js": "jkawamoto/fullPage.js#deeper-section-spike",
    ...
  },
  ...
}

This version searches all nodes to find sections and it might be slower than original version.