Uploaded by Jahziel Makkenon

Training Wedsnday march 09

advertisement
======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;
}
Download