Category Archives: Javascript

Angular 1.5 : A guide to build components

[Source: https://www.sitepoint.com/building-angular-1-5-components/] In Angular 1, components are the mechanism which allows you to create your own custom HTML elements. This has been possible with Angular directives in the past, but components build on the various improvements that have been made to Angular and enforce best practices in how they are built and designed. In this […]

Angular2 – Custom project & Workflow setup

An alternative to create the project with the Angular CLI. A custom way. Create Angular applications with a Webpack based tooling. Official doc: https://angular.io/docs/ts/latest/guide/webpack.html Initializing the project We run npm init to create a package.json. Setting up the basic project files Lets make the folder structure and blank files: src folder src/app folder src/app/main.ts: Compiles the application with […]

Angular2 – Unit testing – introduction

Introduction This Section only provides an Introduction to Unit Testing an Angular 2 App. It’s NOT a detailed Guide about that neither is it a detailed Introduction to Unit Testing in general. Check out the “Further Resources” (last Lecture in this Module) to dive deeper into these topics. Why units tests? Analyzing the testing setup (as created by […]

Angular2 – Angular animations

Making Animations work with Angular 4 With the release of Angular 4, the general syntax of Angular Animations didn’t change. However, the animation functions were moved into their own package and you now also need to add a special module to your imports[]  array in the AppModule. Specifically, the following adjustments are required: You probably […]

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’; […]