Full Stack App Development with Spring 5 and Angular: 3-in-1

Name: Full Stack App Development with Spring 5 and Angular: 3-in-1
Rating: 4.1 (23 reviews)

Build amazingly beautiful apps combining the power of two hottest frameworks Angular 6 with Spring 5!

Created byPackt Publishing

Last updated 11/2018

English

What you'll learn

Learn some of the best practices when developing applications with the Spring framework
Get to know the advanced features of Spring Boot in order to effectively develop and monitor applications
Explore the fundamentals of TypeScript and object-oriented programming
Know how to use Angular built-in directives and build reusable components and custom directives
Create template-driven forms with Angular
Test your code with JUnit 5.0
Use Spring WebFlux and various other features
Build applications using Spring 5 for backend and Angular 6 for frontend development

Course content

3 sections • 82 lectures • 8h 31m total length

The Course Overview2:39
This video gives an overview of the entire course.
Spring Framework4:18
Spring Framework is used to wire enterprise Java applications. The main aim of Spring Framework is to take care of all the technical plumbing that is needed in order to connect the different parts of an application.
Important reasons behind the popularity of Spring Framework
Simple example of executing a query using prepared statement
Spring Modules3:28
The modularity of Spring Framework is one of the most important reasons for its widespread use. Spring Framework is highly modular with more than 20 different modules having clearly defined boundaries. We will start with discussing the Spring Core Container to other modules grouped by the application layer they are typically used in.
Provide great Integration with popular web frameworks
Cross-cutting concerns
Provide declarative transaction management for POJO and other classes
Spring Projects4:47
Spring Projects explore integration and solutions to other problems in the enterprise space deployment, Cloud, Big Data, Batch, and Security, among others.
Provide mechanisms for externalizing configuration properties that can change from one environment to another
Spring Cloud provides solutions for common patterns in distributed systems
Spring Data provides a consistent data-access approach to all different kinds of databases
New Features in Spring Framework 5.04:20
Spring Framework 5.0 is the first major upgrade in Spring Framework, almost four years after Spring Framework 4.0. In this time frame, one of the major developments has been the evolution of the Spring Boot project.
Important baseline Java EE 7 specifications for Spring Framework 5.0
Reactive programming provides an alternate style of programming focused on building applications that react to events
Functional web framework provides features to define endpoints using functional programming style
Understanding Dependency Injection4:57
In this video, we will look at an example to understand dependency injection. We will define a simple business service that talks to a data service. We will make the code testable and see how proper use of DI makes the code testable.
Explore the XML and Java configuration options that Spring provides
Explore Spring unit testing options
Define real unit tests using mocking
The Spring IoC Container2:46
The Spring IoC container creates the beans and wires them together according to the configuration setup created by the application developer. In this video, we will define what beans need to be created and how to wire them together.
Create beans for the specific classes
Specify a @Autowired annotation on the instance variable of the DataService interface
Creating a Spring IoC Container3:26
In this video, we will use an application context to create a Spring IoC container. We can have either a Java configuration or an XML configuration for an application context. Let's start with using a Java application configuration.
Java configuration for the application context
Launch the application context with Java and XML configuration
Defining JUnit Using the Spring Context2:05
In this video, we will provide the location of the context configuration. We will use the XML configuration that we created earlier.
Create a mock of DataService and autowire the mock into BusinessServiceImpl
Unit Testing with Mocks2:27
In this video, we will explore the second option of using a mock for unit testing.
Use the most popular mocking framework, Mockito
Create a mock for DataService
Stub the mock service to provide the data
Dependency Injection Types2:16
In this video, we will learn about the setter injection and the constructor injection.
Use the DataService for setter injection
Use a constructor for injecting in DataService
The @Autowired Annotation in Depth2:11
When @Autowired is used on a dependency, the application context searches for a matching dependency. By default, all dependencies that are autowired are required. In this video, we will use two types of annotations.
Use the @Primary annotation
Use @Qualifier to further qualify autowiring
Explore contexts and dependency injection
Java Web Application Architecture3:15
In this video, we will discuss the different architectural approaches to developing Java web applications and see where Spring MVC fits in.
Model 1 architecture
Model 2 architecture
Model 2 Front controller architecture
Creating a Few Simple Web Flows Using Spring MVC19:10
In this video, we will create six typical web application flows using Spring MVC.
Add dependency for Spring MVC
Add DispatcherServlet to web.xml
Create Spring context
Important Concepts Behind Spring MVC3:54
In this video, we will understand the important concepts behind Spring MVC.
Request Mapping methods - supported method arguments
Request Mapping methods - supported return types
Handler Mappings and Interceptors4:29
The mapping between a URL and a Controller was expressed using something called a handler mapping. HandlerInterceptors can be used to intercept requests to handlers.
Define the HandlerInterceptor
Map the HandlerInterceptor to the specific handlers to be intercepted
Mapping HandlerInterceptor to handlers
Spring MVC - Advanced Features6:51
In this video, we will discuss advanced features related to Spring MVC. Also, we will look at a couple of example implementations of exception handling.
Common exception handling across all controllers
Specific exception handling for a Controller
Spring Security4:42
Spring Security provides a comprehensive security solution for Java EE enterprise applications. While providing great support to Spring-based applications, it can be integrated with other frameworks as well. In this video, we will look into a simple example to enable Spring Security on a simple web application.
Add Spring Security dependency
Configure the interception of all requests and Configure Spring Security
dd the logout functionality
Kotlin Versus Java9:36
In this video, Kotlin aims to address some of the important issues in the Java language and provide a concise alternative.
Create a number of bean classes to hold data
Creating a Kotlin Project in Eclipse2:32
In this video, we will install the Kotlin plugin in Eclipse.
Create a Kotlin class
Create a main function
Run a Kotlin class
Creating a Spring Boot Project Using Kotlin6:20
In this video, we will use Spring Initializr to initialize a Kotlin project.
Dependencies and plugins
Spring Boot application class
Spring Boot application test class
Test your Knowledge

