Arhiva Angular - Stranica 3 od 4 - Tomislav Stanković

Angular & Marvel API – demo aplikacija

U ovom ću blog postu pokazati kako koristiti Marvel API unutar Angular projekta. Fokus će biti na pravilnoj konfiguraciji API-ja nakon koje je moguće, prema dokumentaciji, koristeći različite parametre dobiti konkretne rezultate.

O Marvel API-ju

Marvel API je RESTful alat koji pomaže developerima stvoriti web stranice i aplikacije pomoću podataka iz 70 godišnje povijesti Marvela. Trenutno je dostupno šest vrsta resursa kao što su individualni stripovi (Comics), grupe ili serije stripova (Comic series), dijelovi pojedinih stripova (Comic stories), veliki događaji iz pojedinih stripova (Comic events and crossovers), žene, muškarci i organizacije koji su kreatori stripova (Creators) i likovi iz stripova (Characters).

Originalna putanja za pristup resursima nalazi se na http(s)://gateway.marvel.com/ i trenutno je moguće koristiti samo GET metodu.

Svaki zahtjev koji se uputi na gore navedeni URL mora u sebi sadržavati nekoliko parametara koji se dobiju nakon registracije.

API koji ću koristiti u nastavku ima sljedeći oblik

http://gateway.marvel.com/v1/public/comics?ts=1&apikey=1234&hash=ffd275c5130566a2916217b101f26150

iz čega je vidljivo da se sastoji od tri glavna parametra

apikey = PublicKey
ts – timestamp (or other long string which can change on a request-by-request basis)
hash – md5 ključ ts parametra (npr. md5(ts+privateKey+publicKey))

Postavljanje Angular projekta

Koristeći Angular CLI kreiram novi projekt naredbom

$ ng new AngularMarvelAPI
$ cd AngularMarvelAPI
$ ng serve

$ ng new AngularMarvelAPI

$ cd AngularMarvelAPI

$ ng serve

Odmah ću kreirati i servis za API koristeći naredbu

$ ng g service api

1	$ ng g service api

Kao što se može vidjeti na slici iznad API servis trenutno ne zadovoljava potrebne preduvjete za uspješno korištenje. S obzirom da će taj servis primarno biti korišten za pozivanje HTTP(S) protokola moram dodati @angular/http. Također, koristiti ću i map operator koji će dobivenu vrijednost transformirati u JSON. Na kraju, prema ranije spomenutoj Marevl API dokumentaciji, moram koristiti MD5 hash, u tome će mi pomoći ts-md5 NPM paket koji instaliram naredbom $ npm i ts-md5 --save.

API servis na kraju izgleda ovako

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Md5 } from 'ts-md5/dist/md5';

var PrivateKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var PublicKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var TimeStamp = new Date().getTime();
var hash = Md5.hashStr(TimeStamp + PrivateKey + PublicKey).toString();

@Injectable()
export class ApiService {

  constructor(private _http: Http) { }

  allHeroes(){
		return this._http.get('http://gateway.marvel.com/v1/public/characters?ts=' + TimeStamp + '&apikey=' + PublicKey + '&hash=' + hash + '&limit=100')
				   .map(res => res.json());
  } 

}

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

import { Md5 } from 'ts-md5/dist/md5';

var PrivateKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

var PublicKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

var TimeStamp = new Date().getTime();

var hash = Md5.hashStr(TimeStamp + PrivateKey + PublicKey).toString();

@Injectable()

export class ApiService {

constructor(private _http: Http) { }

allHeroes(){

return this._http.get('http://gateway.marvel.com/v1/public/characters?ts=' + TimeStamp + '&apikey=' + PublicKey + '&hash=' + hash + '&limit=100')

.map(res => res.json());

}

Sada taj servis mogu koristiti u bilo kojem dijelu Angular aplikacije. Za potrebu ovog primjera zadržat ću se na app.component.ts.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ApiService]
})

export class AppComponent implements OnInit {

  heroes = [];

  constructor(public _apiService: ApiService) { }

  ngOnInit() {
   this.getAllHeroes();
  }

  getAllHeroes(){
    this._apiService.allHeroes().subscribe(
      res => {
        console.log(res);
        for (let i = 0; i < res.data.results.length; i++) { 
          if(res.data.results[i].description.length > 1){
            this.heroes.push({
              id: res.data.results[i].id,
              name: res.data.results[i].name,
              description: res.data.results[i].description,
              modified: res.data.results[i].modified,
              image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,
              details_url: res.data.results[i].urls[0].url
         })
          }
        } 
        console.log(this.heroes);
      });
  }

}

import { Component, OnInit } from '@angular/core';

import { ApiService } from './api.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [ApiService]

})

export class AppComponent implements OnInit {

heroes = [];

constructor(public _apiService: ApiService) { }

ngOnInit() {

this.getAllHeroes();

}

getAllHeroes(){

this._apiService.allHeroes().subscribe(

res => {

console.log(res);

for (let i = 0; i < res.data.results.length; i++) {

if(res.data.results[i].description.length > 1){

this.heroes.push({

id: res.data.results[i].id,

description: res.data.results[i].description,

modified: res.data.results[i].modified,

image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,

details_url: res.data.results[i].urls[0].url

})

}

console.log(this.heroes);

});

}

Otvaranjem http://localhost:4200/ adrese odmah se dohvaćaju Marvel likovi sa ranije kreiranog API-ja.

Na kraju to može izgledati i ovako

Na slici iznad se može primijetiti da je prikaz vremena lijepo formatiran i da tako nije izgledao ranije u animaciji. Za to je zaslužan MomentJS.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ApiService]
})

