Usage

Jump to bottom

Vadim Fedorenko edited this page Apr 19, 2017 · 7 revisions

Angular CLI usage

Create new project (if you starting from scratch)

ng new project-name
cd project-name

Install ngx-fullpage

npm install ngx-fullpage

Import MnFullpageModule module

// ... Other imports ...
import { MnFullpageModule } from 'ngx-fullpage';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MnFullpageModule.forRoot() // Don't forget to call .forRoot() static method
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Update app.component.html template

<div mnFullpage>
  <div class="section welcome-section fp-section fp-table">
    <div class="fp-tableCell">
      1
    </div>
  </div>
  <div class="section welcome-section fp-section fp-table">
    <div class="fp-tableCell">
      2
    </div>
  </div>
  <div class="section welcome-section fp-section fp-table">
    <div class="fp-tableCell">
      3
    </div>
  </div>
</div>

Update scripts section in .angular-cli.json with jquery and fullpage.js modules path

{
  "project": {
    "name": "project-name"
  },
  "apps": [
    {
      
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/fullpage.js/dist/jquery.fullpage.js"
      ], 
        
    }
  ]

You are done. Run npm start !