1560822919
Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Example
The comprehensive step by step tutorial on using HTTP Interceptor with Ionic 4 and Angular 7 including a complete example of authentication or login. We will stick Authentication Token to Angular 7 interceptor. So, you don’t have to repeat calling token when call or consume RESTful API. For the RESTful API, we will use our existing Node, Express, Passport and MongoDB that you can get from our GitHub.
Table of Contents:
- Create a new Ionic 4 and Angular 7 App
- Create a custom Angular 7 HttpInterceptor
- Create Ionic 4 Angular 7 Authentication and Book Services
- Create an Ionic 4 and Angular 7 Book Page
- Create the Ionic 4 and Angular 7 Pages for Login and Register
- Run and Test the Ionic 4 and Angular 7 Authentication App
The following tools, frameworks, and modules are required for this tutorial:
- Create a new Ionic 4 and Angular 7 App
- Create a custom Angular 7 HttpInterceptor
- Create Ionic 4 Angular 7 Authentication and Book Services
- Create an Ionic 4 and Angular 7 Book Page
- Create the Ionic 4 and Angular 7 Pages for Login and Register
- Run and Test the Ionic 4 and Angular 7 Authentication App
Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install new Ionic 4 CLI by open the terminal or Node command line then type this command.
sudo npm install -g ionic
You will get the latest Ionic CLI in your terminal or command line. Check the version by type this command.
ionic --version
4.3.1
1. Create a new Ionic 4 and Angular 7 App
To create a new Ionic 4 and Angular 7 application, type this command in your terminal.
ionic start ionic4-angular7-interceptor blank --type=angular
If you see this question, just type N for because we will installing or adding Cordova later.
Integrate your new app with Cordova to target native iOS and Android? (y/N) N
After installing NPM modules and dependencies, you will see this question, just type N because we are not using it yet.
Install the free Ionic Pro SDK and connect your app? (Y/n) N
Next, go to the newly created app folder.
cd ./ionic4-angular7-interceptor
As usual, run the Ionic 4 and Angular 7 app for the first time, but before run as lab mode, type this command to install @ionic/lab.
npm install --save-dev @ionic/lab
ionic serve -l
Now, open the browser and you will the Ionic 4 and Angular 7 app with the iOS, Android, or Windows view. If you see a normal Ionic 4 blank application, that’s mean you ready to go to the next steps.
2. Create a custom Angular 7 HttpInterceptor
Before creating a custom Angular 7 HttpInterceptor, create a folder under app folder.
mkdir src/app/interceptors
Next, create a file for the custom Angular 7 HttpInterceptor.
touch src/app/interceptors/token.interceptor.ts
Open and edit that file the add this imports.
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse,
HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import {
Router
} from '@angular/router';
import { ToastController } from '@ionic/angular';
Create a class that implementing HttpInterceptor method.
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
}
Inject the required module to the constructor inside the class.
constructor(private router: Router,
public toastController: ToastController) {}
Implement a custom Interceptor function.
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('token');
if (token) {
request = request.clone({
setHeaders: {
'Authorization': token
}
});
}
if (!request.headers.has('Content-Type')) {
request = request.clone({
setHeaders: {
'content-type': 'application/json'
}
});
}
request = request.clone({
headers: request.headers.set('Accept', 'application/json')
});
return next.handle(request).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
console.log('event--->>>', event);
}
return event;
}),
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
if (error.error.success === false) {
this.presentToast('Login failed');
} else {
this.router.navigate(['login']);
}
}
return throwError(error);
}));
}
Add function for call a toast controller.
async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
duration: 2000,
position: 'top'
});
toast.present();
}
Next, we have to register this custom HttpInterceptor and HttpClientModule. Open and edit src/app/app.module.ts then add this imports.
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { TokenInterceptor } from './inteceptors/token.interceptor';
Add those modules to the provider array of the @NgModule.
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
],
Now, the HTTP interceptor is ready to intercept any request to the API.
3. Create Ionic 4 Angular 7 Authentication and Book Services
First, create a folder for those services under src/app/.
mkdir src/app/services
Create services or providers for authentication and book.
ionic g service services/auth
ionic g service services/book
Next, open and edit src/app/services/auth.service.ts then replace all codes with this.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthService {
apiUrl = 'http://localhost:3000/api/';
constructor(private http: HttpClient) { }
login (data): Observable<any> {
return this.http.post<any>(this.apiUrl + 'signin', data)
.pipe(
tap(_ => this.log('login')),
catchError(this.handleError('login', []))
);
}
logout (): Observable<any> {
return this.http.get<any>(this.apiUrl + 'signout')
.pipe(
tap(_ => this.log('logout')),
catchError(this.handleError('logout', []))
);
}
register (data): Observable<any> {
return this.http.post<any>(this.apiUrl + 'signup', data)
.pipe(
tap(_ => this.log('login')),
catchError(this.handleError('login', []))
);
}
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
this.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
/** Log a HeroService message with the MessageService */
private log(message: string) {
console.log(message);
}
}
Next, open and edit src/app/services/book.service then replace all codes with this.
import { Injectable } from '@angular/core';
import { Book } from '../book/book';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class BookService {
apiUrl = 'http://localhost:3000/api/';
constructor(private http: HttpClient) { }
getBooks (): Observable<Book[]> {
return this.http.get<Book[]>(this.apiUrl + 'book')
.pipe(
tap(_ => this.log('fetched books')),
catchError(this.handleError('getBooks', []))
);
}
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
this.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
/** Log a HeroService message with the MessageService */
private log(message: string) {
console.log(message);
}
}
4. Create an Ionic 4 and Angular 7 Book Page
Type this command to generate an Ionic 4 and Angular 7 page for the book.
ionic g page book
Create a Typescript file for handle Book object or as a model for Book object.
touch src/app/book/book.ts
Open end edit that file then replaces all codes with this.
export class Book {
_id: number;
isbn: string;
title: string;
author: number;
publisher: Date;
__v: number;
}
Next, open and edit src/app/book/book.page.ts then add this imports.
import { Book } from './book';
import { BookService } from '../services/book.service';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
Inject all required modules to the constructor.
constructor(private bookService: BookService,
private authService: AuthService,
private router: Router) { }
Declare this variable before the constructor.
books: Book[];
Create a function for consuming or get book list from the book service.
getBooks(): void {
this.bookService.getBooks()
.subscribe(books => {
console.log(books);
this.books = books;
});
}
Call this function from ngOnInit.
ngOnInit() {
this.getBooks();
}
Add a function for log out the current session.
logout() {
this.authService.logout()
.subscribe(res => {
console.log(res);
localStorage.removeItem('token');
this.router.navigate(['login']);
});
}
Next, open and edit src/app/book/book.page.html then replace all HTML tags with this.
<ion-header>
<ion-toolbar>
<ion-title>List of Books</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary" (click)="logout()">
<ion-icon slot="icon-only" name="exit"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let b of books">
<ion-label>{{b.title}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
The book page just shows the list of the book and log out button on the title bar.
5. Create the Ionic 4 and Angular 7 Pages for Login and Register
Before creating that pages, create this folder under src/app.
mkdir src/app/auth
Now, generate the Ionic 4 and Angular 7 pages.
ionic g page auth/login
ionic g page auth/register
Next, open and edit src/app/auth/login/login.page.ts then replace all codes with this.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController } from '@ionic/angular';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
loginForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private router: Router,
private authService: AuthService,
public toastController: ToastController) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
'username' : [null, Validators.required],
'password' : [null, Validators.required]
});
}
onFormSubmit(form: NgForm) {
this.authService.login(form)
.subscribe(res => {
if (res.token) {
localStorage.setItem('token', res.token);
this.router.navigate(['book']);
}
}, (err) => {
console.log(err);
});
}
register() {
this.router.navigate(['register']);
}
async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
duration: 2000,
position: 'top'
});
toast.present();
}
}
Next, open and edit src/app/auth/login/login.page.html then replace all HTML tags with this.
<ion-content padding>
<form [formGroup]="loginForm" (ngSubmit)="onFormSubmit(loginForm.value)">
<ion-card>
<ion-card-header>
<ion-card-title>Please, Sign In</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label position="floating">Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item lines="none" lines="full" padding-top>
<ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!loginForm.valid">Login</ion-button>
</ion-item>
<ion-item lines="none">
<ion-button type="button" expand="full" size="default" shape="round" color="medium" (click)="register()">Register</ion-button>
</ion-item>
</ion-card-content>
</ion-card>
</form>
</ion-content>
Next, open and edit src/app/auth/register/register.page.ts then replace all codes with this.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController, AlertController } from '@ionic/angular';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private router: Router,
private authService: AuthService,
public toastController: ToastController,
public alertController: AlertController) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
'username' : [null, Validators.required],
'password' : [null, Validators.required]
});
}
onFormSubmit(form: NgForm) {
this.authService.register(form)
.subscribe(_ => {
this.presentAlert('Register Successfully', 'Please login with your new username and password');
}, (err) => {
console.log(err);
});
}
async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
duration: 2000,
position: 'top'
});
toast.present();
}
async presentAlert(header, message) {
const alert = await this.alertController.create({
header: header,
message: message,
buttons: [{
text: 'OK',
handler: () => {
this.router.navigate(['login']);
}
}]
});
await alert.present();
}
}
Open and edit src/app/auth/login/login.page.html then replace all HTML tags with this.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Register</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<form [formGroup]="registerForm" (ngSubmit)="onFormSubmit(registerForm.value)">
<ion-card>
<ion-card-header>
<ion-card-title>Register here</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label position="floating">Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item lines="none" padding-top>
<ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!registerForm.valid">Register</ion-button>
</ion-item>
</ion-card-content>
</ion-card>
</form>
</ion-content>
6. Run and Test the Ionic 4 and Angular 7 Authentication App
Before the run the Ionic 4 and Angular 7 app, we should run the RESTful API server first. After you clone our Express.js API, run this command in the terminal.
npm i
Open another Terminal tabs if your MongoDB server not running then type this command to run it.
mongod
Back to Express API, type this command to run it.
nodemon
or
npm start
Next, we have to run the Ionic 4 and Angular 7 app by typing this command.
ionic serve -l
You should see these pages if everything working properly.
That it’s, the Ionic 4 and Angular 7 HttpIntercepter and HttpClient implementation to the Authentication app. You can find the full working source code on our GitHub.
We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ion2FullApp ELITE - The Complete Ionic 3 Starter App and save development and design time.
Learn More
☞ Angular 7 (formerly Angular 2) - The Complete Guide
☞ Learn and Understand AngularJS
☞ Angular Crash Course for Busy Developers
☞ The Complete Angular Course: Beginner to Advanced
☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide
☞ Become a JavaScript developer - Learn (React, Node,Angular)
☞ Angular (Full App) with Angular Material, Angularfire & NgRx
#angular #ionic
What is GEEK
Buddha Community
1550072364
How to Implement MFS100 Fingerprint sensor scanner in ionic ?
1608113009
New Angular 7 Features With Example - Info Stans
What is new in New Angular 7? New Angular 7 features have turned out as a powerful release that really brought advancement in the application development structure.
Here, we have listed new Angular 7 features with examples and write the difference between Angular 6 and Angular 7.
- Bundle Budget
- Virtual Scrolling
- Error Handling
- Documentation Updates
- Application Performance
- Native Script
- CLI Prompts
- Component in angular 7
- Drag and Drop
- Angular Do-Bootstrap
Read more: Angular 7 Features With Example
#angular 7 features #what’s new angular 7 #new angular 7 features #angular 7 features with examples
1560822919
Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Example
The comprehensive step by step tutorial on using HTTP Interceptor with Ionic 4 and Angular 7 including a complete example of authentication or login. We will stick Authentication Token to Angular 7 interceptor. So, you don’t have to repeat calling token when call or consume RESTful API. For the RESTful API, we will use our existing Node, Express, Passport and MongoDB that you can get from our GitHub.
Table of Contents:
- Create a new Ionic 4 and Angular 7 App
- Create a custom Angular 7 HttpInterceptor
- Create Ionic 4 Angular 7 Authentication and Book Services
- Create an Ionic 4 and Angular 7 Book Page
- Create the Ionic 4 and Angular 7 Pages for Login and Register
- Run and Test the Ionic 4 and Angular 7 Authentication App
The following tools, frameworks, and modules are required for this tutorial:
- Create a new Ionic 4 and Angular 7 App
- Create a custom Angular 7 HttpInterceptor
- Create Ionic 4 Angular 7 Authentication and Book Services
- Create an Ionic 4 and Angular 7 Book Page
- Create the Ionic 4 and Angular 7 Pages for Login and Register
- Run and Test the Ionic 4 and Angular 7 Authentication App
Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install new Ionic 4 CLI by open the terminal or Node command line then type this command.
sudo npm install -g ionic
You will get the latest Ionic CLI in your terminal or command line. Check the version by type this command.
ionic --version
4.3.1
1. Create a new Ionic 4 and Angular 7 App
To create a new Ionic 4 and Angular 7 application, type this command in your terminal.
ionic start ionic4-angular7-interceptor blank --type=angular
If you see this question, just type N for because we will installing or adding Cordova later.
Integrate your new app with Cordova to target native iOS and Android? (y/N) N
After installing NPM modules and dependencies, you will see this question, just type N because we are not using it yet.
Install the free Ionic Pro SDK and connect your app? (Y/n) N
Next, go to the newly created app folder.
cd ./ionic4-angular7-interceptor
As usual, run the Ionic 4 and Angular 7 app for the first time, but before run as lab mode, type this command to install @ionic/lab.
npm install --save-dev @ionic/lab
ionic serve -l
Now, open the browser and you will the Ionic 4 and Angular 7 app with the iOS, Android, or Windows view. If you see a normal Ionic 4 blank application, that’s mean you ready to go to the next steps.
2. Create a custom Angular 7 HttpInterceptor
Before creating a custom Angular 7 HttpInterceptor, create a folder under app folder.
mkdir src/app/interceptors
Next, create a file for the custom Angular 7 HttpInterceptor.
touch src/app/interceptors/token.interceptor.ts
Open and edit that file the add this imports.
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse,
HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import {
Router
} from '@angular/router';
import { ToastController } from '@ionic/angular';
Create a class that implementing HttpInterceptor method.
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
}
Inject the required module to the constructor inside the class.
constructor(private router: Router,
public toastController: ToastController) {}
Implement a custom Interceptor function.
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('token');
if (token) {
request = request.clone({
setHeaders: {
'Authorization': token
}
});
}
if (!request.headers.has('Content-Type')) {
request = request.clone({
setHeaders: {
'content-type': 'application/json'
}
});
}
request = request.clone({
headers: request.headers.set('Accept', 'application/json')
});
return next.handle(request).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
console.log('event--->>>', event);
}
return event;
}),
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
if (error.error.success === false) {
this.presentToast('Login failed');
} else {
this.router.navigate(['login']);
}
}
return throwError(error);
}));
}
Add function for call a toast controller.
async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
duration: 2000,
position: 'top'
});
toast.present();
}
Next, we have to register this custom HttpInterceptor and HttpClientModule. Open and edit src/app/app.module.ts then add this imports.
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { TokenInterceptor } from './inteceptors/token.interceptor';
Add those modules to the provider array of the @NgModule.
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
],
Now, the HTTP interceptor is ready to intercept any request to the API.
3. Create Ionic 4 Angular 7 Authentication and Book Services
First, create a folder for those services under src/app/.
mkdir src/app/services
Create services or providers for authentication and book.
ionic g service services/auth
ionic g service services/book
Next, open and edit src/app/services/auth.service.ts then replace all codes with this.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthService {
apiUrl = 'http://localhost:3000/api/';
constructor(private http: HttpClient) { }
login (data): Observable<any> {
return this.http.post<any>(this.apiUrl + 'signin', data)
.pipe(
tap(_ => this.log('login')),
catchError(this.handleError('login', []))
);
}
logout (): Observable<any> {
return this.http.get<any>(this.apiUrl + 'signout')
.pipe(
tap(_ => this.log('logout')),
catchError(this.handleError('logout', []))
);
}
register (data): Observable<any> {
return this.http.post<any>(this.apiUrl + 'signup', data)
.pipe(
tap(_ => this.log('login')),
catchError(this.handleError('login', []))
);
}
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
this.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
/** Log a HeroService message with the MessageService */
private log(message: string) {
console.log(message);
}
}
Next, open and edit src/app/services/book.service then replace all codes with this.
import { Injectable } from '@angular/core';
import { Book } from '../book/book';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class BookService {
apiUrl = 'http://localhost:3000/api/';
constructor(private http: HttpClient) { }
getBooks (): Observable<Book[]> {
return this.http.get<Book[]>(this.apiUrl + 'book')
.pipe(
tap(_ => this.log('fetched books')),
catchError(this.handleError('getBooks', []))
);
}
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
this.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
/** Log a HeroService message with the MessageService */
private log(message: string) {
console.log(message);
}
}
4. Create an Ionic 4 and Angular 7 Book Page
Type this command to generate an Ionic 4 and Angular 7 page for the book.
ionic g page book
Create a Typescript file for handle Book object or as a model for Book object.
touch src/app/book/book.ts
Open end edit that file then replaces all codes with this.
export class Book {
_id: number;
isbn: string;
title: string;
author: number;
publisher: Date;
__v: number;
}
Next, open and edit src/app/book/book.page.ts then add this imports.
import { Book } from './book';
import { BookService } from '../services/book.service';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
Inject all required modules to the constructor.
constructor(private bookService: BookService,
private authService: AuthService,
private router: Router) { }
Declare this variable before the constructor.
books: Book[];
Create a function for consuming or get book list from the book service.
getBooks(): void {
this.bookService.getBooks()
.subscribe(books => {
console.log(books);
this.books = books;
});
}
Call this function from ngOnInit.
ngOnInit() {
this.getBooks();
}
Add a function for log out the current session.
logout() {
this.authService.logout()
.subscribe(res => {
console.log(res);
localStorage.removeItem('token');
this.router.navigate(['login']);
});
}
Next, open and edit src/app/book/book.page.html then replace all HTML tags with this.
<ion-header>
<ion-toolbar>
<ion-title>List of Books</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary" (click)="logout()">
<ion-icon slot="icon-only" name="exit"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let b of books">
<ion-label>{{b.title}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
The book page just shows the list of the book and log out button on the title bar.
5. Create the Ionic 4 and Angular 7 Pages for Login and Register
Before creating that pages, create this folder under src/app.
mkdir src/app/auth
Now, generate the Ionic 4 and Angular 7 pages.
ionic g page auth/login
ionic g page auth/register
Next, open and edit src/app/auth/login/login.page.ts then replace all codes with this.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController } from '@ionic/angular';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
loginForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private router: Router,
private authService: AuthService,
public toastController: ToastController) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
'username' : [null, Validators.required],
'password' : [null, Validators.required]
});
}
onFormSubmit(form: NgForm) {
this.authService.login(form)
.subscribe(res => {
if (res.token) {
localStorage.setItem('token', res.token);
this.router.navigate(['book']);
}
}, (err) => {
console.log(err);
});
}
register() {
this.router.navigate(['register']);
}
async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
duration: 2000,
position: 'top'
});
toast.present();
}
}
Next, open and edit src/app/auth/login/login.page.html then replace all HTML tags with this.
<ion-content padding>
<form [formGroup]="loginForm" (ngSubmit)="onFormSubmit(loginForm.value)">
<ion-card>
<ion-card-header>
<ion-card-title>Please, Sign In</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label position="floating">Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item lines="none" lines="full" padding-top>
<ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!loginForm.valid">Login</ion-button>
</ion-item>
<ion-item lines="none">
<ion-button type="button" expand="full" size="default" shape="round" color="medium" (click)="register()">Register</ion-button>
</ion-item>
</ion-card-content>
</ion-card>
</form>
</ion-content>
Next, open and edit src/app/auth/register/register.page.ts then replace all codes with this.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController, AlertController } from '@ionic/angular';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private router: Router,
private authService: AuthService,
public toastController: ToastController,
public alertController: AlertController) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
'username' : [null, Validators.required],
'password' : [null, Validators.required]
});
}
onFormSubmit(form: NgForm) {
this.authService.register(form)
.subscribe(_ => {
this.presentAlert('Register Successfully', 'Please login with your new username and password');
}, (err) => {
console.log(err);
});
}
async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
duration: 2000,
position: 'top'
});
toast.present();
}
async presentAlert(header, message) {
const alert = await this.alertController.create({
header: header,
message: message,
buttons: [{
text: 'OK',
handler: () => {
this.router.navigate(['login']);
}
}]
});
await alert.present();
}
}
Open and edit src/app/auth/login/login.page.html then replace all HTML tags with this.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Register</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<form [formGroup]="registerForm" (ngSubmit)="onFormSubmit(registerForm.value)">
<ion-card>
<ion-card-header>
<ion-card-title>Register here</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label position="floating">Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item lines="none" padding-top>
<ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!registerForm.valid">Register</ion-button>
</ion-item>
</ion-card-content>
</ion-card>
</form>
</ion-content>
6. Run and Test the Ionic 4 and Angular 7 Authentication App
Before the run the Ionic 4 and Angular 7 app, we should run the RESTful API server first. After you clone our Express.js API, run this command in the terminal.
npm i
Open another Terminal tabs if your MongoDB server not running then type this command to run it.
mongod
Back to Express API, type this command to run it.
nodemon
or
npm start
Next, we have to run the Ionic 4 and Angular 7 app by typing this command.
ionic serve -l
You should see these pages if everything working properly.
That it’s, the Ionic 4 and Angular 7 HttpIntercepter and HttpClient implementation to the Authentication app. You can find the full working source code on our GitHub.
We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ion2FullApp ELITE - The Complete Ionic 3 Starter App and save development and design time.
Learn More
☞ Angular 7 (formerly Angular 2) - The Complete Guide
☞ Learn and Understand AngularJS
☞ Angular Crash Course for Busy Developers
☞ The Complete Angular Course: Beginner to Advanced
☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide
☞ Become a JavaScript developer - Learn (React, Node,Angular)
☞ Angular (Full App) with Angular Material, Angularfire & NgRx
#angular #ionic
1598940617
Install Angular - Angular Environment Setup Process
Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.
- Installing Node.js and npm
- Installing Angular CLI
- Creating workspace
- Deploying your First App
In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!
Install Angular in Easy Steps
For Installing Angular on your Machine, there are 2 prerequisites:
- Node.js
- npm Package Manager
Node.js
First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js
Download and Install Node.js version suitable for your machine’s operating system.
Npm Package Manager
Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:
- npm -v
Installing Angular CLI
- Open Terminal/Command Prompt
- To install Angular CLI, run the below command:
- npm install -g @angular/cli
· After executing the command, Angular CLI will get installed within some time. You can check it using the following command
- ng --version
Workspace Creation
Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:
- Using CLI
- Using Visual Studio Code
1. Using CLI
To create a workspace:
- Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
- Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
- Ng new YourAppName
- After running this command, it will prompt you to select from various options about the CSS and other functionalities.
- To leave everything to default, simply press the Enter or the Return key.
#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli
1594631472
Pros and Cons of Ionic Development
Entrepreneurs around the world want a top-notch mobile application for their business in both Android and iOS platforms. Most of them get stuck mid-way where they struggle to pick the best technology suitable for their business. From questions such as native mobile development or cross-platform development? Flutter or Ionic or React Native?. Each technology and development approach has its own Pros and Cons from which you will need to choose the right one for your business. If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development.
What is Ionic Framework?
Being an open-source SDK for building Hybrid mobile applications in both Android and iOS platforms, Ionic is the best choice for building top of the line mobile applications. This Ionic framework is completely based on Apache Cordova and Angular. More precisely, Ionic is an npm module that requires the installation of Node JS to function.
One can build a full functioning mobile application in both platforms using their Javascript, HTML, and CSS knowledge without requiring the basics of Kotlin or Java. More than 5 Million mobile applications are built using this Ionic framework by leveraging its platform-specific UI elements, innumerable libraries, and more exciting features.
The applications that are built using the Ionic framework are cross-platform, web-based, and have access to native device’s APIs.
Ionic Applications are
- Cross-platform – Single code base for both platforms (except native components)
- Web-based – Built using web-views and can be displayed in a browser like PWAs.
- Access to native API components – They can access native device’s camera, files, and others.
Advantages of Ionic Development
Quick Development and Time To Market
For entrepreneurs and business owners, ionic development can be beneficial if they want to develop a mobile application in both platforms in a short period of time while comparing to native applications. Building native applications specifically for each platform can be time-consuming which can imply a delay in time to market and development cost of native applications are generally expensive.
#mobile app development #ionic 4 advantages #ionic 4 best practices #ionic 5 #ionic appflow #ionic capacitor pros and cons #ionic vs react native #react native pros and cons #what is ionic app development
1595344320
Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.
Corona Virus Pandemic has brought the world to a standstill.
Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public places are shut down, the country’s economy is suffering, human health is on stake, people are losing their jobs and nobody knows how worse it can get.
Since most of the places are on lockdown, and you are working from home or have enough time to nourish your skills, then you should use this time wisely! We always complain that we want some ‘time’ to learn and upgrade our knowledge but don’t get it due to our ‘busy schedules’. So, now is the time to make a ‘list of skills’ and learn and upgrade your skills at home!
And for the technology-loving people like us, Knoldus Techhub has already helped us a lot in doing it in a short span of time!
If you are still not aware of it, don’t worry as Georgia Byng has well said,
“No time is better than the present”
– Georgia Byng, a British children’s writer, illustrator, actress and film producer.
No matter if you are a developer (be it front-end or back-end) or a data scientist, tester, or a DevOps person, or, a learner who has a keen interest in technology, Knoldus Techhub has brought it all for you under one common roof.
From technologies like Scala, spark, elastic-search to angular, go, machine learning, it has a total of 20 technologies with some recently added ones i.e. DAML, test automation, snowflake, and ionic.
How to upgrade your skills?
Every technology in Tech-hub has n number of templates. Once you click on any specific technology you’ll be able to see all the templates of that technology. Since these templates are downloadable, you need to provide your email to get the template downloadable link in your mail.
These templates helps you learn the practical implementation of a topic with so much of ease. Using these templates you can learn and kick-start your development in no time.
Apart from your learning, there are some out of the box templates, that can help provide the solution to your business problem that has all the basic dependencies/ implementations already plugged in. Tech hub names these templates as xlr8rs (pronounced as accelerators).
xlr8rs make your development real fast by just adding your core business logic to the template.
If you are looking for a template that’s not available, you can also request a template may be for learning or requesting for a solution to your business problem and tech-hub will connect with you to provide you the solution. Isn’t this helpful 🙂
Confused with which technology to start with?
To keep you updated, the Knoldus tech hub provides you with the information on the most trending technology and the most downloaded templates at present. This you’ll be informed and learn the one that’s most trending.
Since we believe:
“There’s always a scope of improvement“
If you still feel like it isn’t helping you in learning and development, you can provide your feedback in the feedback section in the bottom right corner of the website.
#ai #akka #akka-http #akka-streams #amazon ec2 #angular 6 #angular 9 #angular material #apache flink #apache kafka #apache spark #api testing #artificial intelligence #aws #aws services #big data and fast data #blockchain #css #daml #devops #elasticsearch #flink #functional programming #future #grpc #html #hybrid application development #ionic framework #java #java11 #kubernetes #lagom #microservices #ml # ai and data engineering #mlflow #mlops #mobile development #mongodb #non-blocking #nosql #play #play 2.4.x #play framework #python #react #reactive application #reactive architecture #reactive programming #rust #scala #scalatest #slick #software #spark #spring boot #sql #streaming #tech blogs #testing #user interface (ui) #web #web application #web designing #angular #coronavirus #daml #development #devops #elasticsearch #golang #ionic #java #kafka #knoldus #lagom #learn #machine learning #ml #pandemic #play framework #scala #skills #snowflake #spark streaming #techhub #technology #test automation #time management #upgrade