teleren/devto huggingface dataset:
Tutorial: "How to Integrate Angular 8 and SpringBoot RestAPIs Example"

Tags: angular, angular8, springboot, restapi
Published: 2021-04-10 17:07:22

How to Integrate Angular 8 and SpringBoot RestAPIs Example

https://ozenero.com/how-to-integrate-angular-8-and-springboot-restapis-example

Tutorial: "How to Integrate Angular 8 and SpringBoot RestAPIs Example"

In the tutorial, we show you how to integrate Angular 8 with SpringBoot RestAPI for development using SpringToolSuite IDE.

<ul>
<li>Setup Nodejs and Angular CLI</li>
<li>Create simple Springboot RestAPIs</li>
<li>Setup Angular 8 project</li>
<li>Import Angular 8 to SpringToolSuite</li>
<li>Integrate SpringBoot RestAPI with Angular 8</li>
</ul>

Related posts:

- <a href="https://ozenero.com/angular-tutorial">Angular Tutorial</a>.
- <a href="https://ozenero.com/spring-framework/spring-boot/spring-boot-angular-6-example-spring-data-rest-mongodb-crud-example">Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example</a>

<!--more-->
<h2>Technologies</h2>
- Node.js
- Angular 8
- SpringBoot 2.x
- SpringToolSuite
<h2>Goal</h2>
- We create an Angular 8 client & SpringBoot RestAPI as below structure:

Angular 8:

<img src="https://ozenero.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-angular-8-project-structure-1.png" alt="angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-1" width="607" height="433" class="alignnone size-full wp-image-17957" />

SpringBoot project:

<img src="https://ozenero.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-springboot-project.png" alt="angular-8-integrate-with-springboot-tutorial---springboot-project" width="281" height="291" class="alignnone size-full wp-image-17958" />

Use Angular 8 client to call Spring RestAPI, we get:

<img src="https://ozenero.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-request-through-proxy.png" alt="angular-8-integrate-with-springboot-tutorial---request-through-proxy" width="352" height="132" class="alignnone size-full wp-image-17959" />

Deploy Angular 8 production-build with Spring-Boot project, We get:

<img src="https://ozenero.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-angular-8-integrate-with-spring-boot.png" alt="angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot" width="448" height="137" class="alignnone size-full wp-image-17960" />
<h2>Setup Node.js</h2>
More at:

https://ozenero.com/how-to-integrate-angular-8-and-springboot-restapis-example
How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4

Tags: angular, springboot
Published: 2021-04-10 16:57:14

https://ozenero.com/use-angular-http-client-fetch-data-springboot-restapi

How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4

In the previous <a href="https://ozenero.com/frontend/angular/develop-angular-service-angular4-service">post</a>, we had introduced <strong>Angular Service</strong> (Angular 4 Service) but we did it with a mock data solution. So in the tutorial, <strong>JavaSampleApproach</strong> will show you how to use <strong>Angular HTTP Client</strong> inside <strong>Angular Service</strong> to fetch data from <strong>SpringBoot RestApi</strong>.

Related articles:
- <a href="https://ozenero.com/frontend/angular/develop-angular-service-angular4-service">How to develop with Angular Service (Angular 4 Service)</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/integrate-angular4-springboot-web-app-springtoolsuite">How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/work-angular-routing-spring-boot-angular-4">How to work with Angular Routing – Spring Boot + Angular 4</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/use-angular-httpclient-post-put-delete-data-springboot-rest-apis-angular-4">How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/angular-4-spring-jpa-postgresql-example-angular-4-http-client-spring-boot-restapi-server">Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/angular-4-spring-jpa-mysql-example-angular-4-http-client-spring-boot-restapi-server">Angular 4 + Spring JPA + MySQL example | Angular 4 Http Client – Spring Boot RestApi Server</a>

