General

npm install -g typings
npm install -g typescript
npm install -g ts-node #REPL typescript node
npm install -g @angular/cli
npm install -g firebase-tools

Update

To upgrade node/npm => https://nodejs.org/en/download/

npm update -g

Start new site that runs on hotend-ms

Manually create a fork (replace ‘${newname}’ with your new project’s name):

git clone https://github.com/beukueb/hotend-ms.git ${newname} && cd ${newname}
git remote rename origin upstream
git remote add origin https://github.com/beukueb/${newname}.git
git remote -v #check remotes
git rm development_notes.org #so hotend-ms is only reference for documentation
npm install
touch src/sites/site-theme.scss

Create `src/sites/default.ts`, as per instructions further in this documentation
`firebase init`
To update to latest hotend-ms version:
- `git pull upstream master`
- to resolve merge conflicts: `git mergetool`

Make Firebase project

https://console.firebase.google.com/
select “Adding Firebase to web app” to copy config

Init angular cli

Setup

https://coursetro.com/posts/code/54/Angular-4-Firebase-Tutorial:-Make-a-Simple-Angular-4-App

ng new hotend-ms
cd hotend-ms
npm install --save angularfire2 firebase@4.8.0
npm install --save normalize.css bootstrap@4.0.0-alpha.6 font-awesome tether
npm install --save @ng-bootstrap/ng-bootstrap

Insert Firebase config in src/app/app.module.ts

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { siteconfig } from '../sites/default';

Add AngularFireModule.initializeApp(siteconfig[“firebase”]), AngularFireDatabaseModule, AngularFireAuthModule => to ngModule imports array
make src/sites/default.js

export const siteconfig = {
    production: false,
    firebase: {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        storageBucket: "",
        messagingSenderId: ""
    },
};

For uploading to firebase storage see: https://github.com/codediodeio/angular-firestarter/

Firebase storage rules

