Category Archives: Javascript

Angular2 – Deploying an Angular App

Introduction Deployment preparations and important steps Build you app for production (—prod  –aot) Set a correct <base> element Redirect all 404 errors to return index.html where Angular launch. Routes defined in Angular (such as /recipes)  are not configured in the server, so it will return a 404 error by default. So you will need to […]

Angular2 – Authentication and Route protection

Module introduction We want allow only logged in users to modify recipes How Authentication works in SPAs In SPAs authentication is managed by tokens More about jWT JSON Web tokens: https://jwt.io/ https://jwt.io/introduction/ Creating a signup page and route We create a Sign up form page and his route “/signup”. All associated to a auth/signup.component Setting up […]

Angular2 – Making Http Requests

Introduction Traditional Web apps against SPAs Example App & Backend setup We use firebase to make a test database: https://ng-http-cb90d.firebaseio.com/ NOTE: Keep in mind set database rules to get free access: { “rules”: { “.read”: “true”, “.write”: “true” } }   Sending requests (example POST) With the Angular Http class we can create Observables. But the […]

Angular2 – Handling forms: Reactive approach

Introduction to the Reactive Approach Form is created programmatically and synchronized with the DOM Reactive : Setup In the app.module we need to comment out FormsModule and add ReactiveFormsModule app.module.ts import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; // import { FormsModule } from ‘@angular/forms’; import { ReactiveFormsModule } from ‘@angular/forms’; […]

Angular 2 – Using pipes to transform output and making http requests

Pipes are about transforming output Using Pipes Some pipes are coming built in in Angular: {{ server.instanceType | uppercase }} | {{ server.started | date}} Parametrizing pipes {{ server.started | date:’fullDate’ }} Where to learn more about pipes https://angular.io/docs/ts/latest/api/#!?query=pipe For example , for the date pipe we can see all the options we have available: […]

Angular 2 – Handling forms

Regarding forms, what Angular does for us is giving us a object representation of the form in order to handle fetching data and form validation. And also we will be able to handle form submit without reloading the page (as it is a SPA). Two approaches There are two ways of handling forms with Angular. […]

Angular 2 – Observables

Observables are another way of handling async tasks. Angular2 use them a lot. Usually are objects wrapping some data source which emits events, such as button clicks , https requests, etc. Analyzing a Built in observable We already used observables when subscribing to changes int the route params: this.route.params.subscribe( (params: Params)=> { this.id = +params[‘id’]; […]

Angular 2 – Routing

Setting up and loading routes We set up two routes: http://localhost:4200/page1 http://localhost:4200/page2 app.module.ts import { Routes, RouterModule } from ‘@angular/Router’; import { Page1Component } from ‘./page1/page1.component’; import { Page2Component } from ‘./page2/page2.component’; const appRoutes: Routes = [ // { path: ”, Page1Component}, { path: ‘page1’, component: Page1Component}, { path: ‘page2’, component: Page2Component} ]; … imports: […]

Angular 2 – Using services and dependency injection

Injecting a custom service into components A Service is created when we need a centralized component which serves some functionality to multiple components. Also we would expect to be a singleton instance. app.component.html <button type=”button” (click)=”testLoggingService(‘one’)” name=”button”>Test Logging Service One</button> <button type=”button” (click)=”testLoggingService(‘two’)” name=”button”>Test Logging Service Two</button> app.component.ts import { Component } from ‘@angular/core’; import […]