https://github.com/hellsan631/angular-fullpage.js

An angular directive for fullpage.js
https://github.com/hellsan631/angular-fullpage.js

angular fullpage

Last synced: 5 days ago
JSON representation

An angular directive for fullpage.js

• Host: GitHub
• URL: https://github.com/hellsan631/angular-fullpage.js
• Owner: hellsan631
• Created: 2015-08-27T07:09:12.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2019-07-20T03:31:06.000Z (over 5 years ago)
• Last Synced: 2024-10-09T02:29:43.831Z (about 1 month ago)
• Topics: angular, fullpage
• Language: JavaScript
• Homepage: http://hellsan631.github.io/angular-fullpage.js/
• Size: 8.99 MB
• Stars: 82
• Watchers: 7
• Forks: 31
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[fullPage.js](https://github.com/alvarotrigo/fullPage.js) Angular Directive

====

## Enhanced by [BrowserStack](http://browserstack.com/)

[![Code Climate](https://codeclimate.com/github/hellsan631/angular-fullPage.js/badges/gpa.svg)](https://codeclimate.com/github/hellsan631/angular-fullPage.js)

[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT)

A simple [fullPage.js](https://github.com/alvarotrigo/fullPage.js) directive that allows

the use of fullPage.js within an angular app. There are several issues when using the vanilla jquery

version with an angular application that uses an internal router for displaying pages, and this repo

aims to solve them.

[Example](http://hellsan631.github.io/angular-fullpage.js/) - [Source](https://github.com/hellsan631/angular-fullpage.js/tree/gh-pages)

### Installation

Install via __Download__,

__Bower__

```bash

bower install --save angular-fullpage.js

```

or __NPM__

```bash

npm install --save angular-fullpage.js

```

====

Make sure to include both this directive and fullPage.js. This package isn't a replacement.

_index.html_

```html

```

In your angular modules, include the Directive

_app.module.js_

```js

angular

  .module('app', [

    'fullPage.js'

    ...

  ]);

```

Add your standard [fullPage.js structure](https://github.com/alvarotrigo/fullPage.js/#required-html-structure),

along with the attribute full-page

_someView.html_

```html



    
Some section

    
Some section

    
Some section

    
Some section



```


### Options

If you'd like to add some options to the fullpage, just include them in an object in your controller, and add the options attribute to your html.

_someView.html_

```js

function MainController(){

  var _this = this;

  _this.mainOptions = {

    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],

    navigation: true,

    navigationPosition: 'right',

    scrollingSpeed: 1000

  }

}

```

_someView.html_

```html



    
Some section

    
Some section

    
Some section



```


[You can even make them dynamic.](http://hellsan631.github.io/angular-fullpage.js/#/dynamic)