Building from Scratch

Build from Scratch

Setup

ng new angular-app-starterkit --style=sass
cd angular-app-starterkit```
ng serve

Install Font-Awesome

• npm install --save font-awesome
• .angular-cli.json

    "apps": [
      {
        ...
        "styles": [
          "styles.scss",
          "../node_modules/font-awesome/scss/font-awesome.scss"
        ],
        "addons": [
          "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
        ]
        ...
  

Install Bootstrap

• npm install --save [email protected]
• npm install --save bootswatch
• /src/styles.sass

  @import "~bootswatch/dist/yeti/_variables.scss"
  @import "~bootstrap/scss/bootstrap.scss"
  @import "~bootswatch/dist/yeti/_bootswatch.scss"
  

Create a Home Component

• ng g component home
• /src/app/home/home.component.html

  <div class="jumbotron">
    <h3>Welcome to the Event Manager!</h3>
  </div>

Adding routes for Home Component

• /src/app/app.module.ts

  ...
  import { RouterModule } from '@angular/router';
  ...
  @NgModule({
    ...
    imports: [
      ...
      RouterModule.forRoot([
        {
          path: '',
          redirectTo: '/home',
          pathMatch: 'full'
        },
        {
          path: 'home',
          component: HomeComponent
        }
      ])
    ],
    ...
  })

Create Main Page Content