The Course Overview2:47
This video provides an overview of the entire course.
What is Angular2:19
Get Introduced to Angular, what it Angular and why you use it.
Define Angular
Understand the advantage of using Angular for Frontend application
Architecture of Angular Apps1:55
Understand what is Angular component, how it fetches data and what is the data binding.
Learn the concept of Angular component
Learn the concept of service for fetching data
Learn the concept of data binding
Setting Up the Development Environment2:45
Have Angular environment ready.
Download Nodejs and NPM
Install Angular CLI from NPM
Your First Angular App2:09
Learn how to generate new Angular project.
Use Angular Cli to generate new project
Using Visual Studio Code editor to open the project
Use Angular Cli to run our Angular application
Structure of Angular Projects4:28
Presenting the file and folder in Angular project.
Using Visual Studio Code editor to browse the application
Go over the different folders and files in the application and explore its functionality
Webpack1:48
Learn how to webpack tool compile and combine the files of Angular project
Present the different JavaScript bundles generated by Webpack
Understand the Hot Module Replacement used by Webpack
What is TypeScript2:20
Understand the difference between TypeScript and JavaScript and the features of TypeScript.
Present a chart showing the TypeScript is superset of JavaScript
Present that TypeScript is an OOP Language
Present the intellisense feature of TypeScript
Declaring Variables2:56
Understand how to declare variable in TypeScript and what is the difference between Let and Var.
Present example using Let to declare variable
Show a subroutine to explain the difference between Let and Var
Types1:54
Understand the different datatypes in TypeScript.
Present the Number, Boolean, String datatypes
Understand the any datatype in TypeScript
Show the array and enum datatype in TypeScript
Type Assertions2:54
Understand the type assertion in TypeScript.
Give an example when TypeScript can recognize the datatype of variable
Use the type assertion to force typescript to recognize the variable’s datatype
Arrow Functions1:43
Understand the arrow function concept in Typescript and ES6.
Show syntactical difference between classical function and arrow function
Show the advantage of classical function over arrow function
Interfaces3:05
Understand what interfaces is and how to use it.
Learn the concept behind the interfaces
Present a syntax example how to define an interface
Classes2:12
Understand what class is and how to use it.
Learn what Classes can include
Present a syntax example how to define a class
Transpile class in TS to JS.
Objects1:38
Learn how to instantiate an Object from a Class.
Present a syntax example how to instantiate an Object from a class
Learn how to access class’s methods from its instantiated object
Constructors1:59
Understand how to initialize class’s field using constructor.
Show a syntax example how to declare a constructor in a class
Show how to initialize field inside the constructor
Access Modifiers2:52
Understand how to define access modifier and setter and getter in a class.
Show the difference between private and public access modifier
Show a syntax example how to declare setter/getter method in a class
Show how to implement the setter/getter on an instantiated object
Properties2:00
Understand the difference between properties and method in classes in TS.
Show a syntax example of properties in Classes
Modules3:07
Understand what Modules is and how to export/import them in TS.
Show a syntax example on how to export a class
Show a syntax example on how to import the exported into different TS file
Building Blocks of Angular Apps1:59
Understand the different building blocks of Angular application.
Present the component different parts
Present the Component hierarchy
Components7:40
Understand the concept of Component in Angular and learn how to generate it.
Using Angular Cli command to generate Angular Component
Understand the Component class and decorator
Learn the different properties of Component decorator
Services8:55
Understand the concept of Service in Angular and learn how to generate it.
Using Angular Cli command to generate Angular Service
Understand the Injectable decorator
Learn how to inject a service in a Component
Property and Attribute Binding6:09
Understand how to binding variables to DOM properties and HTML attributes.
Learn the difference between the HTML attribute and DOM properties
Understand the interpolation binding and the property binding with the DOM
Understand how to do HTML attribute binding
Class and Style Binding7:05
Understand how to Dynamically change the class and style of a DOM.
Learn how to bind to Class property of the DOM
Learn how to bind to Style property of the DOM
Understand the ngClass and ngStyle Directives
Event Binding and Filtering7:37
Understand how to attach method to an Event and how to filter the Keypress events.
Learn how to bind Event to a method
Understand the $event object
Learn how to filter the Keypress events
Two-Way Binding and Template Variables8:09
Understand how to reference the input field, and how to do two-way binding between view and component class.
Use ngModel to do two-way binding with variables
Import FormModule to use ngModel directive
Learn how to use template variable to reference an input field
Pipes9:03
Understand how to format data using built-in formats such as Uppercase, currency and so on.
Learn how to use the build-in pipes in Angular
Learn how to configure some of the built-in pipes such as currency
Learn how to know more about built-in pipes from Angular.io site
Custom Pipes10:57
Learn how to build custom data format in Angular.
Use Angular Cli to generate a pipe class
Learn how to use the transform method of PipeTransform class
Learn how to implement the custom pipe
Component API and Input Properties9:13
Understand what the Component API concept is and how to reuse the component and how to add attribute to it.
Use Angular Cli to create a custom component
Use Input decorator to define and input property
Learn how to alias the input variable.
Output Properties and Passing Event Data6:37
Understand how to an add event listener to the custom component, and how to pass event data.
Learn how to use Output decorator to define and output property
Learn how to emit data through output property
Learn how to alias the output variable
Templates, Styles, and View Encapsulation6:40
Understand how to define the property: Template, Style and View Encapsulation properties of the Component decorator.
Learn how to use Template and TemplateUrl properties
Learn how to use the Style and StyleUrl properties
Learn the different options for View Encapsulation relate to Style property
ngContent and ngContainer6:09
Understand how to wrap DOM object inside the custom component.
Learn how to use ngContent directive to wrap a DOM object inside custom component
Learn how to use selector for ngContent
Learn how to wrap ngContainer by custom component
ngFor and Trackby9:59
See how to use ngFor Directive to render list of Objects and how to.
Learn how to use ngFor directive to render list of Objects and export values from ngFor such as index
see how the ngFor responds to the changes in the component state
Learn how to use Trackby to avoid reloading values multiple in ngFor
ngIf, Hidden Property and ngSwitchCase17:22
Learn how to use ngIf and ngSwitchCase to hide/show DOM.
Learn how use ngIf (else) directive to render Object
Use the hidden attribute to show/hide an Object
Use ngSwitchCase directive to render groupe of Objects
Creating Custom Directives10:17
Learn how to create Custom directive and subscribe to event raised from the DOM element and how to access the DOM object.
Use Angular Cli to generate custom directive
Use HostListener decorator to subscribe to event raised from the DOM element
Use the ElemetRef service to access to DOM object
Using ngModel to Apply Validation Errors18:23
Understand the difference between th Template-driven Forms and Reactive Forms.
Learn how to create controlGroup class using ngModel directive
Learn how to add validation to controlGroup input fields
Learn how to filter and specify the validation errors
ngForm and ngModelGroup8:29
Learn how to create FormGroup class and use ngModelGroup directive
Understand how to use ngForm directive to create FormGroup
Understand how to use ngFrom’s output property (ngSubmit) to raise event and submit data
Understand how to use ngModelGroup directive to format the submitted data
Binding Data to Dropdown List6:49
Understand how bind drop down list in Template-driven forms.
Discover how to add Options dynamically to Select drop down box
Test your Knowledge

