Midterm Review Flashcards
What part of the Spring family of software products will we be using for server-side development?
Spring Boot
T/F The Spring Framework contains Java EE APIs
True
T/F The Spring Framework can replace the need for Java EE
True
What framework will be installed next class to look after the client-side programming?
Angular
What is different about the architecture this course will use than what was used in a traditional Java EE app?
Traditional was server-side rendering using JSF or equivalent, SPA for the view in this course
What is Spring Initialzr?
A web application that can generate a Spring Boot project structure for you
What 5 templates did we choose for Spring Initialzr?
Spring Web, Lombok, Spring Data JPA, H2 Database, Rest Repositories
What extension was added to make our Employee class code more concise?
Lombok
What annotations were found in the Employee domain class?
@Entity, @Data, @RequiredArgsConstructor, @Id, @GeneratedValue
What annotations were found in the EmployeeRepository class?
@Repository, @RepositoryRestResource
What relational database are we using in this course?
H2
What are some characteristics of this database?
In memory, fast, doesn’t retain changes
What intrinsic file did we use to house the populating of the employee data into the database?
data.sql
What file was populated to provide the datasource meta-data (e.g., username, password…) for the H2 database?
application.properties
What is Maven?
Java Build Tool
What is the file pom.xml used for?
Houses dependencies for build
What Maven step created the executable .jar file that can be run outside of the IDE?
package
What was the name of the .jar file it created, and where did the name come from?
exercises-0.0.1-SNAPSHOT.jar, pom.xml
T/F: We can run a Spring Boot application without VSCode?
True
What framework will you be using client side?
Angular
What language will you be coding the client-side project in?
TypeScript
What does the language from q2 get compiled to?
JavaScript
What command did you use to create the initial project?
ng new clientexercises –no-standalone
How do you tell what version of the CLI you are using?
ng version
What is the root “module” for an angular application typically called?
app.module.ts
The notes describe a property called “selector” in the app.component.ts file, what other file is used in conjunction with this property?
index.html
What styling framework will we be using?
Material-UI
What command was used to install the needed Material-UI packages
ng add @angular/material
How do I know I am using a material design component in my app’s html?
tag starts with <mat-
What was added to the project so that app.module.ts didn’t get cluttered with material-ui modules?
a separate module to house just the material components
What 3 colour names are found in a typical “Theme”?
primary, accent, warn
What styling syntax is used to work with Themes?
scss
Explain the difference between a module and a component in Angular
modules are made up from components tell what components can be used and how, components control the View
Explain this line of code in employee.service.ts:
providedIn: ‘root’,
allows a service to be injected with the root application injector, allowing global usage
What part of the application returns an Observable?
HttpClient call in Service
What is also required along with the constant BASE_URL to make a complete REST call?
endpoint e.g. employees
What did the EmployeeService expect to get back from the url:
${BASE_URL}/employees when doing an HTTP GET?
an observable
What syntax can we use to iterate through an array in the template (html) code?
*ngFor =”let employee of employees”
What syntax is used to dump an Angular expression to the browser?
{{ .. }}
What is the syntax from q7 commonly known as?
interpolation
What is the @Input annotation in Angular used for?
receive data in a child component from a parent
Where and what did we use the @Input annotation for?
place the employee array in the employee list component
What syntax did we use to load the data for the @Input (in the parent component)?
this.employees = payload._embedded.employees;
What sub method did we run on EmployeeService.get in the EmployeeHomeComponent to obtain the actual data from the service?
.subscribe()
What file did we edit to allow Cypress to utilize a mobile footprint?
cypress.config.ts
What element did we alter as the loading point for our SPA?
<app-root became <app-exercises
What error did we get when we first made the REST call from the client project to the server project?
CORS
How did we solve it?
Added @CrossOrigin annotation on server repository
What type does the routes constant (array that contains all of the applications routing info) have in app-routing.module.ts?
Routes
What 2 properties are defined in each route in the routes array?
path, component
What routing properties were bound with one way binding ([]) to the anchors in the menu (app.component.html)?
routerLink and state
What is the purpose of this tag: <router-outlet></router-outlet>
Where routes get rendered
Explain how the title is set in the toolbar
using setTitle (new in Angular 14), that we set in app.component.ts
Explain how all the employee parts of the application are related
Employee service retrieves data from server, employee home component calls get method on service to obtain employee data with subscribe.
Employee home html loads list data via @Input annotation. List component displays all items.
EmployeeHome and EmployeeList are declared in the employee module.
