- DB front end
- Java/Swing
- Navigable FKs
Monday, October 24, 2016
Monday, October 17, 2016
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/
Wednesday, October 5, 2016
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
- Template vs model driven (& FRP): http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Saturday, October 1, 2016
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.
npm install --save-dev @types/hammerjs
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:
- Create the project with SCSS support:
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:
- Install the HammerJS dependency and its types:
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
Subscribe to:
Posts (Atom)