service firebase.storage {
  match /b/rybina-a22ae.appspot.com/o {
    match /images/* {
      allow read: if true; 
    }
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Add routing

https://angular.io/guide/router

Make navigation component: `ng generate component nav` and a component for each route that will be added (also footer)
Add component `<app-nav></app-nav>` to src/app/app.component.html

Add nav html in src/app/nav/nav.component.html

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <a class="navbar-brand" href="/">Restaurant 't Pandreitje</a>
  <ul class="nav navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" routerLink="/" routerLinkActive="active">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/contact" routerLinkActive="active">Contact</a>
    </li>
  </ul>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="https://twitter.com/@pandreitje"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    </li>
    <!--li class="nav-item">
      <a class="nav-link" href="https://github.com/beukueb"><i class="fa fa-github" aria-hidden="true"></i></a>
    </li-->
  </ul>
</nav>

Add: import { RouterModule, Routes } from ‘@angular/router’; => to src/app/app.module.ts

Add routing config:

//Example
const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'admin', component: AdminComponent },
  //{ path: 'hero/:id',      component: HeroDetailComponent },
  /*{
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },*/
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  //{ path: '**', component: PageNotFoundComponent }
];

Add `RouterModule.forRoot(appRoutes)` to NgModule->imports

Change src/app/app.component.html to:

<app-nav></app-nav>
<div class="container">
  <div class="starter-template">
    <router-outlet></router-outlet>
  </div>
</div>
<app-footer></app-footer>

Add style

bootstrap and font-awesome

https://medium.com/@beeman/tutorial-add-bootstrap-to-angular-cli-apps-b0a652f2eb2 https://ng-bootstrap.github.io/#/getting-started

Add: @import “~bootstrap/dist/css/bootstrap.min.css”; @import “~font-awesome/css/font-awesome.css”; => to src/styles.css
Modify: “scripts”: [

”../node_modules/jquery/dist/jquery.js”, “../node_modules/tether/dist/js/tether.js”, “../node_modules/bootstrap/dist/js/bootstrap.js”] to .angular-cli.json

Change css default to sass scss

in .angular-cli.json make following change: “styles”: [ “styles.scss” ],
rename ‘styles.css’ to ‘styles.scss’
in styles.scss: @import “~bootstrap/scss/bootstrap.scss”;

Start with different bootstrap template

Add ng-bootstrap widget

https://ng-bootstrap.github.io/#/home

Add `import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;` to src/app/app.module.ts
Add `NgbModule.forRoot()` to the NgModule imports array

Carousel

Add to component ts:
- `import {NgbCarouselConfig} from ‘@ng-bootstrap/ng-bootstrap’;`
- `NgbCarouselConfig` to Component providers array
- `constructor(config: NgbCarouselConfig) { // customize default values of carousels used by this component tree config.interval = 10000; config.wrap = false; config.keyboard = false;}`

Add to component html

<ngb-carousel>
  <ng-template ngbSlide>
    <img src="assets/images/home/pand1.jpg" alt="View on terrace" width="100%">
    <div class="carousel-caption">
      <h3>Restaurant 't Pandreitje</h3>
      <p>where you feel at home ...</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="assets/images/home/pand2.jpg" alt="Terrace" width="100%">
    <div class="carousel-caption">
      <h3>Comfortable dining atmosphere</h3>
      <p>On the terrace or inside ...</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="assets/images/home/pand3.jpg" alt="Evening view" width="100%">
    <div class="carousel-caption">
      <h3>Evening setting</h3>
      <p>For every occasion ...</p>
    </div>
  </ng-template>
</ngb-carousel>

Add images to assets/images/

i18n

https://angular.io/guide/i18n

add `i18n` as attribute to each element that needs translation
- help translator with description/meaning and id `i18n[=”[meaning|]description[@@id]”]` > e.g. <ng-container i18n“An introduction header for this sample”>Hello i18n!</ng-container>
add `i18n-attributeName` for attributes that contain text that needs translation
from app root, to make translation files: `./node_modules/.bin/ng-xi18n –i18nFormat=xlf`
- if not working try first: `npm install @angular/compiler-cli @angular/platform-server –save`
`mkdir src/locale`
for each language that needs translation: `cp messages.xlf src/locale/messages.nl.xlf`
translate with XLIFF editor
compile for each language: `./node_modules/.bin/ngc –i18nFile=./locale/messages.es.xlf –locale=es –i18nFormat=xlf –missingTranslation=error`

locale info

add `Inject` to @angular/core imports
add `@Inject(LOCALE_ID) locale: string` to contructor parameters
in constructor, e.g. `console.log(locale);`

placeholder images

/width[xheight][.type][/bgcolor][/fgcolor][?text=lorem]

- http://via.placeholder.com/900x300.png/333333/000000?text=carousel1

hotend-ms specific

components

ng g c nav
ng g c home
ng g c footer
ng g c admin
ng g c hotend
ng g c hotlist
ng g class hotend/hotend

modules

ng generate module app-routing --flat --module=app
ng generate module site-components --flat --module=app

services

mkdir src/app/hotservices
for service in primitives hotends renderTemplateFunctions; do
  ng generate class hotservices/$service
  ng generate service hotservices/$service --module=app
  serviceName=${service^}Service #capitalize service name
  # Filepath does not work for camelcased service like renderTemplateFunctions -> replace capitals with '-' followed by lowercase
  #sed -i -e 's#// Hotservices#// Hotservices \'$'\n'"import { ${serviceName} } from './hotservices/${service}.service';#g" src/app/app.module.ts
  #sed -i -e "s#providers: \[#providers: \[${serviceName},#g" src/app/app.module.ts
done

hook up service

add service import to component file that uses the service
inject service into a component’s constructor

markdown enabled textarea input

npm install ngx-markdown --save

”../node_modules/marked/lib/marked.js” in `.angular-cli.json` scripts
`import { MarkdownModule } from ‘ngx-markdown’;` in `app.module.ts`
MarkdownModule.forRoot() in `app.module.ts` imports
following works as proof of concept: <div *ngIf=”hotend.dataTree” [innerHTML]=”hotend.dataTree.testarea.area[0].value | markdown”></div>

hotend-ms site implementation

create src/sites/default.ts

// Site configuration
export const siteconfig = {
    production: false,
    firebase: { // get info from https://console.firebase.google.com/
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: ""
    },
};

// Site routes
import { Routes } from '@angular/router';
import { HomeComponent } from '../app/home/home.component';

export const siteroutes: Routes = [
    { path: 'home', component: HomeComponent },
];

create site specific components

ng g c sites/blogmsg --module=site-components
ng g c sites/bloglist --module=site-components

Deploy

in root `firebase init`
in app/app.module.ts:
- add `import { LocationStrategy, HashLocationStrategy} from ‘@angular/common’;`
- add `{ provide: LocationStrategy, useClass: HashLocationStrategy }` to NgModule providers

change `firebase.json` to

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]/*,
      "rewrites": [ {
          "source": "**",
          "destination": "/index.html"
      } ]*/
  }
}

`ng build –prod`
`firebase deploy`

Documentation

observables

import { of } from ‘rxjs/observable/of’; => then with `return of(some_array)` you can return an observable emiting one value, the array

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

General

Update

Start new site that runs on hotend-ms

Make Firebase project

Init angular cli

Setup

Insert Firebase config in src/app/app.module.ts

Add routing

Add style

bootstrap and font-awesome

Change css default to sass scss

Start with different bootstrap template

Add ng-bootstrap widget

Carousel

i18n

locale info

placeholder images

hotend-ms specific

components

modules

services

hook up service

markdown enabled textarea input

hotend-ms site implementation

create src/sites/default.ts

create site specific components

Deploy

Documentation

observables

FilesExpand file tree

development_notes.org

Latest commit

History

development_notes.org

File metadata and controls

General

Update

Start new site that runs on hotend-ms

Make Firebase project

Init angular cli

Setup

Insert Firebase config in src/app/app.module.ts

Add routing

Add style

bootstrap and font-awesome

Change css default to sass scss

Start with different bootstrap template

Add ng-bootstrap widget

Carousel

i18n

locale info

placeholder images

hotend-ms specific

components

modules

services

hook up service

markdown enabled textarea input

hotend-ms site implementation

create src/sites/default.ts

create site specific components

Deploy

Documentation

observables