The Course Overview2:12
This video gives an overview of the entire course.
Introduction to Spring2:38
This video covers the basics of Spring.
Briefly cover Spring’s history and evolution
Outline the most relevant aspects of the framework
Explore the Spring ecosystem and references
Setting Up a Spring Boot Project5:54
In this video, we will create a "Hello World" Spring Boot project from scratch.
Configure a basic Gradle Build Script
Create basic Application and Controller classes
Build, run and test the application from the command line
Exploring JPA Repository and Domain Objects9:17
In this video, we will create a sample Database Schema and configure Gradle to include JPA, hibernate, and drivers.
Reverse engineer the DB schema with Hibernate Tools (hbm2java)
Create a Spring Data Repository with a Query Builder example
Wire the Repository to Controller and test an HTTP request
Using TDD, Write Services to Insert, Update, Delete, and Query Topics9:23
This video covers the basics of using Test Driven Development (TDD) in Spring.
Discuss Servlet Stack (Spring MVC) versus Reactive Stack (Spring WebFlux)
Refactor the Data Access Layer to a separate Spring MVC service
Work with a custom Gradle plugin
Writing Advanced JPA Repository Extensions and Develop a Light Weight HATEOAS-Dr11:53
In this video, we will write a custom and advanced JPA Repository Extension.
Work with generics and introspection within Spring framework
Develop a light weight HATEOAS-driven REST service
Writing REST Controller Using Spring WebFlux to Perform Operations on the Topics12:48
In this video, we will briefly discuss the use of REST controller using Spring WebFlux.
Rewrite the definitive data access service using Spring Data REST
Write a WebFlux service to access the data access service
Introduction to Angular 64:55
We have successfully built our backend search app. Now, in order to customers to interact with it we will create an Angular app.
What is Angular
History of Angular
Angular project structure
Angular Architecture5:17
In order to understand how an Angular application works, we need to dive deep into the Angular architecture.
Understand Angular modules
Understand Angular components
Understand Angular templates
Creating Our First Angular Component8:56
Components are the backbone of any Angular application. In this video, we will be creating our first Angular component.
How to create a component
Explore Angular conventions for components
Understand preferred structure for an Angular component
Communicating with Our Search Backend8:01
No web app will be complete if it doesn’t have http access to its backend/services. In this video, we will learn how to communicate with external service via http.
Analyze the architecture in a high level app
Add AngularHttpModule to our application
Communicate with our backend
Pet Store Infrastructure and Bootstrap Our Project9:12
We are required to build a pet store application using the latest reactive technologies. In this video we will start this task by bootstrapping our app and connecting it to MongoDB.
Bootstrap our Spring Boot app
Connect to MongoDB
Load mock data to our DB
Catalog API9:48
To start, our application should provide its users with a list of Pets available to purchase. In this video we will implement this API by using some of the new Spring data capabilities like ReactiveCrudRepositories
Implement MongoDB reactive repository
Declare the /pets controller
Declare the /pet/{petId} controller
Buy API13:52
Now the user can see the pets available, we should provide a buy mechanism in our application. We will do this by implementing the buy controller.
Create the PetStoreUserrepository
Add a WebExceptionHandler to handle application exceptions
Create the buy pet controller
Register New Users17:16
We have a great protocol to allow our users to buy pets, but we have a big problem. Any user can use our buy endpoint and buys pets from other users accounts just if they know their user ID. In this section we will implement Spring security in order to add authentication to our application.
Create Spring Security config
Understand the password encoder
Explore the Reactive user detail service
Register New Users – Part Two12:48
Now our endpoints is secure, but maybe it is secure too much; to the point that now anyone can’t use it .We are going to fix this. We are going to enable an endpoint to allow new people to the application to register the application. Then, these new authenticated users will be able to see the pets and buy them.
Use PetStoreUserDTO
Use IReactivePetStoreUserService
Use AccountController
Login Page5:42
In this video, we will start by creating a login form for the users to login for our pet store application.
Bootstrap the Pet application
Create the login component
Introduce the Angular services
Login Page – Part Two9:36
Now, that we have a solid AuthService and our Login component in place. Let’s create the form UI so users can login into our application.
Create the LoginForm
Import the reactive form module into the application
Cover the FormGroup and FormControl classes
Pet List8:59
In this video, we will create our login service to create a Pet list.
Create our login service
Create the Pet list component
Pet List – Part Two12:57
In this video, we will create a pet list view and use the power of Angular’s route to redirect our users to other components view using Angular routing capabilities.
Introduction to Angular’s route mechanism
Create our first route
Create the Pet list view
Sign Up User Form9:59
In this video, we will create a Sign Up form to register new users.
Create the Sign Up component
Wire the Sign Up component to our routes
Create the Sign Up form
Login Error Page2:51
We have a solid login and we can show the pets in the inventory to the users, but we have a small UX experience problem. If the user types bad credentials we don’t have any mechanism to inform that the credentials are incorrect. In this video, we will fix this by adding a warning in case the authentication was no successful.
Using the *ngIf directive
Inform our users when the login information is incorrect
Angular pipes
Not Found Page2:25
Everything is now working smoothly in our application. We have covered almost all the common cases except one that it is very usual, that is when users try to go to a route that doesn’t exists. In this video, we will handle this case by creating a component to handle the Not Found page.
Create the Not Found component
Create the Not Found template
Wire the Not Found page to the app routes
Test your Knowledge

