Category Archives: AngularJS

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!?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)=> { = +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 […]

Angular 2 – Directives Deep dive

Attribute vs Structural Directives In attribute directives you never modify the DOM structure , just change some behaviour in the element where it is added to. I looks like a normal HTML attribute (with databinding or property binding). In Structural directives the DOM is modified. It also looks like a normal HTML attribute but it […]

Angular2 – Introduction Notes

Angular CLI Before install check latest nodejs version (>=v7.7.1) npm install -g @angular/cli Angular Command Line Interface for workflow commons tasks. More info in Create a new app skeleton: ng new my-first-app Init local development server: ng serve Integrating Bootstrap Install bootstrap npm package npm install –save bootstrap Edit .angular-cli.json: “styles”: [ “../node_modules/bootstrap/dist/css/bootstrap.min.css”, “styles.css” ], […]

AngularJS: Form validation built in support

[Fuente:] We’ll focus on client side validation and using the built in Angular form properties. Demo See the Pen AngularJS Form Validation by Chris Sevilleja (@sevilayha) on CodePen. Requirements Name is required Username is not required, minimum length 3, maximum length 8 Email is not required, but has to be a valid email Form […]

AngularJS Unit Tests with Sinon.JS

[Fuente:] AngularJS Unit Tests with Sinon.JS by Jason Schindler, Software Engineer Object Computing, Inc. (OCI) Introduction AngularJS is an open-source framework for building single page web applications. It utilizes two-way data binding to dynamically keep information synchronized between the model and view layers of the application and directives as a way to extend HTML […]