Angular 5 Features<\/h2>\n
1. <\/b>Angular 5 is more faster, lighter and easy to use.<\/p>\n
2. <\/b>Material design capabilities and improved compiler with build optimizer<\/p>\n
3. <\/b>New HttpClientModule is introduced which is a complete rewrite of the existing HttpModule.<\/p>\n
4. <\/b>TypeScript 2.4 support.<\/p>\n
5. <\/b>Reactive Forms Support<\/p>\nEnvironment Setup<\/h2>\n
We have two different part, client and server, of the application that we are going to build and hence, the environment set up is also specific to each part.<\/p>\n
Angular5 Environment SetUp<\/h3>\n
Angular 5 provides a beautiful tool – Angular CLI to get started with Angular. Here, we will be using the same tool to generate a sample angular app and then modify it to match our requirement.To get started with Angular CLI, it is required to have node installed so that we can use the NPM tool. You can check if node is installed or not on your machine by hitting node -v. On my machine I get following result.<\/p>\n
If not installed visit NodeJs official website<\/a> to install it first.Now, once it is done, traverse to your workspace location and execute following commands to install angular cli and generate a sample angular project.<\/p>\n Once this is done, you can traverse to the location and see a folder portal-app is created that contains all the files and folders generated by angular cli command to get started with angular 5.Now you can open your favourite editor to import the project.I imported this project in IntellijIdea and got the structure as below:<\/p>\n One thing to check here is that if you have installed your NodeJs with sudo command, then you might get some permission issue as below while installing angular cli.To avoid these kind of situation, it is always recommended to use brew command while installing any new software.<\/p>\n If you face this issue then provide read\/write access to the folder – \/usr\/local\/lib\/node_modules or follow the instruction here – Mac Support<\/a><\/p>\n For windows user, you can use git command line or cygwin for the installation.<\/p>\n Spring boot team has really made spring boot environment setup easy by providing default initializers.Open the url https:\/\/start.spring.io\/ and generate the project as follow.<\/p>\n Now unzip user-portal.zip and import into java IDE. Following will be the final structure.<\/p>\n Now let us try to understand the different files generated.<\/p>\n Modules – Modules break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.All the modules are loaded by main.ts.<\/p>\n Component – Component is used to bring the modules together.<\/p>\n tsconfig.json – The presence of tsconfig.json file in a directory indicates that the directory is the root of a typescript project.This file specifies the root files and typescript compiler motions required to compile typescript.<\/p>\n package.json – It contains all the dependencies defined for the angular project.Once, we do nom install, these dependencies are automatically downloaded.<\/p>\n karma.conf.json – Config file for karma unit tests.<\/p>\n The file .angular-cli.json will have all the application configurations such as info about the root and out directory.The welcome or main html file along with the main ts file. All the other environment related information will be present here.<\/p>\n Now it’s time to run the dfault generated application and see it in the browser. If you are using IntellijIdea then you can run ng serve command from Terminal inside it and if not hit following command in the terminal.<\/p>\n After this open your browser and hit the url – http:\/\/localhost:4200\/ and the angular app is up. Now we can start modifying the app to create a user management portal.<\/p>\n Now, let’s start by creating our APIs first.We have UerController where all the APIs for CRUD operation is exposed.The @CrossOrigin is used to allow Cross-Origin Resource Sharing (CORS) so that our angular application running on different server can consume these APIs from a browser.We can also configure the proxy in angular side using proxy.config.json which has been discussed in the subsequent topic. UserController.java<\/b><\/p>\n The service class has no extra logic here and it’s a very a simple implementation.<\/p>\n UserServiceImpl.java<\/b><\/p>\n We will be using Spring data JPA implementation for ORM related solution.To know inside implementation of Spring data you can visit my other post – Spring Boot JPA<\/a> and Spring Boot Hibernate implementation.<\/a><\/p>\n UserRepository.java<\/b><\/p>\n application.properties<\/b><\/p>\n Angular CLI has generate command to create component.Hit the command ng generate component user and it will create a user<\/b> folder inside app folder.This user folder will have all the required files for user module.<\/p>\n At first we will modify app.component.html to include 2 links for list users and add users.All our views willl be loaded inside router-outlet.<\/p>\n app.component.html<\/b><\/p>\n Since, we have two routes defined above, we require two different views(user.component.html, add-user.component.html) and components(user.component.ts, add-user.component.ts) to render on each click.Now let us implement the code for user.component.ts.Here, the method ngOnInit() will be invoked when this component is loaded and it will fetch all the user records and the html page will be populated.<\/p>\n user.compnent.ts<\/b><\/p>\n Similarly we have\u00a0add-user.component.ts<\/b><\/p>\n user.model.ts<\/b><\/p>\n user.service.ts<\/b><\/p>\n As discussed we have two views – user.component.html and add-user.component.html<\/p>\n user.component.html<\/b><\/p>\n add-user.component.html<\/b><\/p>\n Now it’s time to configure routing in angular.In this configuration, we will configure the path and corresponding component to load which will in turn load the respective view.Following is our routing configuration.<\/p>\n app.routing.module.ts<\/b><\/p>\n Now we are almost done with our application.We only need to include all the above implementation in our main module.<\/p>\n app.module.ts<\/b><\/p>\n To configure proxy in angular CLI, we need to create proxy.config.json file in the root of the angular project and edit the start script in package.json.<\/p>\n proxy.config.json<\/b><\/p>\n The value of target here is the context root of the application and api is the endpoint for user API.<\/p>\n package.json<\/b><\/p>\n Now make sure to change the userUrl value to ‘\/api’ in user.service.ts file and comment @CrossOrigin in UserController.java.Once this done use ng serve –proxy-config proxy.config.json or npm start to start the angular app.<\/p>\n We will be using spring boot embedded tomcat feature to deploy application.For more on this feature check this<\/a>.<\/p>\n UserPortalApplication.java<\/b><\/p>\n Now the server is up.Hit ng serve to deploy angular application and let’s test the application.<\/p>\n Hit the url – http:\/\/localhost:4200\/<\/a> and you can see following result.<\/p>\n Now, click on the Add User link and following form will appear to add user.<\/p>\n Now, click on the list user after adding multiple users.<\/p>\n This is pretty much about spring boot and angular 5 integration tutorial.In the next article, we will look into deploying this application<\/a> in a single war file with maven and tomcat. You can download the source from here<\/a>.If time permits, we will try to integrate spring security with it.Please let me know your comments below.<\/p>\n![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/L7gBj0J.png\")
<\/a><\/p>\nnpm install -g @angular\/cli\r\nng new portal-app<\/pre>\n
![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/o0yNRpf.png\")
<\/a><\/p>\nSpring Boot Environment SetUp<\/h3>\n
![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/USGHEZU-1024x377.png\")
<\/a><\/p>\n![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/o0yNRpf-1.png\")
<\/a><\/p>\nDefault Files Generated by CLI command<\/h2>\n
cd portal-app\r\n ng serve<\/pre>\n
Spring Boot Rest APIs<\/h3>\n
package com.devglan.userportal;\r\n\r\nimport org.springframework.beans.factory.annotation.Autowired;\r\nimport org.springframework.web.bind.annotation.*;\r\n\r\nimport java.util.List;\r\n\r\n@CrossOrigin(origins = \"http:\/\/localhost:4200\", maxAge = 3600)\r\n@RestController\r\n@RequestMapping({\"\/api\"})\r\npublic class UserController {\r\n\r\n @Autowired\r\n private UserService userService;\r\n\r\n @PostMapping\r\n public User create(@RequestBody User user){\r\n return userService.create(user);\r\n }\r\n\r\n @GetMapping(path = {\"\/{id}\"})\r\n public User findOne(@PathVariable(\"id\") int id){\r\n return userService.findById(id);\r\n }\r\n\r\n @PutMapping\r\n public User update(@RequestBody User user){\r\n return userService.update(user);\r\n }\r\n\r\n @DeleteMapping(path ={\"\/{id}\"})\r\n public User delete(@PathVariable(\"id\") int id) {\r\n return userService.delete(id);\r\n }\r\n\r\n @GetMapping\r\n public List findAll(){\r\n return userService.findAll();\r\n }\r\n}<\/pre>\nSpring Boot Service Implementation<\/h3>\n
@Service\r\npublic class UserServiceImpl implements UserService {\r\n\r\n @Autowired\r\n private UserRepository repository;\r\n\r\n @Override\r\n public User create(User user) {\r\n return repository.save(user);\r\n }\r\n\r\n @Override\r\n public User delete(int id) {\r\n User user = findById(id);\r\n if(user != null){\r\n repository.delete(user);\r\n }\r\n return user;\r\n }\r\n\r\n @Override\r\n public List findAll() {\r\n return repository.findAll();\r\n }\r\n\r\n @Override\r\n public User findById(int id) {\r\n return repository.findOne(id);\r\n }\r\n\r\n @Override\r\n public User update(User user) {\r\n return null;\r\n }\r\n}<\/pre>\nSpring Data Implementation<\/h3>\n
package com.devglan.userportal;\r\n\r\nimport org.springframework.data.repository.Repository;\r\n\r\nimport java.util.List;\r\n\r\npublic interface UserRepository extends Repository {\r\n\r\n void delete(User user);\r\n\r\n List findAll();\r\n\r\n User findOne(int id);\r\n\r\n User save(User user);\r\n}<\/pre>\nSpring Boot Datasource Configuration<\/h3>\n
server.contextPath=\/user-portal\r\nspring.datasource.url=jdbc:mysql:\/\/localhost:3306\/testdb\r\nspring.datasource.username=root\r\nspring.datasource.password=root\r\nspring.datasource.driver-class-name=com.mysql.jdbc.Driver\r\nspring.jpa.show-sql=true\r\nspring.jpa.hibernate.naming.implicit-strategy=org.hibernate.boot.model.naming.ImplicitNamingStrategyLegacyHbmImpl\r\nspring.jpa.hibernate.naming.physical-strategy=org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy<\/pre>\n
Default Scripts<\/h2>\n
CREATE TABLE user(id INT NOT NULL AUTO_INCREMENT,email VARCHAR(255),first_name VARCHAR(255),last_name VARCHAR(255),PRIMARY KEY (id))ENGINE=InnoDB;<\/pre>\n
Create Angular Component<\/h3>\n
<div class=\"container-fluid\">\r\n<div class=\"col-md-offset-1\">\r\n <h1>\r\n Welcome to {{title}}!\r\n <\/h1>\r\n<\/div>\r\n\r\n<a routerLink=\"\/users\"> List Users<\/a>\r\n<a style=\"margin-left:10px\" routerLink=\"\/add\">Add User<\/a>\r\n<br\/>\r\n<router-outlet><\/router-outlet>\r\n<\/div><\/pre>\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Router } from '@angular\/router';\r\n\r\nimport { User } from '..\/models\/user.model';\r\nimport { UserService } from '.\/user.service';\r\n\r\n@Component({\r\n selector: 'app-user',\r\n templateUrl: '.\/user.component.html',\r\n styles: []\r\n})\r\nexport class UserComponent implements OnInit {\r\n\r\n users: User[];\r\n\r\n constructor(private router: Router, private userService: UserService) {\r\n\r\n }\r\n\r\n ngOnInit() {\r\n this.userService.getUsers()\r\n .subscribe( data => {\r\n this.users = data;\r\n });\r\n };\r\n\r\n deleteUser(user: User): void {\r\n this.userService.deleteUser(user)\r\n .subscribe( data => {\r\n this.users = this.users.filter(u => u !== user);\r\n })\r\n };\r\n\r\n}<\/pre>\nimport { Component } from '@angular\/core';\r\nimport { Router } from '@angular\/router';\r\n\r\nimport { User } from '..\/models\/user.model';\r\nimport { UserService } from '.\/user.service';\r\n\r\n@Component({\r\n templateUrl: '.\/add-user.component.html'\r\n})\r\nexport class AddUserComponent {\r\n\r\n user: User = new User();\r\n\r\n constructor(private router: Router, private userService: UserService) {\r\n\r\n }\r\n\r\n createUser(): void {\r\n this.userService.createUser(this.user)\r\n .subscribe( data => {\r\n alert(\"User created successfully.\");\r\n });\r\n\r\n };\r\n\r\n}<\/pre>\nexport class User {\r\n\r\n id: string;\r\n firstName: string;\r\n lastName: string;\r\n email: string;\r\n}<\/pre>\nimport {Injectable} from '@angular\/core';\r\nimport { HttpClient, HttpHeaders } from '@angular\/common\/http';\r\n\r\nimport { User } from '..\/models\/user.model';\r\n\r\n\r\nconst httpOptions = {\r\n headers: new HttpHeaders({ 'Content-Type': 'application\/json' })\r\n};\r\n\r\n@Injectable()\r\nexport class UserService {\r\n\r\n constructor(private http:HttpClient) {}\r\n\r\n private userUrl = 'http:\/\/localhost:8080\/user-portal\/api';\r\n\r\n public getUsers() {\r\n return this.http.get(this.userUrl);\r\n }\r\n\r\n public deleteUser(user) {\r\n return this.http.delete(this.userUrl + \"\/\"+ user.id);\r\n }\r\n\r\n public createUser(user) {\r\n return this.http.post(this.userUrl, user);\r\n }\r\n\r\n}<\/pre>\nCreate Angular Views<\/h3>\n
<div class=\"col-md-6\">\r\n<h2> User Details<\/h2>\r\n\r\n<table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th class=\"hidden\">Id<\/th>\r\n <th>FirstName<\/th>\r\n <th>LastName<\/th>\r\n <th>Email<\/th>\r\n <th>Action<\/th>\r\n <\/tr>\r\n <\/theadv\r\n <tbody>\r\n <tr *ngFor=\"let user of users\">\r\n <td class=\"hidden\">{{user.id}}<\/td>\r\n <td>{{user.firstName}}<\/td>\r\n <td>{{user.lastName}}<\/td>\r\n <td>{{user.email}}<\/td>\r\n <td><button class=\"btn btn-danger\" (click)=\"deleteUser(user)\"> Delete User<\/button><\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n<\/div><\/pre>\n<div class=\"col-md-6\">\r\n <h2 class=\"text-center\">Add User<\/h2>\r\n<form>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email address:<\/label>\r\n <input type=\"email\" [(ngModel)]=\"user.email\" placeholder=\"Email\" name=\"email\" class=\"form-control\" id=\"email\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">First Name:<\/label>\r\n <input [(ngModel)]=\"user.firstName\" placeholder=\"First Name\" name=\"firstName\" class=\"form-control\" id=\"firstName\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Last Name:<\/label>\r\n <input [(ngModel)]=\"user.lastName\" placeholder=\"Last name\" name=\"lastName\" class=\"form-control\" id=\"lastName\">\r\n <\/div>\r\n\r\n <button class=\"btn btn-success\" (click)=\"createUser()\">Create<\/button>\r\n<\/form>\r\n<\/div><\/pre>\n
Angular Routing<\/h3>\n
import { NgModule } from '@angular\/core';\r\nimport { RouterModule, Routes } from '@angular\/router';\r\n\r\nimport { UserComponent } from '.\/user\/user.component';\r\nimport {AddUserComponent} from '.\/user\/add-user.component';\r\n\r\nconst routes: Routes = [\r\n { path: 'users', component: UserComponent },\r\n { path: 'add', component: AddUserComponent }\r\n];\r\n\r\n@NgModule({\r\n imports: [\r\n RouterModule.forRoot(routes)\r\n ],\r\n exports: [\r\n RouterModule\r\n ],\r\n declarations: []\r\n})\r\nexport class AppRoutingModule { }<\/pre>\nAngular Module<\/h3>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { FormsModule } from '@angular\/forms';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { UserComponent } from '.\/user\/user.component';\r\nimport { AppRoutingModule } from '.\/app.routing.module';\r\nimport {UserService} from '.\/user\/user.service';\r\nimport {HttpClientModule} from \"@angular\/common\/http\";\r\nimport {AddUserComponent} from '.\/user\/add-user.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n UserComponent,\r\n AddUserComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n HttpClientModule,\r\n FormsModule\r\n ],\r\n providers: [UserService],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\nAngular CLI Proxy Configuration<\/h2>\n
{\r\n \"\/api\/*\": {\r\n \"target\": \"http:\/\/localhost:8080\/user-portal\",\r\n \"secure\": false\r\n }\r\n}<\/pre>\n\"start\": \"ng serve --proxy-config proxy.config.json\",<\/pre>\n
Final Application Structure<\/h2>\n
![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/pLuqFoj.png\")
<\/a><\/p>\nRunning Spring Boot Application<\/h2>\n
package com.devglan.userportal;\r\n\r\nimport org.springframework.boot.SpringApplication;\r\nimport org.springframework.boot.autoconfigure.SpringBootApplication;\r\n\r\n@SpringBootApplication\r\npublic class UserPortalApplication {\r\n\r\n\tpublic static void main(String[] args) {\r\n\t\tSpringApplication.run(UserPortalApplication.class, args);\r\n\t}\r\n}<\/pre>\nRun Angular App<\/h2>\n
![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/hNzPOWZ.png\")
<\/a><\/p>\n![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/evyRFP0.png\")
<\/a><\/p>\n![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/03\/QTSMA1r.png\")
<\/a><\/p>\nConclusion<\/h2>\n