export class AppComponent implements OnInit {

  heroes = [];

  constructor(public _apiService: ApiService) { }

  ngOnInit() {
   this.getAllHeroes();
  }

  getAllHeroes(){
    this._apiService.allHeroes().subscribe(
      res => {
        console.log(res);
        for (let i = 0; i < res.data.results.length; i++) { 
          if(res.data.results[i].description.length > 1){
            this.heroes.push({
              id: res.data.results[i].id,
              name: res.data.results[i].name,
              description: res.data.results[i].description,
              modified: moment(res.data.results[i].modified).format('LL'),
              image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,
              details_url: res.data.results[i].urls[0].url
         })
          }
        } 
        console.log(this.heroes);
      });
  }

}

import { Component, OnInit } from '@angular/core';

import { ApiService } from './api.service';

import * as moment from 'moment';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [ApiService]

})

export class AppComponent implements OnInit {

heroes = [];

constructor(public _apiService: ApiService) { }

ngOnInit() {

this.getAllHeroes();

}

getAllHeroes(){

this._apiService.allHeroes().subscribe(

res => {

console.log(res);

for (let i = 0; i < res.data.results.length; i++) {

if(res.data.results[i].description.length > 1){

this.heroes.push({

id: res.data.results[i].id,

description: res.data.results[i].description,

modified: moment(res.data.results[i].modified).format('LL'),

image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,

details_url: res.data.results[i].urls[0].url

})

}

console.log(this.heroes);

});

}

Zaključak

Iz cijelog ovog blog posta najvažniji dio je API servis koji sadržava sve potrebno za uspješan dohvat podataka sa Marvel API-ja. Prikaz podataka radi se ovisno o potrebama od slučaja do slučaja. Konkretno u ovom blog postu fokus je bio na uspješnom dohvatu podataka.

Struktura projekta prema package.json

{
  "name": "angular-marvel-api",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "moment": "^2.22.1",
    "rxjs": "^5.5.6",
    "ts-md5": "^1.2.4",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

{

"name": "angular-marvel-api",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/router": "^5.2.0",

"core-js": "^2.4.1",

"moment": "^2.22.1",

"rxjs": "^5.5.6",

"ts-md5": "^1.2.4",

"zone.js": "^0.8.19"

"devDependencies": {

"@angular/cli": "~1.7.4",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

Angular & Firebase – registracija i prijava

U ovom ću blog postu napraviti primjer Angular web aplikacije koja će se sastojati od nekoliko ekrana. Glavna svrha ove web aplikacije je omogućiti korisnicima da se registriraju tj. prijave kako bi ju mogli koristiti. To će moći učiniti koristeći e-mail, Google ili Facebook korisnički račun.

Nekoliko sam blog postova već objavio na ovu temu, ali svi su bili vezani uz Ionic Framework. Iako je Ionic temeljen na Angularu shvaćam da osobama koje se tek susreću sa ovim može biti teže napraviti Angular projekt proučavajući Ionic sintaksu. Zato ovaj put radim čisti Angular web projekt.

Postavljanje Firebase projekta

Na adresi https://console.firebase.google.com/ kreiram novi Firebase projekt pod nazivom ‘AngularWebFirebase’.

Na sljedećem ekranu, klikom na ‘Add Firebase to your web app‘ dobijem objekt koji će mi biti potreban kako bi sve funkcioniralo. Taj ću objekt kasnije ugraditi unutar app.module.ts datoteke.

Nakon postavljanja projekta u izborniku Authentication odabirem Email/Password, Facebook i Google metodu registracije/prijave.

Kao što se može vidjeti iz slike iznad, Facebook prijava ne može se ugraditi bez dva parametra koja je moguće dobiti jedino na adresi https://developers.facebook.com/ gdje je potrebno kreirati profil za AngularWebFirebase aplikaciju.

Implementacija Firebase u Angular

Koristeći Angular CLI kreiram novi projekt.

$ ng new AngularWebFirebase
$ cd AngularWebFirebase

1 2	$ ng new AngularWebFirebase $ cd AngularWebFirebase

Sljedećom naredbom instaliram potreban NPM paket

$ npm install angularfire2 firebase --save

1	$ npm install angularfire2 firebase --save

Također, kao što sam ranije već spomenuo, u datoteku app.module.ts postavljam potreban Firebase objekt.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "***************************************",
  authDomain: "***********************.firebaseapp.com",
  databaseURL: "https://***********************.firebaseio.com",
  projectId: "***********************",
  storageBucket: "***********************.appspot.com",
  messagingSenderId: "************"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {

apiKey: "***************************************",

authDomain: "***********************.firebaseapp.com",

databaseURL: "https://***********************.firebaseio.com",

projectId: "***********************",

storageBucket: "***********************.appspot.com",

messagingSenderId: "************"

};

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireAuthModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Sada ću kreirati četiri komponente od kojih će se sastojati moja Angular web aplikacija:

1 – LoginComponent – stranica za prijavu koristeći Facebook ili Google
2 – EmailComponent – stranica za prijavu koristeći e-mail
3 – SignupComponent – stranica za registraciju
4 – DashboardComponent – početna stranica nakon uspješne prijave

$ ng generate component login
$ ng generate component email
$ ng generate component signup
$ ng generate component dashboard

$ ng generate component login

$ ng generate component email

$ ng generate component signup

$ ng generate component dashboard

Ako sada pokrenem aplikaciju naredbom $ ng serve na adresi http://localhost:4200/ mogu vidjeti jedino standardnu Angular početnu stranicu.

S obzirom da ja u ovom slučaju želim vidjeti svoju Login komponentu kao početnu stranicu moram napraviti sljedeće. Unutar /src/app/ kreiram datoteku app.routes.ts sa sljedećim sadržajem:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SignupComponent } from './signup/signup.component';
import { EmailComponent } from './email/email.component';

export const router: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'signup', component: SignupComponent },
    { path: 'email', component: EmailComponent },
    { path: 'dashboard', component: DashboardComponent}
]

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

import { ModuleWithProviders } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

import { DashboardComponent } from './dashboard/dashboard.component';

import { SignupComponent } from './signup/signup.component';

import { EmailComponent } from './email/email.component';

export const router: Routes = [

{ path: '', redirectTo: 'login', pathMatch: 'full' },

{ path: 'login', component: LoginComponent },

{ path: 'signup', component: SignupComponent },

{ path: 'email', component: EmailComponent },

{ path: 'dashboard', component: DashboardComponent}

]

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

Naravno, tu još ide uvoz u app.module.ts

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { LoginComponent } from './login/login.component';
import { EmailComponent } from './email/email.component';
import { SignupComponent } from './signup/signup.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { routes } from './app.routes';
...
declarations: [
    AppComponent,
    LoginComponent,
    EmailComponent,
    SignupComponent,
    DashboardComponent
  ],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    routes
  ],
...

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

import { LoginComponent } from './login/login.component';

import { EmailComponent } from './email/email.component';

import { SignupComponent } from './signup/signup.component';

import { DashboardComponent } from './dashboard/dashboard.component';

import { routes } from './app.routes';

...

declarations: [

AppComponent,

LoginComponent,

EmailComponent,

SignupComponent,

DashboardComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireAuthModule,

routes

...

I nakon toga unutar datoteke app.component.html umjesto postojećeg sadržaja staviti <router-outlet></router-outlet>.

Login komponenta

Nalazi se na adresi http://localhost:4200/login i to je zadani pregled koji se pojavi prilikom prve posjete web aplikaciji.

Ekran se sastoji od tri gumba. Facebook, Google i E-mail prijava uz mogućnost registracije.

<div class="form-container">
  <img src="assets/images/login.png" id="login">

    <span class="error" *ngIf="error">{{ error }}</span>

  <button (click)="loginFb()" id="fb">Login with Facebook</button><br>
  <button (click)="loginGoogle()" id="google">Login with Google</button>
  <button routerLink="/email" id="email">Login with E-mail</button>

  <a routerLink="/signup" routerLinkActive="active" class="alc">Don't have an account?</a>
</div>

<span class="error" *ngIf="error">{{ error }}</span>

<button (click)="loginFb()" id="fb">Login with Facebook</button><br>

<button (click)="loginGoogle()" id="google">Login with Google</button>

<button routerLink="/email" id="email">Login with E-mail</button>

<a routerLink="/signup" routerLinkActive="active" class="alc">Don't have an account?</a>

</div>

Gumb za prijavu putem Facebooka ili Googlea pozivaju funkciju dok klik ma gumb za prijavu putem e-maila otvara novu stranicu na kojoj se nalazi forma za unos e-maila i lozinke.

Ako prijava putem Facebooka ili Googlea prođe zapisujem podatke o korisniku (name, picture, email) u localStorage kako bi ih kasnije mogao prikazati na Dashboardu.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  error: any;

  constructor(public _angularAuth: AngularFireAuth, 
              private _router: Router) { }

  ngOnInit() {
  }

  loginGoogle(){
    let a = this;
    //this._angularAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())
    .then(function(authData) {
      console.log(authData);
      if(authData.credential.accessToken){
        localStorage.setItem('name', authData.additionalUserInfo.profile.name);
        localStorage.setItem('picture', authData.additionalUserInfo.profile.picture);
        localStorage.setItem('email', authData.additionalUserInfo.profile.email);
        a._router.navigate(['/dashboard']);
      }
    }).catch(function(error) {
      console.log(error);
      a.error = error.message;
    });
  }

  loginFb(){
    let a = this;
    //this._angularAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
    firebase.auth().signInWithPopup(new firebase.auth.FacebookAuthProvider())
    .then(function(authData) {
      console.log(authData);
      if(authData.credential.accessToken){
        localStorage.setItem('name', authData.additionalUserInfo.profile.name);
        localStorage.setItem('picture', authData.additionalUserInfo.profile.picture.data.url);
        localStorage.setItem('email', authData.additionalUserInfo.profile.email);
        a._router.navigate(['/dashboard']);
      }
    }).catch(function(error) {
      console.log(error);
      a.error = error.message;
    });
  }

}

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

error: any;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

}

