Create Beautiful Fullscreen Scrolling websites (now with Angular 2)!
This is an Angular 2 fullPage.js port library.
NEW RELEASE 2.0.1: ANGULAR 2 FINAL
Demo
Check out the live demo HERE
Quick Start
Start with SystemJS
Plunker example
AngularClass/angular2-webpack-starter:
WithInstall ng2-fullpage
npm module:
npm install ng2-fullpage --save
Install ambient typings for jquery
library:
npm install @types/jquery --save-dev # or if you prefer "typings" tool typings install jquery --save --ambient
Write some code:
app/app.module.ts:
/** * * File: app/app.module.ts * */ ;; ;;
/*** * File: app/app.component.ts* * If you are starting from scratch replace existing content with the code below* Otherwise update your html template with 'mnFullpage' directive.* */ ;
Update webpack vendors entry file (src/vendor.browser.ts) with 'jquery' and 'fullpage.js' import:
/*** * File: vendor.browser.ts* * Just add 'jquery' module import statement.* */ ;
Start server and open http://localhost:3000 url in browser:
npm run start
Usage
Basic installation
All you need to do is just add [mnFullpage] @Component.directives array and add directive to an html element inside your template:
app/app.module.ts:
/*** * Just add MnFullpageDirective into the @Component.declarations * and MnFullpageService into the @Component.providers arrays* */ ;; ;;
app/app.component.ts:
;
template.html:
<!-- Add fullpage directive to an element --> ...
Advanced usage
Like it is done in most of libraries, you can configure fullpage.js for you goals. There 3 ways to configure fullPage.js:
- Via attributes. Define options like attributes on the same element.
Notice, options must be prefixed with 'mnFullpage' word and written in camelCase style.
;
- Via options object. Use FullpageOptions configuration object to inject options.
Notice to wrap directive in square brackets [mnFullpage] and reference it to your options object
;;
- Mixed. Mix two approaches to configure.
Notice, html element options have less priority than options inside options object.
;;
Services
Service MnFullpageService
contains $.fn.*
static methods for fullPage.js
library.
;;
Troubleshooting
View Encapsulation issue
#94
Thanks to @aamir1995If you get error when you include fullPage.js styles into your component, probably you've faced with Angular 2 ViewEncapsulation issue #94.
Try to update your component: Set value of 'encapsulation' property to 'ViewEncapsulation.None' like this below:
Development
Build
# development npm run build:dev # production npm run build:prod
Watch and build files
npm run watch
Run tests
npm run test
Watch and run tests
npm run watch:test
License
MIT