Usage: AngularClass angular2 webpack starter

AngularClass/angular2-webpack-starter usage

1. Create new project (if you starting from scratch)

git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git project-name
cd project-name
npm install

2. Install ngx-fullpage

npm install ngx-fullpage

3. 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 { }

4. Update app.component.ts component

// ... Other imports ...

import 'jquery'; // Import jQuery
import 'fullpage.js'; // Import fullpage.js

/*
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css'
  ],
  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>
  `
})
export class AppComponent implements OnInit {
  public angularclassLogo = 'assets/img/angularclass-avatar.png';
  public name = 'Angular 2 Webpack Starter';
  public url = 'https://twitter.com/AngularClass';

  constructor(
    public appState: AppState
  ) {}

  public ngOnInit() {
    console.log('Initial App State', this.appState.state);
  }

}

5. Tell webpack about jQuery ... Edit config/webpack.common.js plugins section and add the following lines at the end of it.

  plugins: [
    ...
    
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery'
    })
  ]

6. You are done. Run npm start and open http://localhost:3000! Scroll down, scroll up!