Angular için vs code eklentileri

Visual Studio Keymap
Angular Language Service
npm Intellisense
ngrx for Angular 2 Snippets
TypeScript Toolbox
npm
TsTools
Angular Snippets (Version 9)
Types auto installer
Debugger for Chrome
TypeScript Importer
TypeScript Hero
vscode-icons
Add Angular Files

Angular + .Net Core Uygulamayı IIS üzerinde aynı site üzerinde yayınlama

IIS üzerinde

angular-site.com site açılır. Add Aplication'dan aynı dizin içine "Api" klasörü seçilir. Buraya .Net Core Uygulama atılır. Daha sonra Angular uygulamada terminale

ng build --prod

yazılıp build alınır. dist klasörüne çıkan angular-site klasörü içindeki dosyalar IIS üzerindeki  angular-site.com sitesinin ana dizinine kopyalanır. Angular uygulamanın web.config aşağıdaki gibi olmalıdır. (iis rewrite eklentisini kurmak gerekiyor).

 <?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Angular Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_URI}" pattern="api/" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="./index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

 

Dikkat edilmesi gereken satır 

<add input="{REQUEST_URI}" pattern="api/" negate="true" />

 yani diyoruz ki http isteklerinde api/ ile başlayanları angulara yönlendirme bu sayede api klasörü altındaki .Net Core uygulamaya gidiyor.

Peki bunu neden yaptık? normalde angular-site.com ve api.angular-site.com şeklinde 2 uygulamayı aynı iis üzerinde yayınlamak istedik. Uygulama içinde konum almak gerektiği ve angular içinde apiye istek gittiği için iki uygulamada https olması gerekiyordu. https://manage.sslforfree.com üzerinden aldığım free ssl'ler aynı anda 1 tanesi kullanılabildiği için işime yaramadı, wildcards almadığımız için uygulama patladı. Bu yüzden aynı uygulama içinde birleştirip 1 ssl ile işimizi gördük

why we use moduleId:module.id in angular2

relative assets for components, like templateUrl and styleUrls in the @Component decorator.
moduleId is used to resolve relative paths for your stylesheets and templates as it says in the documentation.
Without Module ID

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html',
  styleUrls:  ['app/components/my.component.css'] 
})

With Module ID

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', 
  styleUrls:  ['my.component.css'] 
})

ng build

ng build --prod --env=env_name --app=appname --base-href /app_name_path/ 

Copy Paste Trim and Only Numeric

import { OnInit, Directive, HostListener, EventEmitter, Output } from "@angular/core";

@Directive({

selector: "[copyPasteTrimAndOnlyNumeric]",

providers: []

})

export class CopyPasteTrimAndOnlyNumericDirective {

@Output() ngModelChange: EventEmitter<any> = new EventEmitter();

value: any;

constructor() { }

ngOnInit(): void { }

@HostListener('paste', ['$event']) onPaste(e: ClipboardEvent) {

debugger

e.preventDefault();

let pastedText = e.clipboardData.getData('text');

if (pastedText) {

pastedText = pastedText.replace(/[^0-9]+/g, '')

if (pastedText && pastedText.length > 11)

pastedText = pastedText.substring(0, 11);

this.ngModelChange.emit(pastedText);

}

}

}

Angular Component değer alma, değer yollama/yayınlama

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({

selector: 'ip-address',

templateUrl: './ip-address.component.html',

})

export class IpAddressComponent implements OnInit {

ipAddressParts: any[] = ["0", "0", "0", "0"];

tempValue;

@Input("value")

set IpAddressComponent(value: string) {

if (typeof value !== 'string' || value.indexOf('.') === -1) {

return;

}

else {

var parts = value.split(".");

for (let index in parts) {

this.ipAddressParts[index] = +parts[index];

}

}

}

get IpAddressComponent() {

return this.ipAddressParts.join(".");

}

@Output("value")

public ipAddressEmitter = new EventEmitter<string>();

constructor() { }

ngOnInit() {

}

}

Angular ngModel'in değerini directive içinde değiştirme

Çözüm bulduğum link:

@Directive({ 
  selector: '[ngModel][uppercase]',
  providers: [NgModel],
  host: {
    '(ngModelChange)' : 'onInputChange($event)'
  }
})
export class UppercaseDirective{
  constructor(private model:NgModel){}

  onInputChange(event){
    this.model.valueAccessor.writeValue(event.toUpperCase());
  }
}

Benim çözümüm

import { OnInit, Directive, HostListener, HostBinding, ElementRef } from "@angular/core";

import { NgModel } from "@angular/forms";

@Directive({

selector: "[ngModel][ipAddressMask]",

providers: [NgModel]

})

export class IpAddressMaskDirective implements OnInit {

navKeys = [39, 37, 8, 46, 65, 97] // Delete, Backspace, <- , ->, ctrl+a tuşlarını çıkarıyoruz

ipMaskChars = ["_", ".", "_", ".", "_", ".", "_"];

ipMask = "_._._._"

@HostBinding('attr.value') _value;

constructor(private elem: ElementRef, private model: NgModel) { }

@HostListener("keyup", ['$event']) hostKeyUpEvent($event: KeyboardEvent) {

let key = $event.key;

let code = +$event.keyCode;

debugger

if (!key) return;

let val = this.elem.nativeElement.value;

if (this.navKeys.indexOf(code) > -1) return;

let numReg = new RegExp("[0-9]");

let parts = val.split(".");

for (let i in parts)

parts[i] = parts[i].replace(/[^0-9\.]+/g, '');;

let outPut = parts.filter(c => Number(c));

if (!outPut) return;

let newValue = this.format(outPut);

this.elem.nativeElement.value = newValue;

this.model.viewToModelUpdate(newValue);

let SelectionPosition = this.getSelectionPosition(newValue);

this.elem.nativeElement.selectionStart = SelectionPosition;

this.elem.nativeElement.selectionEnd = SelectionPosition;

}

private getSelectionPosition(inputVal: string): number {

let position = 0;

if (inputVal) {

let parts = inputVal.split(".");

let outPut = parts.filter(c => Number(c));

if (parts && outPut) {

position += outPut.length;

for (let i = 0; i < outPut.length; i++) {

position += (outPut[i] + "").length > 3 ? 3 : (outPut[i] + "").length;

}

position--;

}

}

return position;

}

private format(outPut: string[]) {

let ipAddressChars = [];

let outPutLength = outPut && outPut.length;

debugger;

for (let i = 0; i < 4; i++) {

if (outPutLength > i) {

if ((outPut[i] + "").length > 3) {

if (i + 1 < 4) {

if (outPut[i + 1]) {

outPut[i + 1] = (outPut[i] + "").slice(3) + outPut[i + 1]

} else {

outPut[i + 1] = (outPut[i] + "").slice(3);

outPutLength = outPut.length;

}

outPut[i] = (outPut[i] + "").slice(0, 3);

} else {

outPut[i] = (outPut[i] + "").slice(0, 3);

}

}

if (+outPut[i] < 0) outPut[i] = "0";

else if (+outPut[i] > 255) outPut[i] = "255";

ipAddressChars.push(outPut[i]);

} else {

ipAddressChars.push("___");

}

}

return ipAddressChars.join(".");

}

ngOnInit(): void {

this._value = this.ipMask;

}

}

Observable dummy data döndürme

public getCustomFunc(): Observable<any> {
let dummyData = {
                       //...
};

return Observable.create(observer => { observer.next(dummyData); });
}