<!--more-->
<iframe width="853" height="480" src="https://www.youtube.com/embed/S3BEO3NKsjo?rel=0" frameborder="0" allowfullscreen></iframe>
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
– Angular 4
– Node.js
<h2>II. Angular Http Client</h2>
<strong>HTTP Client</strong> is a solution to exchange data with a remote server. <strong>Angular Http</strong> is an injectable class, which has a set of request methods:

- request():  to performs any type of http request.
- get(): performs a request with <strong>get</strong> http method.
- post(): performs a request with <strong>post</strong> http method.
- put(): performs a request with <strong>put</strong> http method.    
- delete(): performs a request with <strong>delete</strong> http method.
- patch(): performs a request with <strong>patch</strong> http method.
- head(): performs a request with <strong>head</strong> http method.
- options(): to performs a request with 'options' http method.

More at:

https://ozenero.com/use-angular-http-client-fetch-data-springboot-restapi
Recursion, why is helpful but not in JS, ;(
Tags: devjournal, javascript, tutorial, algorithms
Published: 2021-04-10 16:23:20

Recursion according to [DSA Course from Zero To Mastery](https://academy.zerotomastery.io/p/master-the-coding-interview-data-structures-algorithms) is an algorithmn, that allows to define something in terms of itself or a function that call itself.

For example
```js
let multiplyBy5 = (num) => {
  if(num === 1) return 5
  return multiplyBy5(num - 1) + 5
}
```
As you can see recursion, is useful for repetitive task.
Of courser iterative solutions are way more better for this small problems.
But when you need to traverse a tree or a graph ( something that is wildly uncommon for Js developer )

Or validate a Binary Search Tree.
```js
const isValidBST = function(root, min, max) {
    if(!root) return true
    
    if( (min && root.val <= min.val) || (max && root.val >= max.val) ) 
        return false
    
    return isValidBST(root.left, min, root) && isValidBST(root.right, root, max)
};

```
Recursion offers :
- DRY Code (Don't repeate yourself)
- Readability
- Useful when you don't know how deep a data structure is
- Solve problems using a divide and conquer approach
 
Tradeofs:
- Iterative solution are more efficient, since they don't have additional function call (they don't use the call stack)
- Space complexity and Recursion are not friends
- For new developers it's hard to wrap around their minds

To solve the space complexity issue, there is something call:
- Tail Call Optimization
It allows recursion without increasing the call stack

However, and the reason you're here.

Supringsingly, only [Apple Products*](https://kangax.github.io/compat-table/es6/#test-proper_tail_calls_(tail_call_optimisation), support this feature.

The others major js enviroment like, Chrome, Firefox, Edge (client side) and node.js (server side) doesn't support and that might never changes.
How to start Apache Camel: Message Router with Spring Boot

Tags: springboot, apache, camel
Published: 2021-04-10 16:22:19

https://grokonez.com/java-integration/start-apache-camel-message-router-spring-boot

Apache Camel supports most of the Enterprise Integration Pattern, an engine for routing message. The tutorial will guide you how to start with Apache Camel by Spring Boot.

Related Articles:
- <a href="https://grokonez.com/spring-framework/spring-boot/start-spring-apache-kafka-application-springboot">How to start Spring Apache Kafka Application with SpringBoot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/use-spring-jms-activemq-jms-consumer-jms-producer-spring-boot">How to use Spring JMS with ActiveMQ – JMS Consumer and JMS Producer | Spring Boot</a>

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technologies for Apache Camel tutorial</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: 1.4.0.RELEASE
- ActiveMQ 5.8.0 Release

<h2>II. Overviews</h2>
<h3>1. Structure of project</h3>
<img class="alignnone size-full wp-image-1049" src="https://grokonez.com/wp-content/uploads/2016/09/apache-camel-message-router-structure-of-project.png" alt="apache camel message router - structure of project" width="610" height="698" />
<h3>2. Step to do</h3>
- Create Spring Boot project
- Add needed dependencies
- Configure main run controller for Camel
- Create ActiveMQ Connection bean
- Create Router class
- Run &amp; check result
<h2>III. Practices</h2>
<h3>1. Create Spring Boot project</h3>
Open Spring Tool Suite, on main menu choose <strong>File-&gt;New-&gt;Spring Starter Project</strong>, input project info as below:

<img class="alignnone size-full wp-image-1050" src="https://grokonez.com/wp-content/uploads/2016/09/spring-apache-router-create-spring-boot-project.png" alt="spring apache router - create spring boot project" width="461" height="635" />

Press <strong>Next</strong> then <strong>Finish</strong>. Spring Boot project is created successfully.
<h3>2. Add needed dependencies</h3>

More at:

https://grokonez.com/java-integration/start-apache-camel-message-router-spring-boot
An agile and resilient mindset
Tags: agile, stress, resilience, productivity
Published: 2021-04-10 16:07:03

It has been proven that all developers face stress sometimes despite the higher or lower number of years of experience. I am going to share my agile experience and demonstrate how positively and negatively stress influenced my career as a developer along with how I developed resilience. 

It was a must that as a full-time Bootcamp intern and mobile developer at Uplus I would encounter some kind of stress. Initially, on one hand, stress encouraged me to embrace the multitasking and time management challenge. on the other hand, I was always tired and emotionally stress therefore I had to develop a resilient mindset and learn how to cope with the situation. In short, resilience is a process of adapting well in the face of adversity. 

The first tip for resilience is positivity. I always felt energetic and ready to keep pushing, every single time I focused on the main reason why I joined the task force - which is to professionalize both my technical and soft skills.    

Proactivity and learning from my previous week's experience helped me to adopt a new strategy for dealing with high stress. I had to start working on tasks early in the weekend so that I can have smooth stressless weekdays. That approach assisted to save time for relaxing and exercising which are the other resilience tips. 

When the aforementioned tips combined with agile project management encreases project implementation pace, provides better results and ensures a healthy developer's life. 

I would like to conclude by emphasizing that developing a resilient mindset takes time and consistent practices because setbacks and unexpected things that cause stress will inevitably be there when working on a project or generally in life. Also,
applying agile methodology will help to have a clear and stressless project implementation.
HTTP Status Codes
Tags: http, browser, server, web
Published: 2021-04-10 16:06:28

**HTTP** status codes tell the client about the sever's response to a particular request. We receive the status code in the response header sent from the server. 404 is one of the most popular status code which shows up when a resource you requested is not found.

HTTP status codes are categorized into five classes. all the codes in these classes have a specific meaning.

The five classes are :

**1XX** 

 These status codes from 100-199 are informational responses. The most common status code is 100(continue), indicating that everything so far is fine and that the client should continue the request.

**2XX** 

These status codes from 200-299 indicate successful responses. The most common status code is 200 which means OK. The term successful response depends upon the  HTTP method in which the request is sent to the server. For eg: if it was the GET method, a status code of 200 means the resource has been fetched successfully.

**3XX** 

 These status codes from 300-399 indicate redirection. This means that the resource you are trying to access may be moved temporarily or permanently to another location and the client is redirected to the new location. The most common one is 301 which means the requested resource has been moved permanently to a new location.

**4XX** 

These status codes from 400 - 599 indicated client errors. This may be due to an incorrect URL or trying to access something that is not available or which we are not allowed to access or any other reason the client needs to take care of. The most common codes are 403 which means that the client is not authorized to access the resource and  404 which means that the requested resource is not found. Some servers also send this instead of 403 to hide the existence of a resource from an unauthorized client.

**5XX** 

These status codes from 500-599 indicate server errors. This means that the request from the client was accepted but cannot be fulfilled due to issues with the server. The most common response is 503(service unavailable) which means that server is not ready to handle the request. This might be due to the overloading of the server or as the server is down for maintenance.

> **Note**: There might be other status codes that do not belong to this category which are specific to some servers and all the status codes from 100-600 are not standard. Status codes are guided by section 10 of [RFC 2616.](https://datatracker.ietf.org/doc/html/rfc2616#section-10)
Hole dir das Google Featured Snippet
Tags: seothemen, google, snippet
Published: 2021-04-10 17:40:52

---
title: Hole dir das Google Featured Snippet
published: true
date: 2021-04-10 15:53:44 UTC
tags: SEOThemen,google,snippet
canonical_url: https://j0e.org/featured-snippet/
---

![Google Featured Snippet](https://j0e.org/wp-content/uploads/2021/04/google-featured-snippet.png)

 Snippet-Optimierung ist etwas, über das ich schon lange spreche. Ich bin nun etwas tiefer eingetaucht, …

Was ist ein Featured Snippet? Das Featured Snippet ist die Antwort auf eine Suchanfrage, die von Google in den Suchergebnissen angezeigt werden soll.

 Weiter Lesen » [Hole dir das Google Featured Snippet](https://j0e.org/featured-snippet/)
Next.js Blog Starter with TypeScript and MDX
Tags: nextjs, typescript, mdx, tailwindcss
Published: 2021-04-10 15:02:54

---
title: Next.js Blog Starter with TypeScript and MDX
published: true
description: A Next.js website starter made with TypeScript, MDX, and Tailwind CSS. Perfect for your next blog or personal site.
tags: nextjs, typescript, mdx, tailwindcss
//cover_image: https://direct_url_to_image.jpg
---

Hey Everyone!

I just made a new website starter for Next.js, built with TypeScript, MDX, and Tailwind CSS. It should serve as a nice starting point for a personal blog or website.

[Check out the demo](https://nextjs-typescript-mdx-blog.vercel.app/)

To get started:

```bash
git clone https://github.com/ChangoMan/nextjs-typescript-mdx-blog.git
cd nextjs-typescript-mdx-blog

yarn install
# or
npm install

yarn dev
# or
npm run dev
```
Your development site will be up at http://localhost:3000/
SpringData MongoDB GridFsTemplate to save, retrieve, delete binary files (Image, Text files)

Tags: springdata, mongodb, gridfstemplate
Published: 2021-04-10 15:46:48

https://grokonez.com/spring-framework/spring-data/springdata-mongodb-gridfstemplate-save-retrieve-delete-binary-files-image-text-files

SpringData MongoDB GridFsTemplate to save, retrieve, delete binary files (Image, Text files)

MongoDB provides GridFS for storing and retrieving large files with size limit of 16MB. So in the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show you how to work with <strong>SpringData Mongo GridFsTemplate</strong> to save, retrieve, delete binary files (Image, Text files).

Related posts:
- <a href="https://grokonez.com/spring-framework/spring-boot/bootstrap-image-mongodb-gridfstemplate-image-springboot-restapi">Bootstrap Image + MongoDB GridFsTemplate + SpringBoot RestAPI</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/spring-data-mongooperations-accessing-mongo-database">Spring MongoOperations to access MongoDB</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/mongodb-model-one-one-one-many-relationships-mongodb-embedded-documents-springboot">MongoDB – Model One-to-One, One-to-Many Relationships Embedded Documents | SpringBoot</a>

<!--more-->
<h2>I. Technologies</h2>
– Java: 1.8
– Maven: 3.3.9
– Spring Tool Suite: Version 3.8.4.RELEASE
– Spring Boot: 1.5.7.RELEASE
– MongoDB: version v3.4.9
<h2>II. SpringData Mongo GridFsTemplate</h2>
SpringData MongoDb provides <code>GridFsTemplate</code> class to work with <strong>GridFs</strong> file, details:

<pre><code class="language-java">
public class GridFsTemplate implements GridFsOperations, ResourcePatternResolver {
...

}</code></pre>

<code>GridFsTemplate</code> implement <code>interface GridFsOperations</code> that is the collection of operations to store and read files from MongoDB GridFS.

For convenient working, SpringBoot provides <code>spring-boot-starter-data-mongodb</code> dependency that is the collection of {<code>mongodb-driver</code>, <code>spring-data-mongodb</code>}.
<h2>III. Practice</h2>
In the tutorial, we create a SpringBoot project as below:

<img src="https://grokonez.com/wp-content/uploads/2017/09/SpringData-Mongo-GridFs-project-structure.png" alt="SpringData Mongo GridFs - project structure" width="340" height="182" class="alignnone size-full wp-image-8132" />

<strong>Step to do</strong>:
- Create SpringBoot project
- Configure GridFsTemplate
- Implement RestAPIs to work with GridFs files
- Run & check results
<h3>1. Create SpringBoot project</h3>

More at:

https://grokonez.com/spring-framework/spring-data/springdata-mongodb-gridfstemplate-save-retrieve-delete-binary-files-image-text-files
Search Git commit message
Tags: github, git
Published: 2021-04-10 15:35:30

This post will help you to search git commit messages and few other tricks of git log.

### Git logging command

#### git log
The above command will help you see all the log details as shown below. Log details will include author, date and commit message.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n31nwoyerat41ug716gf.PNG)

#### git log --oneline
The above command will help you to have a concise view of the log as shown below (This will only show commit number and commit message) .

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m2j2q4nm8s5mr94jfey.png)

#### git log --oneline --grep="search word(s)"
The above command will help you search in git commit message for the search word(s) specified.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35p1ks7ds02elyzyllg8.PNG)

I create videos on ASP.Net, WebApi, Entity Framework, Javascript, Git and Bootstrap Design.
You can subscribe to my channel @ 
[My Channel Link](https://www.youtube.com/channel/UCajNSAb41SHFYAsCJxUKIMw?sub_confirmation=1)
Couchbase – How to create Spring JPA Couchbase application with SpringBoot

Tags: couchbase, springjpa, springboot
Published: 2021-04-10 15:35:12

https://grokonez.com/spring-framework/spring-data/couchbase-create-spring-jpa-couchbase-application-springboot

<strong>Couchbase</strong> server is an open source, distributed multi-model <a href="https://grokonez.com/tag/nosql">NoSQL</a> document-oriented database.  So in the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show you how to create a <strong>Spring JPA Couchbase</strong> with <a href="https://grokonez.com/tag/spring-boot">SpringBoot</a>.

Related posts:
- <a href="https://grokonez.com/spring-framework/spring-boot/couchbase-create-spring-cache-couchbase-application-springboot">Couchbase – How to create Spring Cache Couchbase application with SpringBoot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/how-to-use-springdata-mongorepository-to-interact-with-mongdb-springboot-application">How to use SpringData MongoRepository to interact with MongoDB</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/start-spring-data-cassandra-springboot">How to start Spring Data Cassandra with SpringBoot</a>

<!--more-->
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: 1.5.6RELEASE
- Couchbase 4.6.2
<h2>II. SpringBoot & Couchbase </h2>
<a href="https://grokonez.com/tag/spring-boot">Spring Boot</a> provides auto-configuration for <strong>Couchbase</strong> and abstractions on top of it by <strong>Spring Data Couchbase</strong>. We can use it easily via <code>spring-boot-starter-data-couchbase</code> 'Starter' which had collected the needed dependencies.

<img src="https://grokonez.com/wp-content/uploads/2017/08/SpringBoot-Couchbase-Architecture-resize.png" alt="Spring JPA Couchbase - SpringBoot - Architecture" width="700" height="407" class="alignnone size-full wp-image-7458" />

For connecting with Couchbase <strong>Bucket</strong> and <strong>Cluster</strong>, we can use <code>spring.couchbase.*</code> properties in <strong>application.properties</strong> file:

<pre><code class="language-java">
spring.couchbase.bootstrap-hosts=127.0.0.1
spring.couchbase.bucket.name=jsabucket
spring.couchbase.bucket.password=123456
spring.data.couchbase.auto-index=true
</code></pre>

For working with <strong>Couchbase</strong> repository, we use <code>CouchbaseRepository</code> interface: 


More at:

https://grokonez.com/spring-framework/spring-data/couchbase-create-spring-jpa-couchbase-application-springboot