grokonez - Page 2 of 35 - Simple, feasible, practical, integrative Programming Tutorials

Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

Vue Router deeply integrates with Vue.js that we can use to build single-page Vue Application in simple way. In this tutorial, we’re gonna look at a Vue Router example that allows us to navigate among tabs and dynamically show item details from a item list with Nav bar, Dynamic Route and Nested Routes.

More Practice:
– Spring Boot + Vue.js example | Spring Data JPA + REST + PostgreSQL CRUD
– Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD

[Continue reading…] “Vue Router example – with Nav Bar, Dynamic Route & Nested Routes”

Vue.js Firestore example – Vue.js CRUD serverless with Firebase Cloud Firestore

Cloud Firestore helps us store data in the cloud. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. We can structure data in our ways to improve querying and fetching capabilities. This tutorial shows you a Vue.js app that can do Firebase Firestore CRUD Operations.

[Continue reading…] “Vue.js Firestore example – Vue.js CRUD serverless with Firebase Cloud Firestore”

Vue.js Firebase Database example – CRUD Operations

In previous post, we had built a simple Note App that represents Vue.js CRUD example with Vue CLI 3 for building project. This tutorial shows you how to integrate the Vue.js Project with Firebase Database and do CRUD operations.

[Continue reading…] “Vue.js Firebase Database example – CRUD Operations”

Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

In the tutorial, we show how to work with Angular Built-in Uppercase, Lowercase and Titlecase pipes.

Angular Tutorials

[Continue reading…] “Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example”

Vue.js CRUD example – a simple Note App

In this tutorial, we’re gonna create a simple Note App that represents Vue.js CRUD example with Vue CLI 3 for building project.

More Practice:
– Vue.js Firebase Database example – CRUD Operations
– Vue.js Firestore example – Vue.js CRUD serverless with Firebase Cloud Firestore

[Continue reading…] “Vue.js CRUD example – a simple Note App”

Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example

In the tutorial, we show how to work with Angular impure built-in SlicePipe to create a new Array or String containing a subset of the elements.

Angular Tutorials

[Continue reading…] “Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example”

Angular 6 Custom Pipe | with Parameterizing a pipe | Angular Pure pipes + Impure pipes

In the tutorial, we show how to create an Angular Custom Pipe with Angular Pure Pipe, and Angular Impure Pipe.

Angular Tutorial

[Continue reading…] “Angular 6 Custom Pipe | with Parameterizing a pipe | Angular Pure pipes + Impure pipes”

Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format

In the tutorial, we show how to work with Angular Built-in DatePipe to display Date object in UI.

Angular Tutorials

[Continue reading…] “Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format”

Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example

Angular 6.1 provides a new KeyValue pipe transforms Object or Map into an array of key value pairs. In the tutorial, we will guide how to iterate through Object, Map with KeyValue pipe.

Angular Tutorials

[Continue reading…] “Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example”

Angular 6 WebSocket example with Spring Boot WebSocket Server | SockJS + STOMP

The WebSocket protocol provides new capability for web applications: full-duplex, two-way communication. So in the system where the client and server need to exchange data at high frequency and with low latency, WebSocket is the best solution. In this tutorial, we’re gonna create an Angular 6 WebSocket Client to send/receive message with a Spring Boot Server.

[Continue reading…] “Angular 6 WebSocket example with Spring Boot WebSocket Server | SockJS + STOMP”

Angular 6 + Node.js + Amazon S3 | Upload Files + Download Files + List Files | using Express RestAPI, Multer, AWS-SDK

In the tutorial, we show how to use Angular 6 Client to download files/ upload files from Amazon S3 by Node.js RestAPIs server using Multer middleware and AWS-SDK.

Node.js Tutorial

[Continue reading…] “Angular 6 + Node.js + Amazon S3 | Upload Files + Download Files + List Files | using Express RestAPI, Multer, AWS-SDK”

Node.js RestAPIs Download File from Amazon S3 | using Express, AWS-SDK

In the tutorial, we show how to build a Node.js/Express RestAPIs to Download Files from Amazon S3 using AWS-SDK.

Previous post:
– Node.js RestAPIs upload file to Amazon S3

Node.js Tutorial

[Continue reading…] “Node.js RestAPIs Download File from Amazon S3 | using Express, AWS-SDK”

Node.js RestAPIs upload file to Amazon S3 | using Express, Multer, AWS-SDK

In the tutorial, we show how to build a Node.js/Express RestAPIs to Upload Files to Amazon S3 using Multer middleware and AWS-SDK.