Requirements

Basic knowledge of Java and JavaScript is required.

Description

The world of app development is fast paced, where app trends come and go. This has pushed for a change in the way we build our apps, including the tools we use. We are no longer capable of pushing out dynamic and fluid apps without using frameworks! Spring 5 is a functional web framework for back-end development while Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Combination of the two will enable you to build scalable and secure web applications. If you want build end-to-end modern web applications using Spring 5 and Angular, then this Learning Path is for you.

This Spring + Angular learning path will go over basic concepts of Angular including the theory behind it, why it's useful, the standard file structure, TypeScript, the CLI, components, and so on. You will then delve into Spring 5 and learn how to integrate it into your Angular project. You will also learn how to troubleshoot common compile-time and run-time errors and how to write clean and maintainable code. To put your learnings into practice, you will be developing a couple of basic server-side search and shopping applications with Angular and Spring 5.

This training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Getting Started with Spring 5.0, starts off with an introduction to Spring 5 and its latest features. You will then learn how to build an application using Spring MVC. You will then learn the advanced features of Spring Boot with the help of examples. You will also be introduced to a JVM language, Kotlin.

In the second course, Learn Angular in 3 Hours, you will learn the essential Angular concepts. You will learn how to build frontend applications using Angular.

The third course, Application Development with Spring 5.0 and Angular 6, starts off by exploring the features of Spring 5 and Angular 6. You will learn to build a couple of basic server-side search and shopping applications using the various features of Spring 5 and Angular 6.

