Create a new component in angular

If you are Not aware of basis environment set up and Hello world of angular please go through below links for the context.


1 . angular-4/5/6-set-up-environment
2 . angular-5-hello-world-step-by-step


Above links help us in creating ready made application which angular CLI provide us but now we want a component of our own.


Step 1:  

Creating a Custom Component

navigate to your folder structure where you want to create your custom component
and then run below command

ng g component customHelloWorld

like this :

D:\Rakesh_kumar_Singhania\Angular5HelloWorld\hello-world-app\src\app>

ng g component customHelloWorld

This command will create your component and also it make sure to mark an entry in your app.module.ts file.

app.module.ts -- This file holds all the source required by the project which include all the imports of the components.

below is the snapshot of generated files :

Beauty of command ng g component customHelloWorld is 

This command generated 4 for the component :

1 . HTML file of your component
2. Test file for your component
3. TS file for writing your logic.
4. CSS file for styling.


Step 2:  

Open auto generated file custom-hello-world.component.ts.

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

  constructor() { }

  ngOnInit() {   
   console.log("hello");
  }
}

and and modify custom-hello-world.component.html according to your need.

<p>
  custom-hello-world works!
</p>

Below code is important in sense of mapping your HTML file and CSS file specific to this component.

@Component({
  selector: 'app-custom-hello-world',
  templateUrl: './custom-hello-world.component.html',
  styleUrls: ['./custom-hello-world.component.css']
})

So whenever you use app-custom-hello-world selector in any of your HTML it will render the
HTML part of custom-hello-world.component.html.



Lets use app-custom-hello-world  selector tag in our app.component.html.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to Custom component {{ title }}!
  </h1>
 <app-custom-hello-world></app-custom-hello-world>
</div>

Start the server using

 ng serve 

Hit on the url http://localhost:4200


Output :

Angular 5 Hello world step by step

Step 1: Prerequisites


Install Node.js & npm

Angular 4/5/6 set up environment


Install Angular CLI

Creating a new Angular app is a bit tedious job especially when you are new to Typescript as there will be lot of initial configurations involved. In order make it simpler Google came up with the utility called Angular CLI, using which we can create and manage our app from command line itself


In order to install Angular CLI open Node.js command prompt/command prompt and run the below command

npm install -g @angular/cli

Install Code Editor

There are multiple code editors available in market

1. Microsoft Visual Code Studio
2. Brackets
3. Notepad++,
4. Sublime Text

As I m Fond of eclipse so I have installed angular plugin in eclipse as Angular editor.


Step 2: Create Project

Lets build our First Angular 5 Hello World application


Create a new folder with folder name “Angular5HelloWorld” anywhere you want.

Open command prompt and navigate to the folder.


Use the ng new command to create our Hello World Angular Project ng new hello-world-app

Ng stands for aNGular. NG is a core module, and this module contains all the directives that comes built in with the AngularJS library file.

D:\Rakesh_kumar_Singhania\Angular5HelloWorld>ng new hello-world-app

In case you get error that 'ng' is not recognized command

To solve that go to :

Control Panel > User accounts > Change my environmnet variables

and add the path to your AppData\Roaming\npm, in my case it was

C:\Users\rakeshkumar\AppData\Roaming\npm

Above command ng new hello-world-app creates a MAGIC...!!

This command add 1102 packages and all required dependencies for your first project.

Now your project 'hello-world-app' is successfully created.



Step 3: Run our first application

Navigate to your newly created project and run below command to run your application.

D:\Rakesh_kumar_Singhania\Angular5HelloWorld\hello-world-app>ng serve

This command will start the server and will launch the default Angular Application build by Angular CLI.

If you see above screen after running command then congratulations everything is fine with your application and your are good to go.

Default url to launch application is : http://localhost:4200/


Step 4 :Output

Next :create a customize component
http://librakblog.blogspot.com/2018/07/create-new-component-in-angular.html

TypeError: Cannot read property 'thisCompilation' of undefined

Follow these steps one by one  to resolve the error on windows/linux machine

npm i -g @angular/cli@latest

rm -rf node_modules / rd /s /q node_modules 

npm cache clear --force

npm cache verify

npm install

npm uninstall webpack

npm install --save-dev --save-exact @angular/cli@latest

You might get below error also 

webpack/lib/node/NodeTemplatePlugin'


Solution 

npm remove webpack -g

npm i webpack --save-dev

In MemoryDatabase H2 with SpringBoot

An in memory database is created when an application starts up and destroyed when the application is stopped.
That means there is no persistence of data and every time you restart or stop you application your saved data will be lost.

H2

H2 is one of the popular in memory databases. Spring Boot has very good integration for H2.

H2 is a relational database management system written in Java. It can be embedded in Java applications or run in the client-server mode.

H2 also provides a web console to maintain the database.



Setting up a Spring Boot Project with H2


Spring Initializer http://start.spring.io/ is great tool to bootstrap your Spring Boot projects.

As shown in the image above, following steps have to be done

Launch Spring Initializer and choose the following

1. Choose com.rks as Group
2. Choose H2-console as Artifact
3. Choose following dependencies

• Web
• JPA
• H2
• DevTools

Click Generate Project.

Import the project into Eclipse.

File -> Import -> Existing Maven Project.

Create a simple Employee Entity with a primary key id.

package com.rks.h2console;
import javax.persistence.*;
@Entity
@Table(name = "employee")
public class Employee {

    @Id
    @Column
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    @Column
    private String firstName;
    @Column
    private String lastName;
    @Column
    private String email;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

Edit properties file placed in 

/src/main/resources/application.properties

# Enabling H2 Console

spring.h2.console.enabled=true

# Show all queries
spring.jpa.show-sql=true

#DB configurations

spring.datasource.url=jdbc:h2:mem:rksdb

spring.datasource.driverClassName=org.h2.Driver

spring.datasource.username=test

spring.datasource.password=test

spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

Run your application from file EmployeePortalApplication.

Right click -> RunAs ->JavaApplication

package com.rks.h2console;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class EmployeePortalApplication {
    public static void main(String[] args) {
        SpringApplication.run(EmployeePortalApplication.class, args);
    }
}

When you reload the application, you can launch up H2 Console at http://localhost:8080/h2-console.





 As soon as Spring Boot sees H2 in the class path, it auto configures a data source It knows that you are using an in memory database H2 and it uses the default url if you don’t provide one.


All tables will automatically get created by hibernate corresponding to the beans you have created but if you want to create table using sql scripts

You can also populate some data into student table by adding a file called data.sql

/src/main/resources/data.sql

create table student
(
   id integer not null,
   name varchar(255) not null,
   email varchar(255) not null,
   primary key(id)
);

insert into student
values(101,'Rakesh', 'rks@r.com');

insert into student
values(102,'Moni', 'moni@m.com');  

commit;

Source code


https://github.com/rsinghania/H2-Console-Db.git