======product-list.component.ts================== import { Component, OnInit } from '@angular/core'; import { throwError } from 'rxjs'; import { Product } from 'src/app/models/product'; import { ProductData } from 'src/app/ProductData'; import { ProductService } from 'src/app/services/product.service'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit { products: Product[] = []; public productAvailable = true; public color = "blue"; productData = new ProductData(); public errorMessage !: string; public guestName: string = "Isha"; //DI (Dependency Injection) constructor(public productService: ProductService) { // this.products = this.productData.getProducts(); // this.products = productService.getProducts(); this.productService.getProducts().subscribe((data:any) => { this.products = data; }) } ==========================================product.html <h1>All the products</h1> <!-- <ul> <li *ngFor="let p of products "> {{p.productsId}} {{p.productName}} </li> </ul> --> <font color="red"><h2>{{errorMessage}}}</h2></font> <table border="10" cellspacing="10" cellpadding=""10> <tr> <th>Product Id</th> <th>Product Name</th> <th>Quantity On Hand</th> <th>Product Price</th> <th>Product Id</th> <th>Available</th> </tr> <tr *ngFor="let product of products"> <td>{{product.productId}}</td> <td>{{product.productName}}</td> <td>{{product.quantityOnHand}}</td> <td>{{product.price}}</td> <td *ngIf=""productAvailable>Stocks Available}</td> </tr> </table> <br/> <br/> <h1></h1> <table> <tr> <th>Name</th> <th>Country</th> </tr> <tr *ngFor = "let p of people"[ngStyle]="{'color':getColor(p.country)}"> <td>{{p.name}}</td> <td>{{p.country}}</td> </tr> </table> ============product.services.ts===== ====used to connect to json server , injectable Object Dependency Injection of website to, getting data from server import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { catchError, Observable, retry,throwError } from 'rxjs'; import { Product } from '../models/product'; const productURL = "http://localhost:3000/product" @Injectable({ providedIn: 'root' }) export class ProductService { httpOptions = { headers : new HttpHeaders({ 'Content-Type':'application/json' }) } constructor(public httpClient: HttpClient) { } //Getting all the products getProducts(): Observable<Product[]> { return this.httpClient.get<Product[]>(productURL) .pipe( retry(1), catchError(this.errorHandler) ); } //Getting a single product //"http://localhost:3000/product/99 getProduct(productId: number): Observable<Product> { return this.httpClient.get<Product>(`${productURL}/${productId}`) .pipe( retry(1), catchError(this.errorHandler) ); } //Deleting a single product //"http://localhost:3000/product/99 - DELETE deleteProduct(productId: number): Observable<Product> { return this.httpClient.delete<Product>(`${productURL}/${productId}`) .pipe( retry(1), catchError(this.errorHandler) ); } //saving a single product //"http://localhost:3000/product saveProduct(product:Product): Observable<Product> { return this.httpClient.post<Product>(productURL,product,this.httpOptions) .pipe( retry(1), catchError(this.errorHandler) ); } //edit/update a single product //Please complete this //localhost:3000/product/71 - PUT and in body we have to pass product object updateProduct(productId:number,product:Product): Observable<Product> { return this.httpClient.put<Product>(`${productURL}/${productId}`,product,this.httpOptions) .pipe( retry(1), catchError(this.errorHandler) ); } errorHandler(error: { error: { message: string; }; status: any; message: any; }) { let errorMessage = ''; if (error.error instanceof ErrorEvent) { // Get client-side error errorMessage = error.error.message; } else { // Get server-side error errorMessage = `Some Error Happened\n Error Details \nError Code: ${error.status}\nMessage: ${error.message}`; } console.log(errorMessage); return throwError(errorMessage); } } ===================================================================== import { ComponentFixture, TestBed } from '@angular/core/testing'; ===============us import { UserComponent } from './user.component'; describe('UserComponent', () => { let component: UserComponent; let fixture: ComponentFixture<UserComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ UserComponent ] }) .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(UserComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ========================================================== <h1>Template Driven Forms<h1> <form #userForm="ngForm" (ngSubmit)="displayUserDetails(userForm.value)"> <div class="form-group"> <label> User Id </label> <input type="text" class="form-control" name="userId" [(ngModel)]="userId"> <label>UserName</label> <input type="text" class="form-control" name="userName" [(ngModel)]="userName"> <input type="submit"> </div> </form> ======================================== import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { userId !: string userName !: string constructor() { } ngOnInit(): void { } displayUserDetails(values:any) { console.log(values); } } ================================================= <a routerLink="productInfo">Product Info</a> <a routerLink="productlist">Product productInfo</a> <a routerLink="aboutus">info</a> <a routerLink="contactus">Contact Us</a> <a routerLink="user">user</a> <a routerLink="productcreate">Product Create</a> <a routerLink="productadd">Product Add </a> ------------------------ <a routerLink="productlist">Product List</a> <a routerLink="productInfo">Product Info</a> <a routerLink="aboutus">info</a> <a routerLink="contactus">Contact Us</a> <a routerLink="user">user</a> <a routerLink="productCreate">Product Create</a> <a routerLink="productadd">Product Add </a> <br/> ================== import { Component, OnInit } from '@angular/core'; import { throwError } from 'rxjs'; import { Product } from 'src/app/models/product'; import { ProductData } from 'src/app/models/product-data'; import { ProductService } from 'src/app/services/product.service'; const productURL = "http://localhost:3000/product" @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit { products: Product[] = []; public productAvailable = true; public color="blue"; productData = new ProductData(); public errorMessage !: string; constructor(public productServices: ProductService) { //this.products = this.productData.getProducts(); this.productServices.getProducts().subscribe(data:any) => { this.products = data; }, err => this.errorMessage } ngOnInit(): void { } errorHandler(error: { error: { message: string; }; status: any; message: any; }) { let errorMessage = ''; if (error.error instanceof ErrorEvent) { // Get client-side error errorMessage = error.error.message; } else { // Get server-side error errorMessage = `Some Error Happened\n Error Details \nError Code: ${error.status}\nMessage: ${error.message}`; } console.log(errorMessage); return throwError(errorMessage); } getColor(country: string) { switch (country) { case 'UK': return 'green'; case 'USA': return 'blue'; case 'IN': return 'red'; default: return 'yellow' } } people: any[] = [ { "name": "Tufail Ahmed", "country": 'IN' }, { "name": "Neha Sharma", "country": 'UK' }, { "name": "Ravi Kiran", "country": 'IN' }, { "name": "Tarun Sharma", "country": 'IN' }, { "name": "Cook Tyson", "country": 'USA' } ]; } 88888**************************************************** March 09 REVATURE training 3.92.216.49- myrevatureaws 3.82.229.137- mywindows1 check--instance----actions{connect} >>>> Administrator, Password AWS: RDS --------------------------- postgres password : revatureus Endpoint database-1.c8gekafpnzx8.us-east-1.rds.amazonaws.com Port 5432 ------------------------------------------------------- username=postgres password=root driver=org.postgresql.Driver url=jdbc:postgresql://localhost:5432/postgres -------------------------------------------------------------- Iterator<Product> iterator = products.iterator(); while(iterator.hasNext()) { Product temp = iterator.next(); System.out.println(temp); } ------------------------------------------------------------------------------- package collectionsframework; import java.util.Comparator; public class QOHComparator implements Comparator<Product> { @Override public int compare(Product o1, Product o2) { if(o1.getQuantityOnHand()>o2.getQuantityOnHand()) return 1; else return -1; } } ---------------------------------------------------- Employee employeeId employeeName98000 employeeAddress salary Store 4 employee records and sort by salary(descending) Output : Printing employee (sorting by salarr(desc)) Richard98000 Neena88000 Tufail18000 Daniel7000 ---------------------------------------- training march 10 inner class- : four types, private, static , local ,normal,anonyomous Functional interace _ package lambdaDemo; public class Client { public static void main(String[] args) { // TODO Auto-generated method stub Calculator calculator = new Calculator() { @Override public int operation( int num1 , int num2) { return num1 + num2 ; } }; System.out.println(calculator.operation(12,12)); //by lamdas expression (without type declarttion Calculator calculator2 = (num1,num2) -> num1 + num2 ; System.out.println(calculator2.operation(12,12)); //with type declaration Calculator calculator3 =(int num1,int num2)-> num1 + num2 ; System.out.println(calculator2.operation(12,12)); Calculator calculator4 = (int num1,int num2)-> {return num1 + num2 ;}; System.out.println(calculator2.operation(12,12)); } } -------------------------------- package org.log4jdemos; import java.util.Scanner; import org.apache.log4j.Logger; /** * Hello world! * */ public class App { private static Logger logger = Logger.getLogger(App.class); public static void main( String[] args ) { Scanner scanner = new Scanner ( System.in); System.out.println( "Please enter name" ); String name = scanner.next(); System.out.println( "##Hello and Welcome " ); logger.info(name +" has logged inn at :"+ new java.util.Date()); logger.trace("Calling the trace"); logger.debug("Calling the debug"); logger.info("Calling the info"); logger.warn("Calling the warn "); logger.error("Calling the error"); logger.fatal("Calling the fatal"); System.out.println( "##Thanks for using my program " ); } } ----------------------------------------------------------------- Design Patterns : creation design patterns creation: Singleton ony one object should be created for a class creational: factory --------------------------------------------------------- QC - Monday 10:30 EST Topics : Selenium,Cucumber,Gherkin,Javascript Lambdas,Functional Interface, Comparable and comprator AWS Jenkins RWD Bootstrap Logging ----------------------------- class Fan{} class HIghSpeed fan extends { } -------------------------- BootStrap , RWD ------------------- Bootstrap : inbuilt styling framework: mobile sleek intuitive powerful we developmetn framework mobile first fron ent advantages mobile first approcah ------------- six phases of SDLC : any tasks in operations can be planned for, including system upgrades, moving to new datacenters or releasing large system changes. problems require immediate responses, and as such Agile is a useful approach to solving these operational problems, due to their unpredictable nature. DevOps seeks to eliminate this unpredictability by having a set of guidelines and a systematic approach to the integration, development, and eventual deployment of code Though DevOps (automating structured tasks to accomplish specific goals and produce completed products), and Agile (adapting to changing workflow or new requirements rather than following formulaic plans) seem to be contrary, both methodologies uderlyingly serve the same purpose: To create working and valuable code as quickly and efficiently as possible. DevOps actually inherently adopts many Agile methodologies, as it encourages the collaboration of development and operations when creating software products. SDLC is a disciplined and systematic approach that divides the software development process into various phases, such as requirements, design, and coding. The phase-wise software development process helps you track schedule, cost, and quality of the softwa ---------------------- object oriented analysis and design using UML : Spiral Approach: -Six phases: customer communication, planning , risk analysis, engineering, constuction and release and customer evaluation. ----------------------------------------------------------------------------------------------------------------------------------- SDLC The Software Development Life Cycle [SDLC] outlines the process to plan, create, test and deploy information systems and applications. SDLC follows these General Steps: 1. Requirements Phase The existing system (if any) is evaluated, and determinations are made to address existing flaws or systems necessary for the new/improved functionality desired. Performed by: Business Analysts. 2. Analysis Phase The system requirements are defined for the new system. Particularly, deficienceies and proposals to improve the system are addressed. Performed by: Business Analysts with Collaboration from Senior Members of staff. 3. Design Phase The proposed system is designed and product features are mapped. Does not involve the production of actual code. Performed by: System Architects and Senior Developement staff. 4. Development Phase Production of actual code to build systems. Performed by: Development team 5. Testing Phase Software is tested against system requirements to ensure intended functionality. Performed by: Development team & Testing team 6. Deployment and Maintenance Phase Product is deployed to customer or end users. System is maintained if/when issues arise. Performed by: Operations team with possible input from Development team as needed Practicing SDLC refers to the methodology utilized when performing these outlined steps. DevOps practices, where development and operations teams work collaboratively. Agile principles An agile project is segmented into several incremental steps that include regular feedback intervals. A project requirement is segmented into smaller pieces, which are then prioritized by importance. Promotes collaboration, especially with the customer. Adjusts at regular intervals to ensure a customer’s needs are met Integrates planning with execution, which allows a team to effectively respond to changing requirements The advantages of agile project management Faster feedback cycles Identifies problems early Higher potential for customer satisfaction Time to market is dramatically improved Better visibility / accountability Dedicated teams drive better productivity over time Flexible prioritization focused on value delivery The disadvantages of agile Critical path and inter-project dependencies may not be clearly defined as in waterfall There is an organizational learning curve cost True agile execution with a continuous deployment pipeline has many technical dependencies and engineering costs to establish Speed Teams that practice DevOps release deliverables more frequently, with higher quality and stability. In fact, the DORA 2019 State of DevOps report found that elite teams deploy 208 times more frequently and 106 times faster than low-performing teams. Continuous delivery allows teams to build, test, and deliver software with automated tools. Video Call Improved collaboration The foundation of DevOps is a culture of collaboration between developers and operations teams, who share responsibilities and combine work. This makes teams more efficient and saves time related to work handoffs and creating code that is designed for the environment where it runs. Code Release Rocket Rapid deployment By increasing the frequency and velocity of releases, DevOps teams improve products rapidly. A competitive advantage can be gained by quickly releasing new features and repairing bugs. Code Pipeline Quality and reliability Practices like continuous integration and continuous delivery ensure changes are functional and safe, which improves the quality of a software product. Monitoring helps teams keep informed of performance in real-time. Security Shield Security By integrating security into a continuous integration, continuous delivery, and continuous deployment pipeline, DevSecOps is an active, integrated part of the development process. Security is built into the product by integrating active security audits and security testing into agile development and DevOps workflows. TEST DRIVEN DEVELOPMENT , MINDEST : AUTONOMOUS autonomous development pipeline. Continuous Integration Continuous Integration (CI) is the first, and most fundamental step in creating an autonomous development pipeline. (A) Continuous Integration is a software development practice where members of a team integrate their work frequently, usually each person integrates at least daily - leading to multiple integrations per day. Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible. Many teams find that this approach leads to significantly reduced integration problems and allows a team to develop cohesive software more rapidly. Version control software is a tool which utilizes some directory structure to store files. Central repositories should be in the form of version control software. (1st) Choice source code management system: version control software: Github Gitlab Perforce Bazaar DevOps Tools best way to ensure your code integrates well is to marry the integration of your code with testing the code. Running test suites on the code base after new commits helps to minimise potential disruptions if conflicts do arise, particularly when utilizing certain DevOps tools to automatically run unit and integration tests. Despite this, it is also best to practice Test Driven Development. tools can track changes to code, and allow for changes to be merged (allowing you to select which changes to keep or reject if/when conflicts arise) or files to be rolled back to a previous version (B) Continuous Delivery is a paradigm in which the building, management and testing of produced software is automated such that deployments can be performed at the push of a button. { building, management and testing} Continuous Delivery; however is the process of automating all steps of a Development pipeline except for the final deployment step (C) Continuous Deployment is a process of releasing software in which changes are tested for stability and correctness automatically. This results in immediate, autonomous deployment of code to production environments. Differencw between: ( Manual or Automatic approval process/evaluatio of code depoloyed In Continuous Delivery there is a final, manual approval process needed before code is deployed to production environments. Continuous Deployment forgoes human intervention at every step of the deployment process, and pushes new code into the working production environment immediately so long as it meets the test requirements. Continuous Deployment is the ultimate goal for establishing a true DevOps pipeline -------------------------------------------------------------------------------------------------------------------------------------------------- Whenever you create a function within another function, you have created a closure. The inner function is the closure. This closure is usually returned so you can use the outer function’s variables at a later time. JavaScript variables can belong to the local or global scope. Global variables can be made local (private) with closures. closures. A closure is a function having access to the parent scope, even after the parent function has closed. >>* IIFE - Immediately Invoked Function Expression. It is s a JavaScript function that runs as soon as it is defined. Syntax : (function () { statements })(); ssigning the IIFE to a variable stores the function's result, not the function itself. var result = (function () { var name = "Barry"; return Assigning the IIFE to a variable stores the function's result, not the function itself. var result = (function () { var name = "Barry"; return name; })(); // Immediately creates the output: result; // "Barry" name; })(); // Immediately creates the output: result; // "Barry" Software Testing Life Cycle (STLC) is a testing strategy that can help you efficiently meet software quality standards. STLC enforces systematic testing, which is performed in phases. STLC is often confused with Software Development Life Cycle (SDLC), but while STLC is focused on testing, SDLC encompasses all development stages. Read on for an in-depth look at STLC and its six phases. ------------------------------------------------------------------------------------------------------------------------------------------------------- An STLC helps teams: Refine the agile testing process, increasing consistency and effectiveness Clearly define goals and expectations for each project aspect Apply time constraints to project testing Ensure that each feature is tested and passing before additional features are added Verify that project requirements are me The primary difference is that SDLC is responsible for collecting requirements and creating features accordingly. Meanwhile, STLC is responsible for creating tests adapted to the collected requirements and for verifying that features meet those requirements. @Tony There are no indecipherable writings, any writing system produced by man can be read by man. What created by a human mind, can be solved by another human mind. From this point of view does not exist and cannot exist unsolved problems in any area of science.- Yurui Knorozov burndwon chart sprint , explicit weights , versus implicit weights xml, JSON, used to store variables Local npm Install @angular/cli global ng new product-app-jwa-us ----components in Angular Amad-app A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter https://www.oodlestechnologies.com/blogs/access-modifiers-in-angular-typescript/ Multiple constructor implementations are not allowed. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript tsc command convert into javascript ------------------------------------- var marks : number =90 var ename: string ="Mohan" function display() { console.log("display called"); } console.log(marks) console.log(ename); display(); ------------------- ge developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript Directives component structural attriute ng g class models/employee npm install -g @angular/cli ng new product-app-final npm start ////start server ng c components/productList getColor(country: string) { switch (country) { case 'UK': return 'green'; case 'USA': return 'blue'; case 'IN': return 'red'; default: return 'yellow' } } people: any[] = [ { "name": "Tufail Ahmed", "country": 'IN' }, { "name": "Neha Sharma", "country": 'UK' }, { "name": "Ravi Kiran", "country": 'IN' }, { "name": "Tarun Sharma", "country": 'IN' }, { "name": "Cook Tyson", "country": 'USA' } ]; -------------======================== Next QC - Angular Monday ============================== Data Binding provides the communication between a component and the DOM. Two-way data binding is achieved by combining property binding and event binding together. patient informationsystem patientId patientName symptom billAmount doctorAttended ========================================================= Patient Information System patientId ? : number; patientName ? : string; symptom ? : string; billAmount ?: number doctorAttended ?: string (Cold,Cough,Fever) PatientIdPatientNameSymptomTotal BillDoctorAttended 7 patient details 1) All the patient details should in a table 2) Cold patients should be in red color 3)Cough patients should be in blue color 4) Fever patients should be in green color 5) Other patients should be lime color - component patient model patient <table border="10" cellspacing="10" cellpadding=""10> <tr> <th>Patient Id</th> <th>Patient Name</th> <th>Symptom</th> <th>Bill Amount</th> <th>Doctor Attended</th> <th>Available</th> </tr> <tr *ngFor="let patient of patients"> <td>{{patient.patientId}}</td> <td>{{patient.patientName}}</td> <td>{{patient.symptom}}</td> <td>{{patient.billAmount}}</td> <td>{{patient.doctorAttended}}</td> <td *ngIf=""patientAvailable>Patient Available}</td> </tr> </table> <br/> <br/> <h1></h1> <table> <tr> <th>Name</th> <th>Country</th> </tr> <tr *ngFor = "let p of people"[ngStyle]="{'color':getColor(p.country)}"> <td>{{p.name}}</td> <td>{{p.country}}</td> </tr> </table> getColor(country: string) { switch (country) { case 'UK': return 'green'; case 'USA': return 'blue'; case 'IN': return 'red'; default: return 'yellow' } } people: any[] = [ { "name": "Tufail Ahmed", "country": 'IN' }, { "name": "Neha Sharma", "country": 'UK' }, { "name": "Ravi Kiran", "country": 'IN' }, { "name": "Tarun Sharma", "country": 'IN' }, { "name": "Cook Tyson", "country": 'USA' } ]; ============================== <app-patient></app-patient> =============================== </head> <body> <app-root></app-root> </body> </html> : prams : API : REST API : JSON( JavaScript Object Notation) import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Product } from '../models/product'; import { Observable } from 'rxjs'; const productURL = "http://localhost:3000/product" @Injectable({ providedIn: 'root' }) export class ProductService { constructor(public httpClient:HttpClient) { } getProducts() : Observable<Product []>{ return this.httpClient.get<Product []>(productURL); } } import { Component, OnInit } from '@angular/core'; import { Product } from 'src/app/models/product'; import { ProductData } from 'src/app/models/product-data'; import { ProductService } from 'src/app/services/product.service'; const productURL = "http://localhost:3000/product" @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit { products: Product[] = []; public productAvailable = true; public color="blue"; productData = new ProductData(); constructor(public productServices: ProductService) { //this.products = this.productData.getProducts(); this.productServices.getProducts().subscribe(data:any) => { this.products = data; } } ngOnInit(): void { } product list ts import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Product } from '../models/product'; import { Observable } from 'rxjs'; const productURL = "http://localhost:3000/product" @Injectable({ providedIn: 'root' }) export class ProductService { constructor(public httpClient:HttpClient) { } getProducts() : Observable<Product []>{ return this.httpClient.get<Product []>(productURL); } } import { Component, OnInit } from '@angular/core'; import { Product } from 'src/app/models/product'; import { ProductData } from 'src/app/models/product-data'; import { ProductService } from 'src/app/services/product.service'; const productURL = "http://localhost:3000/product" @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit { products: Product[] = []; public productAvailable = true; public color="blue"; productData = new ProductData(); constructor(public productServices: ProductService) { //this.products = this.productData.getProducts(); this.productServices.getProducts().subscribe(data:any) => { this.products = data; } } ngOnInit(): void { } ========================== routing in Angular creating hyperlinks, ========================= ***************************************************************************************************** ' <app-patient></app-patient><app-product-list> </app-product-list><app-product-info></app-product-info><h1> This is Practice in Angular - JWA Batch</h1>' ======================================================== json-server --watch productdb.json --id productId http://localhost:3000/product json-server --watch patientsdb.json --id patientId --port 5678 ================================================================ json-server --watch productdb.json --id productId c: notepad productdb.json postman http:// npm install npm start json-server --watch productdb.json --id productId =============================================== <app-product-info></app-product-info> <app-patient></app-patient> Java has an API to inspect and manipulate its own code at runtime. java.reflection or() fucntional language : suited for ------------------------------------ provides object to project Postman Ge: rtriece put; update post-create ++++++++++++++++++++++++++++++++++++++ TDF: Template driven forms FormsMdel: [(ngModel Model/driven Forms: Reactive Forms : text you enter , will go directly ************************************************ Valid invalid pristine- not yet interacted dirty touched untouched ========================================== Add Patients | View All Patients | patientId patientName symptom billAmount doctorAttended *required *billAmount amount should be between 10000 and 50000 Save Patients *After savings , it should redirect to View All Patients export class Patient { patientId ? : number; patientName ? : string; symptom : string =""; billAmount ?: number doctorAttended ?: string } export class ProductListComponent implements OnInit { products: Product[] = []; public productAvailable = true; public color = "blue"; productData = new ProductData(); public errorMessage !: string; public guestName: string = "Isha"; //DI (Dependency Injection) constructor(public productService: ProductService) { // this.products = this.productData.getProducts(); // this.products = productService.getProducts(); this.productService.getProducts().subscribe((data:any) => { this.products = data; }) } ------------------------------ zi>json server --watch produtdb.json --id productId 'json' is not recognized as an internal or external command, operable program or batch file. C:\Users\jahzi>json server --watch product.json --id productid 'json' is not recognized as an internal or external command, operable program or batch file. C:\Users\jahzi>json-server --watch productdb.json --id productId \{^_^}/ hi! Loading productdb.json Done Resources http://localhost:3000/product Home http://localhost:3000 Type s + enter at any time to create a snapshot of the database Watching... =============================== Angular is Modular in Nature Node.js is used to execute JavaScript code outside of a web browser. It Why we need Node.js for Angular We use Node.js and npm as tools for building Angular or React apps. Angular is a front-end framework used to create a web application and is written in Typescript. The browser only understands JavaScript code, so we need to compile Typescript (.ts file) to plain JavaScript (.js file). We use Node.js and npm to perform this compilation, then we can deploy them in production. package.json:This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies. This file contains metadata relevant to the project, such as project description, the version of the project, license information, etc., ====================================== MVC vs UI , JS vs TS, ahead of time compiling (new),tree-shaking =========== @input @output ============================================= localhost:5050/product/filterProductByPrice/100/500 Returning all the products between 100 and 500 localhost:5050/product/filterProductByPrice/300/600 Returning all the products between 300 and 600 ===================== @RequestBody ========================== : localhost:5050/product Post ========== Lombok is library by which you can reduce you boilerplate code @NotArgsConstructor ============================= localhost:5050/patients-GET localhost:5050/patients/1090-GET localhost:5050/patients-POST localhost:5050/patients/1090-PUT localhost:5050/patients/1090-DELETE localhost:5050/patients/getDoctors localhost:5050/patients/getPatients localhost:5050/patients/getPatientsByBillAmount/199/to/400 ======================== "patientId": "1866", "patientName": "Mariam", "symptom": "17", "billAmount": "34", "doctorAttended" :"Dr.John" }, { "patientId": "1866", "patientName": "Mariam", "symptom": "17", "billAmount": "34", "doctorAttended" :"Dr.Susan" } ============== DeleteMapping("deleteProductById/{productId}") public String deleteProduct(@PathVariable("productId") int id) //localhost:5050/product - DELETE { return "Deleting product by Id: " + id; } @DeleteMapping("deleteProductByName/{productName}") public String deleteProduct(@PathVariable("productName") String name) //localhost:5050/product/allProduct -DELETE { return "Deleting product by name: " + name; } ========================================================================= ProductController.java @PutMapping//localhost:5050/product -PUT public String updateProduct(@PathVariable ("productId")int productId, @RequestBody Product product) {//localhost:5050/product/19189 return "Updating a single Product with "+productId+ "and the changes are : "+product; } @DeleteMapping("/allProduct") //localhost:5050/product/allProduct -DELETE public String deleteProduct2() { return "Deleting all the products"; } @GetMapping("{productId}")// localhost:5050/product/single -GET public String getProduct (@PathVariable("productId") int productId) { return "Getting a single product by productId : " +productId; } @GetMapping("searchProductByName/{productName}")// localhost:5050/product/single -GET public String getProductByProductName (@PathVariable("productName")String pname){ return "Getting a single product by productName "+pname; } @GetMapping("searchProdcutByName/{product}")// localhost:5050/product/single -GET public String getProduct() { return "Getting all the products"; } @DeleteMapping("deleteProductByNam/{productId}")//localhost:5050/product -DELETE public String deleteProduct (@PathVariable("{productId}") int productId) { return "Deleting a single product by productId " +productId; ============================== SPA: Ambigious From Controller calling repository and then database optional: Controller : Service : DAO/Rep 1: take request 2. serveice 3.connections ++++++++++++++++++++++++++++++++++++++++++++++++++++= package com.training.pms.repository; import org.springframework.data.repository.CrudRepository; import com.training.pms.model.Product; public interface ProductRepository extends CrudRepository<Product, Integer> { } ================== //(List<Product> ) //productRepository.findAll(); //return "Getting all the products ===================================================== @service @controller @repository @restcontroller ++++++++++++++++++++++++++ProductServiceImpl.java+++++++++++++++++++++ @Override public Product getProduct(int productId) { productRepository.deleteById(productId); return null ; } ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ web,devtools,postgres,jpa,lombok Spring : loosley cooupled Questions Autowire DI/IOC SPRING Autowiring feature of spring framework enables you to inject the object dependency implicitly. Stertype annotation in spring boot? Component , service repository and controller. ================================================================================ Stereotype Annotations Spring Framework provides us with some special annotations. These annotations are used to create Spring beans automatically in the application context. @Component annotation is the main Stereotype Annotation. There are some Stereotype meta-annotations which is derived from @Component those are @Service @Repository @Controller 1: @Service: We specify a class with @Service to indicate that they’re holding the business logic. Besides being used in the service layer, there isn’t any other special use for this annotation. The utility classes can be marked as Service classes. 2: @Repository: We specify a class with @Repository to indicate that they’re dealing with CRUD operations, usually, it’s used with DAO (Data Access Object) or Repository implementations that deal with database tables. 3: @Controller: We specify a class with @Controller to indicate that they’re front controllers and responsible to handle user requests and return the appropriate response. It is mostly used with REST Web 15 minutes HTTP Codes 4040 505 etc Code result = "roduct with product id : "+product.getProductId() +"already exists"; if(productService.isProductExists(product.getProductId())) { } //String result = demo.getMessage(); return productService.addProduct(product)+ demo.getMessage() ==================================== Now in Things to work during Phase-1----> Name and Job Title About Me Email Id & Contact Number Education & Certification Project-1 with GitHub ============================== Its easy, make a form that submits, in the controller check with button is not null, do stuff based on that condition ================================================== Jenkins Adrian Valencia Edwin Thomas Winter III Joel Rosas Docker Huanya Johnson Terrence Ingraham Taylor Day Create/join groups Tony Fisher Anthony Ardiente Amad Martin Mark Kamradt Wenjian Zhang Dark Mode Alexander Nagel Nicholas Lucara Kaylin Carter Joseph Tecson Upload profile picture Blessing Ajayi-Martins Trey Nicholson Kami Ruebush Devyn Rucker ====================================================== Next QC : Tuesday 10:30 EST Topics : Covered in week8 git clone -b bobby https://github.com/T-c-day/doctor-app.git how i pulled indivudal branch ===================================================================== Tables -------------- Group Information - Id => Identity - Description - Owner_fk -> User Id Group Membership - id => Identity - Member_fk -> User Id - info_fk -> GroupInfo id Backend : Controller,Services,Repositories,Model { "appointmentDescription": "Tester object", "noteableSymptoms": "sneezing:sorethroat:coughing", "appointmentDate": "05-07-2899", "patient": { "username": "tester3", "password": "tester", "email": "test3@email.com", "address": "1800 don't come here ave", "phoneNumber": "1234567890", "insuranceProvider": { "insuranceName": "test national", "phoneNumber": "123", "address": "stuff" } }, "doctor": { "doctorId": 420, "fName": "steve", "lName": "steve", "email": "121904@assblaster.com" } } package com.revature.revspace.models; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; //Model class @Data @AllArgsConstructor @NoArgsConstructor @Entity @Table(name = "group") public class Group { @Id private int groupId; private String groupName; private int userId; private int groupInfoId; private String groupDesc; }