Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naopeke/angular_commands
About Angular
https://github.com/naopeke/angular_commands
angular reference-material
Last synced: 11 days ago
JSON representation
About Angular
- Host: GitHub
- URL: https://github.com/naopeke/angular_commands
- Owner: naopeke
- Created: 2023-12-12T14:59:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-21T09:11:43.000Z (about 1 year ago)
- Last Synced: 2024-11-13T16:50:54.761Z (2 months ago)
- Topics: angular, reference-material
- Homepage:
- Size: 185 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Commands
```
npm i -g @angular/[email protected]
```
```
npm uninstall -g @angular/cli
```
```
npm cache clean --force
```
```
ng new my-app(nombre de aplicacion)
```
**MODULOS CON CLI**
モジュールの作成
```
ng generate module nombre-del-modulo
ng g m nombre-del modulo
```
**MODULOS**
```
import{ NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { MiComponente } from './mi-componente.component'
@NgModule({
declarations: [MiComponente],
imports: [CommonModule],
exports: [MiComponente]
})
export class MiModulo {}
```
**COMPONENTS CON CLI**
コンポーネントの作成
```
ng generate component nombre-del componente
ng g c nombre-del componente
```
**4 archivos**
__.component.ts
__.component.html
__.component.css
__.component.spec.ts
```
npm start
```
**Actively supported versions**
https://angular.io/guide/versions
Node.js
```
nvm install 18.10.0 // to install the version of node.js I wanted
nvm use 18.10.0 // use the installed version
```
Angular (Downgrade @angular-devkit/build-angular)
```
npm list @angular-devkit/build-angular
npm install @angular-devkit/[email protected] --save-dev
```
http://localhost:4200/
**親のコンポーネント作成（myApp-src-app内トップ）**
```
ng g c padre
```
```
app.module.ts
@NgModule({
declarations: [
AppComponent,
PadreComponent
// added automatically
]
})
```
**INPUT**
親コンポーネントから子コンポーネントに値を引き渡す
https://qiita.com/masaks/items/677195b78379e0877e24
```
//Componente hijo
@Input() datoEntrada: string;
//Componente padre
//Componente padre
valorDesdePadre = "Hola, mundo!"
//Componente hijo template
{{ datoEntrada }}
```
**OUTPUT**
子コンポーネントから親コンポーネントにイベント(値)を引き渡す
```
//Componente hijo
@Output() messageEvent = new EventEmitter();
message: string = '';
sendMessage(){
this.messageEvent.emit(this.message)
}
//Componente hijo
Mensaje:
[(ngModel)]="message" />
Enviar Mensaje
//Componente padre
receivedMessage: string = '';
receiveMessage(message: string){
this.receivedMessage = message;
}
//Componente padre
Mensaje recibido en el padre {{ receivedMessage}}
```
**Servicio con Cli**
サービスとは、アプリケーションのロジックやデータを扱うためのクラスです。
Angularでは基本的に、コンポーネントが画面の表示を担当し、サービスがその他の処理を担当するように設計します。
https://tech.quartetcom.co.jp/2023/02/28/angular-service-providing-guide/
```
ng generate service nombre-del-servicio
ng g s nombre-del-servicio
```
```
@import { Injectable } from '@anglar/core';
@Injectable({
providedIn: 'root'
})
export class MiServicioService {
constructor() {}
//Métodos y lógica del servicio
}
```
**Inyeccion de dependencias**
依存性の注入 Inject関数
https://zenn.dev/tkawa01/articles/d7245446018de0
https://zenn.dev/lacolaco/articles/why-inject-function-wins
https://angular.jp/guide/dependency-injection
https://angular.jp/guide/dependency-injection-in-action
```
import { Component } from '@anglar/core';
import { MiServicio } from './mi-servicio.service';
@Component({
selector: 'app-mi-componente',
templateUrl: './mi-componente.component.html'
})
export class MiComponente {
constructor(privete miServicio: MiServicio){
//una variable, miServicio e inyecta esta forma de MiServicio
//...
//a partir de Angular17, "inject". servicio inject MiServicio
}
}
```
**Directiva**
https://zenn.dev/knts0/articles/8afe1dd9d8981daf8286
ディレクティブ
```
ng generate directive nombre-de-la-directiva
ng g d nombre-de-la-directiva
```
```
//html
Este es un elemento con mi directiva personalizada.
//nombre-de-la-directiva.directive.ts
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appMiDirectiva]'
})
export class MiDirectivaDirective {
constructor(private el: ElementRef){
//Accede al elemento del DO en el que se aplica la directiva (this.el.nativeElement)
this.el.nativeElement.style.backgroundColor = 'yellow';
}
}
```
**PIPES**
```
ng generate pipe nombre-del-pipe
ng g p nombre-del-pipe
```
```
//nombre-del-pipe.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'miPipe'
})
export class MiPipe implements PipeTransform {
transform(valor: any): any{
//Implementa la lógica de transformación aquí
return valor.toUpperCase();
}
}
```
```
{{texto | miPipe }}
https://angular.io/guide/pipes
```
**Rutas(Routes)**
```
const routes: Routes = [
{ path: 'inicio', component: InicioComponent },
{ path: 'productos', component: ProductosComponent },
{ path: 'contacto', component: ContactoComponent },
]
```
**Router Outlet**
```
```
**Navegación**
```
Inicio
```
**Parámetros de Ruta**
```
{ path: 'producto/:id', component: DetalleProductoComponent }
Ver Detalles
```
**routerLinkActive**
```
```
**Parámetros por la URL**
1. Definir una ruta con varios parámetros:
```
const routes: Routes = [
{ path: 'producto/:categoria/:id', component: DetalleProductoComponent },
];
```
2. Enlazar a la ruta con múltiples parámetros:
```
Ver Detalles
```
3. Recuperar los parámetros en el componente:
```
import { ActivatedRoute } from '@angular/router';
//...
constructor(private route: ActivatedRoute) {}
ngOnInit(){
this.route.params.subscribe(params => {
const categoria = params['categoria'];
const productId = params['id'];
// Hacer algo con los valores de los parámetros
})
}
```
**Navegar desde el controller**
```
import { Router } from '@angular/router';
//...
constructor(private router: Router) {}
//...
navegarAProducto(productoId: number){
//Puedes navegar a una ruta especifica programáticamente
this.router.navigate(['/producto, productoId]);
}
```
**Bootstrap**
```
ng new landing-page-angular
```
```
npm i [email protected]
```
ルーティングモジュール(app-routing.module.ts)を手動で追加:
```
ng generate module app-routing --flat --module=app
```
あるいは
新しいプロジェクトを--routingフラグをつけて作成
```
ng new my-app --routing
```
node_module - dist - css - bootstrap.min.css - (click) copy relative path
=> (paste)angular.json
```
//27, 92
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
```
node_module - dist - js - bootstrap.bundle.min.js - (click) copy relative path
```
//30, 95
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
```
**Crear otros componentes**
```
ng g c home
```
```
ng g c products
```
```
ng g c contact
```
```
ng g c product-detail
```
**Estructuras de Control**
**ngIf**
```
Contenido visible si mostrarElemento es true.
```
**ngFor**
```
-
{{ item }}
```
**ngSwitch**
```
Contenido para opción 1
Contenido para opción 2
Contenido por defecto
```
**ngClass**
```
//Contenido con clases dinámicos
```
**ngStyle**
```
//Contenido con estilos dinámicos
```
**ngContainer**
```
//Contenido que no afecta al DOM directamente
```
**otras estructuras de control:**
ngTemplate
ngPlural
ngComponentOutlet
**Formulario**
Importar FormsModule para formularios de plantilla
```
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
//tus componentes aquí
],
imports: [
FormsModule,
// otros modulos que estés utilizando
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
**Formularios basados en plantillas (Template-driven);**
```
Nombre:
Correo:
Enviar
```
**Manejo de estado y errores**
```
Nombre es obligatorio.
```
**Importar ReactiveFormsModule para formularios reactivos**
```
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
// tus componentes aquí
],
imports: [
ReactiveFormsModule
// otros módulos que estés utilizando
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
**Formularios reactivoe (Reactive): utiliza el servicio FormBuilder**
HTML
```
Nombre:
Correo:
Enviar
```
TS
```
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
constructor(private fb: FormBuilder){
this.myForm = this.fb.group( {
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
```
**Manejo de estado y errores**
```
Nombre es obligatorio.
Correo no válido.
```
**Ciculo de vida**
1.ngOnChanges
1.ngOnInit
1.ngDoCheck
1.ngAfterContentInit
1.ngAfterContentChecked
1.ngAfterViewInit
1.ngAfterViewChecked
1.ngOnDestroy
**ngOnChanges**
nombreInputというプロパティがあり、親コンポーネントから変わった際に、ngOnChangesが動く。
ngOnChangeの中からは、パラメータchangesからその変更にアクセスでき、その変更を実行できる。
```
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-mi-componente',
template: '
Hola, {{ nombre }}
})
export class MiComponente implements OnChanges {
//Propiedad de entrada
@Input() nombreInput:string;
//Propiedad del componente
nombre:string;
//Método ngOnChanges se llama cuando hay cambios en las propiedades de entrada
ngOnChanges(changes: SimpleChanges):void{
//Verifica si la propiedad de entrada 'nombreInput' ha cambiado
if(changes.nombreInput){
this.nombre = changes.nombreInput.currentValue;
console.log(`Se ha cambiado el valor de nombreInput a: ${this.nombre}`);
}
}
}
```
**ngOnInit**
ngOnInitはすべてのコンポーネントのプロパティを開始したあとに実行する。
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mi-componente',
template: '
Hola, mundo!
',
})
export class MiComponente implements OnInit {
//Propiedad de ejemplo
nombre: string;
//Constructor del componente
constructor(){
//Puedes incializar propiedades aquí, pero es una buena práctica hacerlo en ngOnInit
}
//Método ngOnInit se llama después de que Angular ha inicializado todas las propiedades del componente
ngOnInit(): void {
this.nombre = 'Usuario';
console.log(`Hola, ${this.nombre}! El componente se ha inicializado`);
}
}
```
**ngDoCheck**
Angular内での変更を見つける。その度に発動するので複雑なものは入れないこと。
```
import { Component, DoCheck } from '@angular/core';
@Component({
selector: 'app-mi-componente',
template: '
Hola, {{ nombre }}!
',
})
export class MiComponente implements DoCheck {
}
nombre:string = 'Usuario';
//Método ngDoCheck se llama durante cada detección de cambios
ngDoCheck():void {
console.log('Se está ejecutando ngDoCheck');
//Puedes realizar acciones de verificación personalizadas aquí
}
```
**ngAfterContentInit**
```
import { Component, AfterContentInit, ContentChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-mi-componente',
template: '',
})
export class MiComponente implements AfterContentInit {
//ContentChild para acceder a un elemento dentro del contenido proyectado
@ContentChild('nombreElemento') nombreElemento: ElementRef;
//Método ngAfterContentInit se llama después de que Angular haya proyectado el contenido
ngAfterContentInit():void{
//Realizar acciones después de que el contenido haya sido inicializado
if(this.nombreElemento){
console.log(`Se ha encontrado un elemento con el nombre 'nombreElemento'.`);
}
}
}
```
**ngAfterContentChecked**
```
import { Component, AfterContentChecked, ContentChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-mi-componente',
template: '',
})
export class MiComponente implements AfterContentChecked {
//ContentChild para acceder a un elemento dentro del contenido proyectado
@ContentChild('nombreElemento') nombreElemento: ElementRef;
//Método ngAfterContentChecked se llama después de cada verificación del contenido proyectado
ngAfterContentChecked():void {
//Realizar acciones después de cada verificación del contenido
if (this.nombreElemento){
console.log(`Se ha verificado el contenido y se ha encontrado un elemento con el nombre 'nombreElemento'.`);
}
}
```
**ngAfterViewInit**
```
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-mi-componente',
template: '
Hola, mundo!
,
})
export class MiComponente implements AfterViewInit {
//ViewChild para acceder a un elemento en la vista del componente
@ViewChild('miParrafo') miParrafo: ElementRef;
//Método ngAfterViewInit se llama después de que Angular haya inicializado las vistas del componente
ngAfterViewInit():void {
//Realizar acciones después de que la vista haya sido inicializada
if (this.miParrafo){
console.log(`Se ha inicializado la vista y se ha encontrado un párrafo: ${this.miParrafo.nativeElement.textContent}`);
}
}
}
```
**ngAfterViewChecked**
```
import { Component, AfterViewChecked, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-mi-componente',
template: '
{{ mensaje }}
,
})
export class MiComponente implements AfterViewChecked {
mensaje: string = 'Hola, mundo!';
//ViewChild para acceder a un elemento en la vista del componente
@ViewChild('miParrafo') miParrafo: ElementRef;
//Método ngAfterViewChecked se llama después de cada verificación de las vistas del componente
ngAfterViewChecked():void {
//Realizar acciones después de cada verificación de las vistas
if(this.miParrafo){
console.log(`Se ha verificado la vista y el contenido del párrafo es: ${this.miParrafo.nativeElement.textContent}`);
}
}
}
```
**ngOnDestroy**
```
import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-mi-componente',
template: '
Adiós, mundo!
,
})
export class MiComponente implements OnDestroy {
//Ejemplo de suscripción a un observable
private subscription: Subscription;
constructor(){
//Simulación de suscripción a un observable
this.subscription = new Subscription();
}
//Método ngOnDestroy se llama justo antes de que Angular destruya el componente
ngOnDestroy():void{
//Realizar limpieza, como desuscribirse de observables o liberar recursos
if (this.subscription){
this.subscription.unsubscribe();
console.log('Se ha desuscrito de la suscripción en ngOnDestroy');
}
}
}
```
# API
API : Application Programing Interface
Rest : REpresentational State Transfer
REST API は、REST アーキテクチャの制約に従って、RESTful Web サービスとの対話を可能にする アプリケーション・プログラミング・インタフェース (API または Web API) です。REST (Representational State Transfer) は、コンピュータ・サイエンティストの Roy Fielding によって作成された API の構築方法を定義する仕様であり、REST 用に設計された REST API (または RESTful API) は軽量で高速であるため、IoT (モノのインターネット)、モバイル・アプリケーション開発、サーバーレス・コンピューティングなどの先進的なコンテキストに最適です。
https://www.redhat.com/ja/topics/api/what-is-a-rest-api
HttpClientModuleをインポート
(NgModule APIとは）https://angular.jp/guide/ngmodule-api
```
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
//tus componentes aquí
],
imports:[
HttpClientModule,
//otros módulos aquí
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
**使い方**
```
ng generate service my-api
```
```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MyApiService {
private apiUrl = 'https://mi-api.com';
constructor(private http: HttpClient) { }
getData(): Observable {
return this.http.get(`${this.apiUrl}/datos`);
}
postData(data:any): Observable {
return this.http.post(`${this.apiUrl}/enviar-datos`, data);
}
}
```
```
import { Component, OnInit } from '@angular/core';
import { MyApiService } from 'ruta-al-servicio';
@Component({
selector: 'app-mi-componente',
templateUrl: './mi-componente.component.html',
styleUrls:['./mi-componente.component.css']
})
export class MiComponenteComponent implements OnInit {
constructor(private myApiService: MyApiService) { }
ngOnInit(): void{
this.myApiService.getData().subscribe({
next: (data:any) => {
//Manejar la respuesta de la API exitosa (next)
console.log(data);
},
error: (error:any) => {
//Manejar errores
console.error('Error en la solicitud HTTP:', error);
}
});
}
}
```
**api fake products**
Fake Api
[https://github.com/keikaavousi/fake-store-api ](https://fakestoreapi.com/)
quicktype Convert JSON
https://quicktype.io/
**Property Binding**
Attributes - HTML => Attribute values cannot change 変化しない
Properties - DOM (Document Object Model) => Property values can change 変化する
https://www.youtube.com/watch?v=N8FBmB2jme8
```
Welcome {{ name }}}
// properties: myId
//Interpolation（補間：変数や式を埋め込んで、文字列やコードの一部を生成するプロセス）には、Stringでしか使えないという制限がある。
//HTMLプロパティのBooleanをバインドするときはInterpolationが使えない。
//この両方の場合、disabledが機能し、falseに意味はない。こういった場合に、プロパティバインディングを使う。
export class TestComponent implements OnInit {
public name = "Codevolution";
public myId = "testId";
constructor(){}
ngOnInit(){}
}
```
他の方法はクラスを作成する
```
export class TestComponent implements OnInit {
public name = "Codevolution";
public myId = "testId";
public isDisabled = true;
```
**Class Binding**
https://www.youtube.com/watch?v=Y6OP-lPJxgs
test.component.ts
```
Codevolution
Codevolution
Codevolution
// Not italic style. Regular class attribute becomes a dummy attribute
Codevolution
//text-danger will be applied
//To apply multiple classes, [ngClass]
Codevolution
// public hasError = false, public isSpecial = true; => green and italic
// public hasError = true, public isSpecial = true; => red and italic
styles: [
.text-success{
color:green;
}
.text-danger{
color:red;
}
.text-special {
font-style:italic;
}
]
export class TestComponent implements OnInit {
public name = "Codevolution";
public successClass = "text-success";
public hasError = true;
public isSpecial = true;
public messageClasses = {
"text-success": !this.hasError,
"text-danger": this.hasError,
"text-special": this.isSpecial
}
constructor(){ }
ngOnInit(){
}
}
```
**Style Binding**
https://www.youtube.com/watch?v=q256X6-u9Q8
```
@Component({
selector: 'app-test',
template: `
Welcome {{ name }}
Style Binding
Style Binding
//hasError is true, red. if not, green.
Style Binding
//hightlightColor: orange
Style Binding
//blue
`,
styles: []
})
export class TestComponent implements OnInit {
public name = "Codevolution";
public hasError = false;
public isSpecial = true;
public hightlightColor = "orange";
public titleStyles = {
color:"blue",
fontStyle:"italic"
}
```
**Event Binding**
https://www.youtube.com/watch?v=ZfIc1_oj7uM
```
@Component({
selector: 'app-test',
template: `
Welcome {{ name }}
Greet
//"Welcome to Codevolution" and MouseEvent in console
Greet
//"Welcome Vishwas" and no console
{{ greeting }}
`,
styles: []
})
export class TestComponent implements OnInit {
public name = "Codevolution";
public greeting="";
constructor(){ }
ngOnInit(){
}
onClick(event){
console.log('Welcome to Codevolution');
this.greeting = 'Welcome to Codevolution'
this.greeting = event.type;
//"click" and MouseEvent in console
```
**Template Reference Variables**
https://www.youtube.com/watch?v=Oo0-r_YhoJs
```
@Component({
selector: 'app-test',
template: `
Welcome {{ name }}
Log
//What you typed ("Vishwas") in the console
Log
// in the console
`,
styles: []
})
export class TestComponent implements OnInit {
public name = "Codevolution";
constructor(){ }
ngOnInit(){
}
logMessage(value){
console.log(value);
}
```
**Two way binding**
https://www.youtube.com/watch?v=DOWwWsbG1Sw
```
@Component({
selector: 'app-test',
template: `
{{ name }}
`,
styles: []
})
export class TestComponent implements OnInit {
public name="";
constructor(){ }
ngOnInit(){
}
}
```
**ngModel**
Angularで input 要素の value 属性を設定する場合、通常は ngModel ディレクティブを使います。
1. Angularフォームモジュールを利用するために FormsModule をインポート
```
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule, // FormsModuleをインポート
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
2. コンポーネントのテンプレートで ngModel ディレクティブを使って input 要素の value をバインド
```
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Value: {{ value }}
`,
})
export class AppComponent {
value: string = "initial value";
}
```
Angular 12以降では、FormsModule が ReactiveFormsModule に統合
**ngIf**
https://www.youtube.com/watch?v=nWst87nQmZQ
```
// test.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
template:`
Codevolution
// "Codevolution" appears in the console
Codevolution
//"Codevolution" doesn't appear in the console
Codevolution
//displayName = true;
//"Codevolution" appears in the console
//displayName = false;
//"Codevolution" doesn't appear in the console
Codevolution
Name is hidden
//else block is a reference to this block of HTML
//ng template tag is like a container for other elements that the ng-if directive can use to properly add or remove blocks of HTML from the DOM
// displayName = false;
// shows elseBlock "Name is hidden" appears in html
Codevolution
Hidden
// displayName = false;
// shows elseBlock "Hidden"
// displayName = true;
// shows thenBlock "Codevolution"
`,
})
export class TestComponent implements OnInit {
displayName = true;
constructor(){ }
ngOnInit(){
}
}
```
**ngSwitch**
https://www.youtube.com/watch?v=WiDn2y1Ktws
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
template:`
You picked red color
You picked blue color
You picked green color
Pick again
`,
})
export class TestComponent implements OnInit {
puclic color = "red";
constructor(){ }
ngOnInit(){
}
}
```
**ngFor**
https://www.youtube.com/watch?v=Du3p6QYGs3A
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
template:`
{{ color }}
// red blue green yellow
{{i}} {{ color }}
// 0 red 1 blue 2 green 3 yellow
{{f}} {{ color }}
// true red false blue false green false yellow
{{l}} {{ color }}
// false red false blue false green true yellow
{{o}} {{ color }}
// false red true blue false green true yellow (Odd numbe)
{{e}} {{ color }}
// true red false blue true green false yellow (Odd numbe)
`,
})
export class TestComponent implements OnInit {
puclic color = ["red", "blue", "green", "yellow"];
constructor(){ }
ngOnInit(){
}
}
```
**Component Interaction @Input**
app.component.ts
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: '-/app.component.html',
styleUrls: ['./app.component.css]
})
export class AppComponent {
title = 'app';
public name = "Vishwas";
}
```
app.component.html [PARENT]
```
Welcome to {{title}}
```
test.component.ts [CHILD}
```
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-root',
template:`
{{"Hello " + parentData}}
// "Hello Vishwas" in the browser
`,
styles: []
})
export class TestComponent implements OnInit {
@Input() public parentData;
@Input('parentData') public name;
//When you want to use the different property name than the one parent component uses, you can specify an alias
//I call this property as "name" within this componen, but input is still the parent data.
//In this case,
{{"Hello " + name}}
constructor(){ }
ngOnInit(){ }
}
```
1.子コンポーネントに @Input プロパティを定義
2.親コンポーネントから子コンポーネントにデータを渡す
**Component Interaction @Output**
The way that a child component sends data to the parent component is using events.
Send "hello codevolution" from the text component to the app component, and display in the app component.
app.component.html [PARENT]
```
{{ message }}
//this $ event variable is going to refer to "hey codevolution"
```
test.component.ts [CHILD}
```
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-test',
template:`
{{"Hello " + parentData}}
Send Event
`,
styles: []
})
export class TestComponent implements OnInit {
@Input('parentData') public name;
@Output public childEvent = new EventEmitter();
constructor(){ }
ngOnInit(){ }
}
fireEvent(){
this.childEvent.emit('Hey Codevolution');
}
}
```
app.component.ts
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: '-/app.component.html',
styleUrls: ['./app.component.css]
})
export class AppComponent {
title = 'app';
public name = "Vishwas";
pulic message ="";
}
```
*On the latest Angular 6 version, in order to work, you will have to comment out the default import { EventEmitter } from 'events' and include EventEmitter from '@angular/core'
1.子コンポーネントに @Output プロパティを定義
2.親コンポーネントでイベントを受け取る
**Pipes**
test.component.ts
```
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-test',
template:`
{{ name }}
{{ name | lowercase }}
// codevolution
{{ name | uppercase }}
// CODEVOLUTION
{{ message | titlecase }}
// Welcome To Codevolution
{{ name | slice:3 }}
// evolution (from index 3)
{{ name | slice:3:5}}
// ev (index from 3 and 4, 5 is excluded)
{{ person | json }}
// {"firstName":"John", "lastName":"Doe"}
{{5.678 | number:'1.2-3'}}
// 5.678
{{5.678 | number:'3.4-5'}}
// 005.6780
{{5.678 | number:'3.1-2'}}
// 005.68
{{ 0.25 | percent }}
// 25%
{{ 0.25 | currency }}
// $0.25
{{ 0.25 | currency: 'GBP' }}
// £0.25
//ISO currency code: https://www.iso.org/iso-4217-currency-codes.html
{{ 0.25 | currency: 'GBP': 'code'}}
// GBP0.25
{{ date }}
// Sun Dec 03 2017 21:48:52 GMT+0530 (India Standard Time)
{{ date | date:'short' }}
//12/3/17, 9:49PM
{{ date | date:'shortDate' }}
//12/3/17
{{ date | date:'shortTime' }}
//9:50PM
`,
styles: []
})
export class TestComponent implements OnInit {
public name = "Codevolution";
public message = "Welcome to codevolution";
public person = {
"firstName": "John",
"lastName": "Doe"
}
public date = new Date();
constructor(){ }
ngOnInit(){ }
}
}
```
**service**
https://www.youtube.com/watch?v=y8lwG8IM82k
Do Not Repeat Yourself (DRY)
Single Responsibility Principle
=> Service : -.service.ts
A class with a specific purpose
1. Share data
2. Implement application logic
3. External Interaction
Dependency Injection
1. Code without DI -drawbacks
2. DI as a design pattern
3. DI as a framework
https://www.youtube.com/watch?v=OFPIGlxunL0
app.component.ts
```
import { Component } from '@angular/core';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls:['./app.component.css']
})
export class AppComponent {
title='Codevolution0;
}
```
employee-list.component.ts
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'employee-list',
template: `
Employee List
- {{ employee.name }}
`,
styles:[]
})
export class EmployeeListComponent implements OnInit {
public employees = [
{"id":1, "name": "Andrew", "age": 30},
{"id":2, "name": "Brandon", "age":25},
{"id":3, "name": "Christina", "age":26},
{"id":4, "name": "Elena", "age":28}
];
```
employee-detail.component.ts
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'employee-detail',
template: `
Employee Detail
- {{employee.id}}. {{ employee.name }} - {{employee.age}}
`,
styles:[]
})
export class EmployeeListComponent implements OnInit {
constructor(){}
ngOnInit(){}
```
Code without DI
```
class Engine{
constructor(){}
}
class Tires{
constructor(){}
}
```
```
class Car{
engine;
tires;
constructor(){
this.engine = new Engine();
//class Engineのconstructor(parameter):petrol or diesel, にすると、new Engineがエラーになる
this.tires = new Tires();
}
```
DI as a design pattern
DI is a coding pattern in which a class receives its dependencies from external sources rather than creating them itself.
without DI
```
class Car{
engine;
tires;
constructor()
{
this.engine = new Engine();
this.tires = new Tires ();
}
}
```
With DI
```
class Car{
engine;
tires;
constructor(engine, tires)
{
this.engine = engine;
this.tires = tires;
}
```
}
```
```
var myEngine = new Engine();
var myTires = new Tires ();|
var myCar = new Car(myEngine, myTires);
```
```
var myEngine = new Engine(parameter);
var myTires = new Tires ();|
var myCar = new Car(myEngine, myTires);
```
```
var myEngine = new Engine(parameter);
var myTires = new Tires(parameter);
var myCar = new Car(myEngine, myTires);|
```
We can mock the data to suit our testing needs
```
var oldEngine = new Engine(oldparameter);
var oldTires = new Tires(oldparameter);
var oldCar = new Car(oldEngine, old|Tires);
//test with oldCar
```
```
var newEngine = new Engine(newparameter);
var newTires = new Tires(newparameter);
var newCar = new Car(newEngine, new|tires);
//test with newCar
```
when the number of dependencies grows, it becomes really difficult to manage the code.
```
var myEngine = new Engine();
var myTires = new Tires();
var depA = new dependency ();
var depB = new dependency ();
var depZ = new dependency ();
var myCar = new Car (myEngine, myTires, depA, depB. debZ);|
```
```
var myEngine = new Engine();
var myTires = new Tires();
var depA = new dependency();
var depB = new dependency();|
var depAB = new dependency();
var depZ = new dependency (depAB);
var myCar = new Car(myEngine, myTires, depA, depB, depZ);
```
DI as a framework
Injector
Engine ServiceA
Tires ServiceB
DepA ServiceC
DepB ..
... ...
... ...
DepZ ServiceZ
DI as a framework contd
1. Define the EmployeeService class
2. Register with Injector
3. Declare as dependency in EmpList and EmpDetail
EmployeeService injector
↓ ↓
EmpList EmpDetail
**Using a Service**
https://www.youtube.com/watch?v=69VeYoKzL6I
```
ng g s employee
```
employee.service.ts
```
import { Injectable } from '@angular/core';
@Injectable()
export class EmployeeService{
constructor() {}
getEmployees(){
return [
{"id":1, "name": "Andrew", "age": 30},
{"id":2, "name": "Brandon", "age":25},
{"id":3, "name": "Christina", "age":26},
{"id":4, "name": "Elena", "age":28}
];
}
}
```
employee-list.component.ts
```
export class EmployeeListComponent implements OnInit {
public employees = [
{"id":1, "name": "Andrew", "age": 30},
{"id":2, "name": "Brandon", "age":25},
{"id":3, "name": "Christina", "age":26},
{"id":4, "name": "Elena", "age":28}
];
constructor() {}
ngOnInit(){
}
}
```
employee-detail.component.ts
```
export class EmployeeDetailComponent implements OnInit {
public employees = [
{"id":1, "name": "Andrew", "age": 30},
{"id":2, "name": "Brandon", "age":25},
{"id":3, "name": "Christina", "age":26},
{"id":4, "name": "Elena", "age":28}
];
constructor(){}
ngOnInit(){
}
}
```
AppModule (Register)
↓
AppComponent
↓ ↓
EmpList EmpDetail
↓
Child
↓
Child
app.module.ts
```
import { EmployeeService } from './employee.service';
@NgModule({
.....
imports: [
BrowserModule
],
providers: [ EmployeeService],
bootstrap: ....
employee-list.component.ts
```
import {EmployeeService}
export class EmployeeListComponent implements OnInit {
public employees = [ ];
constructor(private_employeeService: EmployeeService) {}
ngOnInit(){
this.employees = this._employeeService.getEmployees();
}
}
```
employee-detail.component.ts
```
export class EmployeeDetailComponent implements OnInit {
public employees = [ ];
constructor(private _employeeService: EmployeeService){}
ngOnInit(){
this.employees = this.employeeService.getEmployees();
}
}
```
HTTP and Observables
https://www.youtube.com/watch?v=vj0kUzKOgGQ
Observables
A sequence of items that arrive asychronously over time.
HTTP call - single item
Single item - HTTP response
HTTP, Observables and RxJS
1. HTTP Get request from EmpService
2. Receive the observable and cast it into and employee array
3. Subscribe to the observable from EmpList and EmpDetail
4. Assign the employee array to a local variable
RxJS
- Reactive Extensions for Javascript
- External library to work with Observables
**Fetch Data Using HTTP**
https://www.youtube.com/watch?v=LmIsbzt-S_E
app.module.ts
```
import { HttpClientModule } from '@angular/common/http';
...
@NgModule({
...
imports: [
BrowserModule,
HttpClientModule
]
```
employee.service.ts
```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class EmployeeService{
constructor(private http: HttpClient) {}
getEmployees(){
return [
{"id":1, "name": "Andrew", "age": 30},
{"id":2, "name": "Brandon", "age":25},
{"id":3, "name": "Christina", "age":26},
{"id":4, "name": "Elena", "age":28}
];
}
}
```
Bootstrap
```
npm install bootstrap --save
npm i jquery popper.js --save
```
2.angular.json --> architect
```
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
```
https://www.youtube.com/watch?v=soInCF7nbDw&t=11209s
https://codechord.com/2012/01/readme-markdown/
https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
https://code.visualstudio.com/docs/nodejs/angular-tutorial