Node.js Tutorial

[Continue reading…] “Node.js RestAPIs upload file to Amazon S3 | using Express, Multer, AWS-SDK”

Angular 6 NGXS example – Angular State Management

NGXS Store is a state management solution for Angular apps that helps us build applications by working around our app’s data (state). In this tutorial, we’re gonna look at how to work with NGXS Store, custom Actions, handle dispatched Actions with @Action and @Select/@Selector decorator. Then we will practice to understand all of them in a simple practical Angular 6 example.

Related Posts:
– NgRx: Angular 6 NgRx Store example – Angular State Management
– State Management with Redux:

– Reactive Streams:

[Continue reading…] “Angular 6 NGXS example – Angular State Management”

Spring JPA/Hibernate One-to-Many Association + PostgreSQL | SpringBoot CRUD RestAPIs Post/Get/Put/Delete example

In the tutorial, we show how to expose CRUD RestAPIs Post/Get/Put/Delete to interact with Hibernate Spring JPA One-to-Many association models using SpringBoot and PostgreSQL database.

Previous post:
– Expose CRUD RestAPIs Spring JPA One-to-One Association

SpringBoot Tutorial

[Continue reading…] “Spring JPA/Hibernate One-to-Many Association + PostgreSQL | SpringBoot CRUD RestAPIs Post/Get/Put/Delete example”

Angular 6 NgRx Store example – Angular State Management

NgRx Store is a state management solution for Angular apps that helps us build applications by working around our app’s data (state). In this tutorial, we’re gonna look at how to work with NgRx Store, custom Actions, Reducers. Then we will practice to understand all of them in a simple practical Angular 6 example.

Related Posts:
– NGXS: Angular 6 NGXS example – Angular State Management
– State Management with Redux:

– Reactive Streams:

[Continue reading…] “Angular 6 NgRx Store example – Angular State Management”

SpringBoot + Hibernate Spring JPA One-to-One Association + PostgreSQL | CRUD RestAPIs Post/Get/Put/Delete

In the tutorial, we show how to expose Crud RestAPIs Post/Get/Put/Delete to interact with Hibernate Spring JPA One-to-One relationship models using SpringBoot and PostgreSQL database.

SpringBoot Tutorials

[Continue reading…] “SpringBoot + Hibernate Spring JPA One-to-One Association + PostgreSQL | CRUD RestAPIs Post/Get/Put/Delete”

How to Install Maven on Windows

In the tutorial, we show how to install Maven on Windows.

Environment:
– Windows 10
– Java 10
– Lastest Maven 3.5.4

[Continue reading…] “How to Install Maven on Windows”

Angular 6 HttpClient + Node.js/Express RestAPIs + MariaDB example | Sequelize ORM CRUD APIs example

In this tutorial, we show you Angular 6 Http Client & Node.js/Express Server example that uses Sequelize ORM to do CRUD with MariaDB and Angular 6 as a front-end technology to make request and receive response.

Node.js Tutorial
Angular Tutorial

[Continue reading…] “Angular 6 HttpClient + Node.js/Express RestAPIs + MariaDB example | Sequelize ORM CRUD APIs example”

Sequelize CRUD MariaDB example | Build CRUD Node.js/Express RestAPIs example

Sequelize is a promise-based ORM for Node.js v4 and later. In the tutorial, we will show how to build CRUD RestAPIs with Node.js/Express, Sequelize, MariaDB.

– Sequelize ORM – Build CRUD RestAPIs with NodeJs/Express, Sequelize, MySQL
– Angular 6 HttpClient – Upload Files/Download Files to MySQL with Node.js/Express RestAPIs – using Multer + Sequelize ORM
– Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL – Get/Post/Put/Delete RestAPIs
– NodeJS – GridFS APIs Upload/Download Files to MongoDB – Mongoose
– Angular 6 Client – Upload Files/Download Files to PostgreSQL with SpringBoot RestAPIs example
– Sequelize One-To-One association – NodeJS/Express, MySQL

[Continue reading…] “Sequelize CRUD MariaDB example | Build CRUD Node.js/Express RestAPIs example”

Angular 6 ElasticSearch example – simple Full Text Search

In the previous posts, we had know how to get All Documents in Index and show them with pagination. This tutorial show you way to implement a simple Full Text Search in an Angular 6 Application.

[Continue reading…] “Angular 6 ElasticSearch example – simple Full Text Search”