Navigating database relations: Jailer

http://jailer.sourceforge.net/

• DB front end
• Java/Swing
• Navigable FKs

Ngrx

• Official Ngrx example app: https://github.com/ngrx/example-app

• Clear and concise Ngrx tutorial and example that uses Effects to call the backend Service: http://bodiddlie.github.io/ng-2-toh-with-ngrx-suite/

• More about Effects: http://orizens.com/wp/topics/angular-2-ngrxstore-ngrxeffects-intro-to-functional-approach-for-a-chain-of-actions/ 

Angular 2 forms

• Validation: https://angular.io/docs/ts/latest/cookbook/form-validation.html
• Tutorial: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
• Custom form controls: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html#understanding-controlvalueaccessor
• http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel
• https://toddmotto.com/building-tesla-range-calculator-angular-2-reactive-forms 
• Template vs model driven (& FRP): http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Step-by-step building an Angular Material 2 application with Angular CLI

Look no further for up to date but complex Angular 2 seeds and start using Angular CLI.

Angular CLI is now based on Webpack but is simpler.

Versions

• Angular 2.0.0 / 2.0.1
• Material 2.0.0-apha9-3

Project creation

From the command line console (elevated on Windows):

• Upgrade the Node version.
• Install Angular CLI globally: 

npm install -g angular-cli

• Create the project with SCSS support: 

ng new myapp --style=sass

If you are using WebStorm the project creation could also be done with the Angular CLI based.

From here you can always test the application launching it with:

ng serve

Project properties

• Edit package.json and ...
• Set the version.
• Change the license property (or remove it and set private to true).
• Edit index.hmtl and change the title as required.

From CSS to SASS

This is usually automatically done with --style=sass flag on the project creation but reviewing it is suggested.

• Edit angular-cli.json and ...
• Change "styles": ["styles.css"]  to "styles": ["styles.scss"] 
• Change "styleExt": "css" to "styleExt": "scss"
• Rename styles.css to styles.scss
• Rename app.component.css to app.component.scss

Angular 2 version upgrade (Optional)

You can upgrade Angular 2.0.0 to the last stable 2.0.1 version editing package.json and changing the following versions:

"@angular/common": "2.0.1",

"@angular/compiler": "2.0.1",

"@angular/core": "2.0.1",

"@angular/forms": "2.0.1",

"@angular/http": "2.0.1",

"@angular/platform-browser": "2.0.1",

"@angular/platform-browser-dynamic": "2.0.1",

"@angular/router": "3.0.1",    

Material installation

• Install the material module:

npm install --save @angular/material

• Install the HammerJS dependency and its types:

npm install --save hammerjs
npm install --save-dev @types/hammerjs

• Edit app.module.ts and add:

import { MaterialModule } from '@angular/material';

imports: [

  ...

  MaterialModule.forRoot()

]

Material icons linking (Optional)

• Add the Material Icons link on index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Material theme customization (Optional)

• Add a theme.scss file in the src folder (see https://github.com/jelbourn/material2-app/blob/master/src/material2-app-theme.scss).
• Edit angular-cli.json and change "styles": ["styles.css"] to "styles": ["styles.scss", "theme.scss"] 

Favico setup (Optional)

• Remove favico.ico from src (it's a CLI bug, that's not its location)
• Add your own favico.ico to the assets folder
• Edit index.html and change favico.ico to assets/favico.ico  

Backend proxy setup (Optional)

Useful during development to route certain URL requests to a real server (usually REST calls).

• Add a proxy.conf.json file on the project root folder with the following contents:

{

  "/api": {

    "target": "http://localhost:8080/myapp",

    "secure": false

  }

}

You can start using it with: 

ng serve --proxy-config proxy.conf.json

However it could be simplified by editing the package.json and adding a script:

"scripts": {

  "start": "ng serve --proxy-config proxy.conf.json",

}

So you can now launch it easily with:

npm start

Bundling for production 

You can always generate the production bundles on the dist folder with:

ng build --prod --bh /myapp/

However it could be simplified by edidting the package.json and adding a script:

"scripts": {

    ...

    "build": "ng build --prod --bh /myapp/"

},

So you can now launch it easily with:

npm run build

Internet resources

• https://github.com/angular/angular-cli 
• https://github.com/jelbourn/material2-app/tree/master/src