loginGoogle(){

let a = this;

//this._angularAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())

.then(function(authData) {

console.log(authData);

if(authData.credential.accessToken){

localStorage.setItem('name', authData.additionalUserInfo.profile.name);

localStorage.setItem('picture', authData.additionalUserInfo.profile.picture);

localStorage.setItem('email', authData.additionalUserInfo.profile.email);

a._router.navigate(['/dashboard']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

loginFb(){

let a = this;

//this._angularAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());

firebase.auth().signInWithPopup(new firebase.auth.FacebookAuthProvider())

.then(function(authData) {

console.log(authData);

if(authData.credential.accessToken){

localStorage.setItem('name', authData.additionalUserInfo.profile.name);

localStorage.setItem('picture', authData.additionalUserInfo.profile.picture.data.url);

localStorage.setItem('email', authData.additionalUserInfo.profile.email);

a._router.navigate(['/dashboard']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

Ovisno o postavkama unutar Firebasea jedan korisnik se (ne)može prijaviti koristeći istu e-mail adresu na različitim društvenim mrežama tj. ako se korisnik jednom prijavio koristeći Google, a kasnije se želi prijaviti koristeći Facebook dobiti će sljedeću poruku:

Ta se opcija može promijeniti klikom na ‘One account per email address‘.

Signup komponenta

Nalazi se na adresi http://localhost:4200/signup i osnovna svrha ovog ekrana je omogućiti korisnicima registraciju.

Ekran se sastoji od dva polja za unos e-maila i lozinke.

<div class="form-container">
  <a routerLink="/login" id="goback">Go back</a>

  <h2>Registration</h2>

  <span class="error" *ngIf="error">{{ error }}</span>
    
  <form #formData='ngForm' (ngSubmit)="onSubmit(formData)">

    <input type="text" placeholder="E-mail" (ngModel)="email" name="email" class="txt" required>
    <input type="password" placeholder="Password" (ngModel)="password" name="password" class="txt" required>


    <button type="submit" [disabled]="!formData.valid" class="basic-btn">Create my account</button>
  </form>
</div>

<h2>Registration</h2>

<span class="error" *ngIf="error">{{ error }}</span>

<button type="submit" [disabled]="!formData.valid" class="basic-btn">Create my account</button>

</form>

</div>

Ako registracija prođe u redu korisnik automatski bude preusmjeren na stranicu za prijavu. U suprotnom iznad polja za unos e-maila prikazuje se poruka o grešci.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  error: any;

  constructor(public _angularAuth: AngularFireAuth, 
              private _router: Router) { }

  ngOnInit() {
  }

  onSubmit(formData) {
    let a = this;
    if(formData.valid) {
      console.log(formData.value);
      firebase.auth().createUserWithEmailAndPassword(formData.value.email, formData.value.password)
      .then(function(data) {
        console.log(data);
        if(data){
          a._router.navigate(['/email']);
        }
      }).catch(function(error) {
        console.log(error);
        a.error = error.message;
      });
    }
  }

}

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-signup',

templateUrl: './signup.component.html',

styleUrls: ['./signup.component.css']

})

export class SignupComponent implements OnInit {

error: any;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

}

onSubmit(formData) {

let a = this;

if(formData.valid) {

console.log(formData.value);

firebase.auth().createUserWithEmailAndPassword(formData.value.email, formData.value.password)

.then(function(data) {

console.log(data);

if(data){

a._router.navigate(['/email']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

Email komponenta

Nalazi se na adresi http://localhost:4200/email s osnovnom svrhom omogućavanja prijave korisnika pomoću e-maila i lozinke.

Ekran se sastoji od dva polja za unos e-maila i lozinke.

<div class="form-container">
  <a routerLink="/login" id="goback">Go back</a>
  <h2>E-mail Login</h2>

  <span class="error" *ngIf="error">{{ error }}</span>

  <form #formData='ngForm' (ngSubmit)="onSubmit(formData)">

    <input type="text" placeholder="E-mail" (ngModel)="email" name="email" class="txt" required>
    <input type="password" placeholder="Password" (ngModel)="password" name="password" class="txt" required>

    <button type="submit" [disabled]="!formData.valid" class="basic-btn">Log in</button>
    <a routerLink="/signup" class="alc">Don't have an account?</a>
</form>
</div>

<h2>E-mail Login</h2>

<span class="error" *ngIf="error">{{ error }}</span>

<a routerLink="/signup" class="alc">Don't have an account?</a>

</form>

</div>

Unosom ispravnih podataka za prijavu korisnik automatski bude preusmjeren na Dashboard dok u suprotnom dobije poruku o grešci.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';

@Component({
  selector: 'app-email',
  templateUrl: './email.component.html',
  styleUrls: ['./email.component.css']
})
export class EmailComponent implements OnInit {

  error: any;

  constructor(public _angularAuth: AngularFireAuth, 
              private _router: Router) { }

  ngOnInit() {
  }

  onSubmit(formData) {
    let a = this;
    firebase.auth().signInWithEmailAndPassword(formData.value.email, formData.value.password)
    .then(function(data) {
      console.log(data);
      if(data){
        localStorage.setItem('email', data.email);
        a._router.navigate(['/dashboard']);
      }
    }).catch(function(error) {
      console.log(error);
      a.error = error.message;
    });
  }

}

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-email',

templateUrl: './email.component.html',

styleUrls: ['./email.component.css']

})

export class EmailComponent implements OnInit {

error: any;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

}

onSubmit(formData) {

let a = this;

firebase.auth().signInWithEmailAndPassword(formData.value.email, formData.value.password)

.then(function(data) {

console.log(data);

if(data){

localStorage.setItem('email', data.email);

a._router.navigate(['/dashboard']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

Dashboard komponenta

Nalazi se na adresi http://localhost:4200/dashboard s osnovnom svrhom prikaza podataka o korisniku nakon uspješne prijave. U ovom slučaju prikazuje se ime i prezime korisnika, e-mail adresa i slika.

Na ekranu se mogu vidjeti podaci o korisniku pod uvjetom (*ngIf) da postoje.

<div class="form-container" id="toolbar">
  <header>
    <button (click)="logout()" class="basic-btn">Logout</button>
  </header>
  <div id="page">
    <h2 *ngIf="name">Hey {{name}}!</h2>
    <h6 *ngIf="email">{{email}}</h6>
    <img *ngIf="picture" src="{{picture}}"/>

  </div>
  
</div>

<button (click)="logout()" class="basic-btn">Logout</button>

</header>

<h6 *ngIf="email">{{email}}</h6>

</div>

Funkcionalnost se sastoji od dohvaćanja podataka o korisniku, funkcije za odjavu koja prazni localStorage i vraća korisnika na početnu stranicu te funkcije za provjeru koja onemogućava korisnike da pristupe Dashboard stranici ako nisu prijavljeni.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

   name: string;
   picture: string;
   email: string;

  constructor(public _angularAuth: AngularFireAuth, 
              private _router: Router) { }

  ngOnInit() {
     this.name = localStorage.getItem('name');
     this.picture = localStorage.getItem('picture');
     this.email = localStorage.getItem('email');
     this.provjera();
  }

  logout() {
    //this._angularAuth.auth.logout();
    localStorage.clear();
    console.log('logged out');
    this._router.navigateByUrl('/login');
 }

 provjera(){
   if(!this.email){
    this._router.navigateByUrl('/login');
   }
 }


}

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-dashboard',

templateUrl: './dashboard.component.html',

styleUrls: ['./dashboard.component.css']

})

export class DashboardComponent implements OnInit {

picture: string;

email: string;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

this.name = localStorage.getItem('name');

this.picture = localStorage.getItem('picture');

this.email = localStorage.getItem('email');

this.provjera();

}

logout() {

//this._angularAuth.auth.logout();

localStorage.clear();

console.log('logged out');

this._router.navigateByUrl('/login');

}

provjera(){

if(!this.email){

this._router.navigateByUrl('/login');

}

Zaključak

U ovom sam blog postu pokazao kako implementirati Google Firebase prijavu u Angular web projekt.

Angular & pdfmake – kreiranje PDF-a

U ovom ću blog postu pokazati kako kreirati PDF dokument unutar Angular web aplikacije koristeći pdfmake.

Što je pdfmake?

pdfmake je biblioteka temeljena na JavaScriptu koja omogućava kreiranje PDF dokumenata iz JSON-a. Može se koristiti na serverskoj npm install pdfmake i klijentskoj bower install pdfmake strani.

Osobno, više sam za NPM nego za Bower. Razloga je nekoliko.

Kreiranje Angular projekta

Koristeći Angular CLI pokrećem novi projekt

$ ng new AngularPdfMAke
$ ng serve

1 2	$ ng new AngularPdfMAke $ ng serve

Nakon što sam pokrenuo web aplikaciju u web pregledniku i uvjerio se da sam sve ispravno postavio mogu krenuti u instalaciju pdfmake biblioteke.

pdfmake implementacija

$ npm install pdfmake

1	$ npm install pdfmake

Nakon instalacije uvozim pdfmake u komponentu unutar koje želim kreirati PDF.

import { Component } from '@angular/core';

var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
...

import { Component } from '@angular/core';

var pdfMake = require('pdfmake/build/pdfmake.js');

var pdfFonts = require('pdfmake/build/vfs_fonts.js');

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

...

Što se vidljivog dijela aplikacije tiče ondje će se u ovom primjeru nalaziti samo tri gumba, po jedan za otvaranje, preuzimanje i ispis PDF-a.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Angular & pdfmake - kreiranje PDF-a
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<div class="button">
  <button (click)="open()">Open</button> - <button (click)="download()">Download</button> - <button (click)="print()">Print</button>
</div>

<h1>

Angular & pdfmake - kreiranje PDF-a

</h1>

</div>

<button (click)="open()">Open</button> - <button (click)="download()">Download</button> - <button (click)="print()">Print</button>

</div>

Kreiranje PDF-a moguće je na tri načina:

1.) Otvara PDF u novom tabu web preglednika.

pdfMake.createPdf(this.docDefinition).open();

1	pdfMake.createPdf(this.docDefinition).open();

2.) Otvara prozor za ispis.

pdfMake.createPdf(this.docDefinition).print();

1	pdfMake.createPdf(this.docDefinition).print();

3.) Preuzimanje PDF-a na računalo. U ovom je slučaju moguće unaprijed odrediti naziv PDF-a.

pdfMake.createPdf(this.docDefinition).download('exampleDocument.pdf');

1	pdfMake.createPdf(this.docDefinition).download('exampleDocument.pdf');

Kao što se vidi iz gore navedenih funkcija sadržaj od kojega se kreira PDF dobije se iz objekta this.docDefinition koji u ovom konkretnom primjeru izgleda ovako:

this.docDefinition = {
      content: [
        { text: 'Ovo je naslov', style: 'header' },
        'Primjer sadržaja bez dodatnog uređivanja.',
        { text: 'Poravnato desno.', style: 'anotherStyle' },
        { text: 'Kombinacija više stilova.', style: [ 'header', 'anotherStyle' ] }
      ],
    
      styles: {
        header: {
          fontSize: 22,
          bold: true
        },
        anotherStyle: {
          italics: true,
          alignment: 'right'
        }
      }
    };

this.docDefinition = {

content: [

{ text: 'Ovo je naslov', style: 'header' },

'Primjer sadržaja bez dodatnog uređivanja.',

{ text: 'Poravnato desno.', style: 'anotherStyle' },

{ text: 'Kombinacija više stilova.', style: [ 'header', 'anotherStyle' ] }

styles: {

header: {

fontSize: 22,

bold: true

anotherStyle: {

italics: true,

alignment: 'right'

}

};

Više primjera moguće je pronaći na poveznici http://pdfmake.org/playground.html

Osim toga, tražio sam popis mogućih CSS stilova i za sada sam pronašao poveznicu https://stackoverflow.com/a/32805835/5059916 na kojoj se spominje nekoliko njih.

Zaključak

pdfmake omogućava brzo i jednostavno kreiranje PDF-a unutar Angular aplikacije.

I za kraj, u nastavku dajem strukturu projekta prema package.json datoteci.

{
  "name": "angular-pdf-make",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "pdfmake": "^0.1.35",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

{

"name": "angular-pdf-make",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/router": "^5.2.0",

"core-js": "^2.4.1",

"pdfmake": "^0.1.35",

"rxjs": "^5.5.6",

"zone.js": "^0.8.19"

"devDependencies": {

"@angular/cli": "1.6.6",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Ako ste do sada razvijali Angular web aplikacije ili koristili tuđe mogli ste kod svih njih primijetiti jednu zajedničku stvar, a to je početni zaslon koji se prikazuje prije nego se učita Angular aplikacija i na kojemu u gornjem lijevom kutu ekrana piše “Loading…” (Angular 2) uz monotonu bijelu pozadinsku boju. Kasnije je to izbačeno te se prikazuje samo obična, prazna, bijela pozadina (>= Angular 4).

Išao sam malo istražiti kako najbolje to riješiti tako da i meni kao developeru, a i korisniku bude lijepo. Našao sam nekoliko mogućnosti od kojih sam odabrao jednu o kojoj ću nešto više napisati u nastavku.

Kreiranje novog Angular projekta

Koristeći Angular CLI pokrećem novi projekt

$ ng new AngularLoadingScreen
$ ng serve

1 2	$ ng new AngularLoadingScreen $ ng serve

Početni zaslon je čisto bijele boje i to je dobar izbor ako nakon toga ide prikaz npr. stranice za prijavu korisnika s bijelom pozadinom. U tom će se slučaju te dvije bijele pozadinske boje lijepo stopiti i činiti cjelinu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularLoadingScreen</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!doctype html>

<head>

<title>AngularLoadingScreen</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Prilagođeni početni zaslon

Za promjenu prikaza početnog zaslona dovoljno je kreirati novi <div> s klasom loading.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularLoadingScreen</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <div class="loading"></div>
</body>
</html>

<!doctype html>

<head>

<title>AngularLoadingScreen</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
}

my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

.loading {

opacity: 0;

transition: opacity .8s ease-in-out;

position: fixed;

height: 100%;

width: 100%;

top: 0;

left: 0;

background: #000;

z-index: -1;

}

my-app:empty + .loading {

opacity: 1;

z-index: 100;

}

Na kraju to izgleda ovako

Zaključak

To bi bilo sve. Ovo se možda ne čini kao nešto vrijedno spomena, ali svakako daje onaj završni sjaj Angular web aplikaciji.

Angular CRUD aplikacija

U ovom ću blog postu napraviti jednostavnu Angular CRUD (create, read, update, delete) aplikaciju koja će se sastojati od forme za pregled podataka uz mogućnost dodavanja, uređivanja i brisanja podataka.

CRUD operacije nešto su s čime se svaki web developer najčešće susreće i zato bi ovaj primjer posebno mogao biti koristan novim developerima ili onima koji će to tek postati.

Uvod

Cilj ovog blog posta je pokazati:
– kako kreirati Angular projekt koristeći Angular CLI
– kako kreirati i koristiti servis pomoću kojega ću pozivati JSON API
– kako dodati Bootstrap za brže kreiranje forme za unos, pregled, uređivanje i brisanje sadržaja

Kreiranje Angular projekta

Pomoću Angular CLI-a kreirat ću novi projekt.

$ ng new AngularCRUD
$ ng serve

1 2	$ ng new AngularCRUD $ ng serve

Ako projekt sada otvorim u web pregledniku na adresi http://localhost:4200/ dobit ću sljedeće

S obzirom da umjesto toga želim imati formu za unos, pregled, uređivanje i brisanje sadržaja prvo ću dodati podršku za Bootstrap na način da u index.html dodam

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

1	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

. I sada mogu koristiti Bootstrap komponente.

Kasnije ću se vratiti na izgled forme, a sada idem postaviti glavni dio funkcionalnosti koji se tiče kreiranja servisa i pozivanja API-ja.

Kreiranje servisa za API

Servis pomoću kojega ću vršiti sve upite na API kreiram naredbom

$ ng generate service KorisniciAPI

1	$ ng generate service KorisniciAPI

Nakon čega dobijem korisnici-api.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class KorisniciApiService {

  constructor() { }

}

import { Injectable } from '@angular/core';

@Injectable()

export class KorisniciApiService {

constructor() { }

}

Servis se može koristiti za različite svrhe, ali kako ću meni ovdje glavna svrha biti slanje upita na API znači da obavezno moram koristiti Http servis.

Konačan izgled servisa može se vidjeti u nastavku, a njime je pokriveno sve – od pregleda svih korisnika, dodavanja novih, uređivanja i brisanja postojećih.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class KorisniciApiService {

  constructor(private _http: Http) {}

  // Pregled svih korisnika u imeniku
  svi(){
		return this._http.get('http://localhost:3000/Imenik')
				   .map(res => res.json());
  } 

  // Dodavanje korisnika u imenik
  dodaj(a:any){
		return this._http.post('http://localhost:3000/Imenik', a)
				   .map(res => res.json());
  } 

  // Uređivanje korisnika u imeniku
  uredi(a:any){
    return this._http.put('http://localhost:3000/Imenik/' + a.id, a)
                .map(res => res.json());  
   } 

  // Brisanje korisnika iz imenika
  obrisi(a:any){
		return this._http.delete('http://localhost:3000/Imenik/' + a)
					.map(res => res.json());
  }

}

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class KorisniciApiService {

constructor(private _http: Http) {}

// Pregled svih korisnika u imeniku

svi(){

return this._http.get('http://localhost:3000/Imenik')

.map(res => res.json());

}

// Dodavanje korisnika u imenik

dodaj(a:any){

return this._http.post('http://localhost:3000/Imenik', a)

.map(res => res.json());

}

// Uređivanje korisnika u imeniku

uredi(a:any){

return this._http.put('http://localhost:3000/Imenik/' + a.id, a)

.map(res => res.json());

}

// Brisanje korisnika iz imenika

obrisi(a:any){

return this._http.delete('http://localhost:3000/Imenik/' + a)

.map(res => res.json());

}

Izgled forme (app.component.html)

Za izgled forme iskoristit ću Bootstrap komponente. Struktura forme nalazi se unutar app.component.html, a izgleda ovako:

<div class="container-fluid">
  <div class="row">
      <div class="col-lg-8">
        <div class="panel panel-default">
          <div class="panel-heading">Dodaj/Uredi korisnika:</div>
          <div class="panel-body">
            <form name="ImenikForma" novalidate>
                <div class="form-group">
                    <div class="row">
                      <div class="col col-lg-5 col-md-5" ng-class="{ 'has-error' : ImenikForma.ime.$invalid && !ImenikForma.ime.$pristine }">
                          <div id="input_container">
                            <input type="text" class="form-control" id="ime" required maxlength="30" placeholder="Ime i prezime" [(ngModel)]="korisnik.ime" [ngModelOptions]="{standalone: true}" #ime="ngModel">
                          </div>
                        </div>
                        <div class="col col-lg-5 col-md-5" ng-class="{ 'has-error' : ImenikForma.telefon.$invalid && !ImenikForma.telefon.$pristine }">
                            <div id="input_container">
                              <input type="tel" class="form-control" id="telefon" required placeholder="Telefon" [(ngModel)]="korisnik.telefon" [ngModelOptions]="{standalone: true}" #telefon="ngModel">
                            </div>
                          </div>
                          <div class="col col-lg-2 col-md-2">
                              <div id="input_container">
                              <div *ngIf="spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="dodajKorisnika(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Spremi </button></div> 
                              <div *ngIf="!spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="urediKorisnika2(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Uredi </button></div>
                            </div>
                          </div>
                        </div>
                  </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    
      <div class="row">
        <div class="col-lg-8">
          <div class="panel panel-default">
            <div class="panel-heading">Ukupno korisnika: {{ukupanbrojkorisnika}}</div>
            <div class="panel-body">
              <form novalidate>
                <div >
                  <span *ngIf="ukupanbrojkorisnika < 1">Nema podataka</span>
                  <table *ngIf="ukupanbrojkorisnika > 0" class="table table-striped table-hover table-responsive" ng-switch-default>
                    <thead>
                      <tr>
                        <th class="tablica text-center">Rb.</th>
                        <th class="tablica text-center">Ime</th>
                        <th class="tablica text-center">Telefon</th>
                        <th class="tablica text-center">Uredi | Obriši</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let kor of svikorisnici; let i = index">
                        <td class="tablica text-center">{{i+1}}.</td>
                        <td class="tablica text-center">{{kor.ime}}</td>
                        <td class="tablica text-center">{{kor.telefon}}</td>
                        <td class="tablica text-center">
                          <button class="btn btn-info btn-sm" (click)="urediKorisnika(kor)"><i class="glyphicon glyphicon-edit"></i></button>
                          <button class="btn btn-danger btn-sm" (click)="obrisiKorisnika(kor)"><i class="glyphicon glyphicon-trash"></i></button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div> 
    </div>

<div class="panel-heading">Dodaj/Uredi korisnika:</div>

</div>

</div>

<div *ngIf="spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="dodajKorisnika(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Spremi </button></div>

<div *ngIf="!spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="urediKorisnika2(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Uredi </button></div>

</div>

</form>

</div>

<div class="panel-heading">Ukupno korisnika: {{ukupanbrojkorisnika}}</div>

<div >

<span *ngIf="ukupanbrojkorisnika < 1">Nema podataka</span>

<table *ngIf="ukupanbrojkorisnika > 0" class="table table-striped table-hover table-responsive" ng-switch-default>

<thead>

<tr>

<th class="tablica text-center">Telefon</th>

<th class="tablica text-center">Uredi | Obriši</th>

</tr>

</thead>

<tbody>

<td class="tablica text-center">{{kor.telefon}}</td>

</td>

</tr>

</tbody>

</table>

</div>

</form>

</div>

Forma na početku i bez podataka izgleda ovako:

Sada kada imam definiran izgled forme mogu kreirati opcije koje će joj dati funkcionalnost.

Dodavanje (POST)

Što se dodavanja sadržaja tiče nije ga moguće dodati dok sva obavezna polja nisu unesena. U ovom slučaju postoje dva polja, ime i prezime te broj telefona, i oba su obavezna. S obzirom da u formi za sada nema niti jednog korisnika *ngIf="ukupanbrojkorisnika < 1" prikezuje se poruka “Nema podataka”.

dodajKorisnika(korisnik){
     this._korisniciService.dodaj(korisnik).subscribe(
      res => {
        console.log(res);
        this.dohvatiSveKorisnike();
        this.korisnik.ime = ' ';
        this.korisnik.telefon = ' ';
      });
  }

dodajKorisnika(korisnik){

this._korisniciService.dodaj(korisnik).subscribe(

res => {

console.log(res);

this.dohvatiSveKorisnike();

this.korisnik.ime = ' ';

this.korisnik.telefon = ' ';

});

}

Nakon dodavanja korisnika popis se automatski osvježava i prikazuje sve dodane korisnike.

Pregled (GET)

Kada se Angular web aplikacija pokrene automatski se dohvaća popis svih do tada unesenih korisnika. Za tu svrhu koristim ngOnInit() što je dio Angular Lifecycle Hook.

ngOnInit() {
      this.dohvatiSveKorisnike();
    }

    dohvatiSveKorisnike(){
     this._korisniciService.svi().subscribe(res => {
       console.log(res);
       this.svikorisnici = res;
       this.ukupanbrojkorisnika = res.length;
      });
    }

ngOnInit() {

this.dohvatiSveKorisnike();

}

dohvatiSveKorisnike(){

this._korisniciService.svi().subscribe(res => {

console.log(res);

this.svikorisnici = res;

this.ukupanbrojkorisnika = res.length;

});

}

Također, odmah dohvaćam i dužinu niza this.ukupanbrojkorisnika = res.length; kako bi mogao prikazati ukupan broj korisnika.

Uređivanje (PUT)

Kod uređivanja korisnika imam dvije funkcije. Prva urediKorisnika(); dohvaća podatke odabranog korisnika i prikazuje ih u gornjoj formi za unos/uređivanje, a druga urediKorisnika2(); obavlja proces uređivanja odabranog korisnika tj. šalje nove podatke na API.

urediKorisnika(kor){
      console.log(kor);
      this.spremi = false;
      this.korisnik.id = kor.id;
      this.korisnik.ime = kor.ime;
      this.korisnik.telefon = kor.telefon;
  }

  urediKorisnika2(korisnik){
      console.log(korisnik);
      this._korisniciService.uredi(korisnik).subscribe(
        res => {
          console.log(res);
          this.dohvatiSveKorisnike();
          this.korisnik.ime = ' ';
          this.korisnik.telefon = ' ';
          this.spremi = true;
      });
  }

urediKorisnika(kor){

console.log(kor);

this.spremi = false;

this.korisnik.id = kor.id;

this.korisnik.ime = kor.ime;

this.korisnik.telefon = kor.telefon;

}

urediKorisnika2(korisnik){

console.log(korisnik);

this._korisniciService.uredi(korisnik).subscribe(

res => {

console.log(res);

this.dohvatiSveKorisnike();

this.korisnik.ime = ' ';

this.korisnik.telefon = ' ';

this.spremi = true;

});

}

Nakon što su novi podaci poslani popis korisnika se automatski osvježava, a gumb ‘Uredi’ ponovno postaje ‘Spremi’.

Brisanje (DELETE)

Brisanje korisnika zadnji je korak izrade ovog CRUD primjera. Nakon što je odabrani korisnik obrisan popis se automatski osvježava.

obrisiKorisnika(kor){
    let id = kor.id;
    if(window.confirm('Jeste li sigurni da želite obrisati korisnika?')){
    this._korisniciService.obrisi(id).subscribe(
      res => {
        console.log(res);
        this.dohvatiSveKorisnike();
    });
    } 
  }

obrisiKorisnika(kor){

let id = kor.id;

if(window.confirm('Jeste li sigurni da želite obrisati korisnika?')){

this._korisniciService.obrisi(id).subscribe(

res => {

console.log(res);

this.dohvatiSveKorisnike();

});

}

Zaključak

Ovo je bio jednostavan primjer Angular CRUD forme. Mogao sam ovdje dodatno uljepšati izgled forme ili na drugačiji način slati upite na API, ali mislim da je ovo sasvim dovoljno za početak jer kako god bilo korištenjem ovog primjera može se napraviti funkcionalna forma za unos, pregled, uređivanje i brisanje sadržaja.

I za kraj, NPM paketi korišteni u ovom primjeru:

{
  "name": "angular-crud",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.7",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

{

"name": "angular-crud",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^4.2.4",

"@angular/common": "^4.2.4",

"@angular/compiler": "^4.2.4",

"@angular/core": "^4.2.4",

"@angular/forms": "^4.2.4",

"@angular/http": "^4.2.4",

"@angular/platform-browser": "^4.2.4",

"@angular/platform-browser-dynamic": "^4.2.4",

"@angular/router": "^4.2.4",

"core-js": "^2.4.1",

"rxjs": "^5.4.2",

"zone.js": "^0.8.14"

"devDependencies": {

"@angular/cli": "1.4.7",

"@angular/compiler-cli": "^4.2.4",

"@angular/language-service": "^4.2.4",

"@types/jasmine": "~2.5.53",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "~3.2.0",

"jasmine-core": "~2.6.2",

"jasmine-spec-reporter": "~4.1.0",

"karma": "~1.7.0",

"karma-chrome-launcher": "~2.1.1",

"karma-cli": "~1.0.1",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~3.2.0",

"tslint": "~5.7.0",

"typescript": "~2.3.3"

}