By the end of this learning path, you will have all the knowledge and the experience to start building your own applications from scratch.

Meet Your Expert(s):

We have the best work of the following esteemed author(s) to ensure that your learning journey is smooth:

Ranga Rao Karanam is a programmer, trainer, and architect. His areas of interest include cloud native applications, microservices, evolutionary design, high-quality code, DevOps, BDD, TDD, and refactoring. He loves consulting for start-ups on developing scalable, component-based cloud native applications, and following modern development practices such as BDD, continuous delivery, and DevOps. He loves the freedom the Spring framework brings to developing enterprise Java applications.
Rachid Al Khayat is born and raised in Damascus, Syria, and settled in France since 2008. He did his master and Ph.D. degrees in computer engineering in USA and France respectively. Besides his interest in computer and electrical engineering, he is passionate about web development, he works as Full Stack developer for SII Groupe (French IT service company). He has more than four years of experience in ES5, ES6, AngularJs, Angular 2+, and NativeScript. Last summer he was nominated as NativeScript Champions. In his spare time, Rachid enjoys bicycling, photographing and reading Self-help and Philosophy books.
Alejandro Imass is a Senior Engineer and Toronto Team Leader for Samsung Pay Inc. (a subsidiary of Samsung Electronics America, Inc.). Alejandro is an IT professional and entrepreneur with over twenty-five years of experience leading many high-profile projects in different sectors including Telecommunications, Food & Beverage, Energy, Government, and Aviation in global companies such as BP, Exxon-Mobil, Chevron, PDVSA, Conoco-Phillips, Genencor, Danisco, BAT, AGA, and SAP. He has international recognition in systems integration, control systems, and ERP and has participated in committees such as ISA. He started his career in Electronic Engineering and later Systems Engineering, specializing in large-scale industrial and ERP systems in materials, reliability, and asset management. Alejandro is a specialist, educator, and evangelist in open source technologies with multiple certifications in this field by the Institute for Superior Studies and Technological Research (ISEIT) in Venezuela(he is also a professor there). Prior to LoopPay, he founded Yabarana Corporation which develops large-scale, highly complex Unix-based solutions for a wide range of industries. Before Yabarana, Alejandro was a partner at MPR Venezuela, an IBM premium VAR for EAM/ITSM solutions in Latin America, director of business development for Venezuela and Colombia, and account manager for high-profile companies in the region such as Empresas Polar, BP, ExxonMobil, Chevron, and Alpina.
Alberto Di Martino is a software developer with Samsung Pay and has been working with Kotlin since version 1.0. He is an expert with Kotlin when it comes to knowledge and expertise in this technology. He is keen to share his rich experience through this course.

Who this course is for:

This learning path is for developers who wish to create their own web applications with Spring 5 and Angular.

Full Stack App Development with Spring 5 and Angular: 3-in-1

What you'll learn

Explore related topics

Course content

Getting Started with Spring 5.021 lectures • 1hr 40min

Learn Angular in 3 Hours38 lectures • 3hr 34min

Application Development with Spring 5.0 and Angular 623 lectures • 3hr 17min

Requirements

Description

Who this course is for: