Page History

...

Hvis du ønsker at bruge Angular som udviklingsværktøj. SDK'et sørger for at håndtere Angulars change detection zone.

Da nap-angular-sdk er en angular specifik wrapper af nap-typescript-sdk, har den en "peer dependency" hertil. 

Funktionalitet

SDK'et udstiller en service, som sørger for at kalde createNAP() fra nap-typescript-sdket og dermed initialisere kontekstbroen.

Efterfølgende subscribes der på de forskellige messagestreams, og deres emits bliver håndteret i forhold til Angulars change detection zone.

Udfra dette generer den nye observables generes nye observables

NapAngularService {
	// attributter
	incomming$: Observable<NAPmessage>
	errors$: Observable<NAPError>
	outgoing$: Subject<NapMessage>
	sendMessage(message: NAPMessage):void
 	subscribeToMessages(callback: (message: NAPMessage) => void): void
}

	

Effekten for anvenderen bliver, at broen initialiseres som en singleton og at Angular opfanger beskeder sendt over broen og opdaterer UI på baggrund af disse værdier.

Eksempel på implementing af nap-angular-sdk

...

Da nap-react-sdk er en react specifik wrapper af nap-typescript-sdk, har den en "peer dependency" hertil. 

Funktionalitet

SDK'et sørger for at kalde createNAP() fra nap-typescript-sdket og dermed initialisere kontekstbroen.

...

Dette pakkes ind en NAP-Context, som injectes til alle child elementer heraf. 

interface Context {
  latestIncomming: NAPMessage | null;
  latestError: NAPError | null;
  postMessage: (message: NAPMessage) => void;
  subscribe: (subscriber: NAPHostSubscriber) => void;
  unsubscribe: (subscriber: NAPHostSubscriber) => void;
}

Effekten for anvenderen bliver, at broen initialiseres som en singleton, og at beskeder sendt over broen opdatere context state af applikationen, og på den baggrund vil React kalder Render().

Eksempel på implementing af nap-react-sdk

...