Why we need to inject service through constructor in angular2? - javascript

I'm learning Angular 2. And got confused over constructor.
Consider the below code :
import { Component, OnInit } from '#angular/core';
import { FormGroup,FormsModule,FormControl } from '#angular/forms';
import { WeatherService } from '../weather.service';
import { WeatherItem } from '../weather-item';
#Component({
selector: 'app-weather-search',
templateUrl: './weather-search.component.html',
styleUrls: ['../../assets/app.css'],
//providers: [WeatherService]
})
export class WeatherSearchComponent implements OnInit {
constructor(private _weatherService : WeatherService) { }
onSubmit(form : FormGroup){
//alert(form.value.location);
this._weatherService.searchWeatherData(form.value.location)
.subscribe(
data => {
const weatherItem = new WeatherItem(data.data.request["0"].query,data.data.weather["0"].maxtempC,data.data.weather["0"].maxtempC);
this._weatherService.addWeatherItems(weatherItem);
console.log(form);
})
}
ngOnInit() {
}
}
Here we are injecting 'WeatherService' in constructor. Can't we do the same outside constructor ? What constructor is doing here actually? Do we really need it here?

The constructor itself is not doing actual work.
Angular creates a new WeatherSearchComponent executing
new WeatherSearchComponent(weatherService);
and this causes the constructor in WeatherSearchComponent to receive the weatherService value.
The constructor
constructor(private _weatherService : WeatherService)
causes an instance field _weatherService to be created and initialized with the value passed from DI.
The constructor is the only place where it is easy to know when the injected service is available and when not.
If the service would passed to a field, setter or method, code in the constructor could not access it because the constructor is executed before outside code has a change to set a field or call a method.
Also for code outside the constructor it is not safe to assume the service is available because this code could be called from the constructor before a field could be set from the outside.
For dependency injection passing dependencies to the constructor is the only way to avoid a lot of complexity.

Dependency Injection in constructor is always better option and while the component is getting created it will get the weatherService as a parameter. To make it clear, below is the transpiled code for your snippet.
var WeatherSearchComponent = (function () {
function WeatherSearchComponent(_weatherService) {
this._weatherService = _weatherService;
}
WeatherSearchComponent.prototype.onSubmit = function (form) {
var _this = this;
//alert(form.value.location);
this._weatherService.searchWeatherData(form.value.location)
.subscribe(function (data) {
var weatherItem = new weather_item_1.WeatherItem(data.data.request["0"].query, data.data.weather["0"].maxtempC, data.data.weather["0"].maxtempC);
_this._weatherService.addWeatherItems(weatherItem);
console.log(form);
});
};
WeatherSearchComponent.prototype.ngOnInit = function () {
};
WeatherSearchComponent = __decorate([
core_1.Component({
selector: 'app-weather-search',
templateUrl: './weather-search.component.html',
styleUrls: ['../../assets/app.css'],
})
], WeatherSearchComponent);
return WeatherSearchComponent;
}());
exports.WeatherSearchComponent = WeatherSearchComponent;
As you can see in turn the javascript code has weatherService Instance being passed on to the function weatherSearchComponent.

Related

Getting JavaScript result in Angular

I'm using a third party JS I'm calling from Angular:
import { Component } from '#angular/core';
declare var SomeApi: any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
firstName: string;
onStartTest() {
SomeApi.runTest();
function onTestCompleted(testResult) {
//Can get testResult.FirstName
this.firstName = testResult.FirstName;
}
}
}
I can successfully run the SomeApi.runTest() in Angular and when it finished I can get the testResult and its properties like FirstName and display to HTML. But the problem is I can't pass this to the local Angular variable which is firstName: string in this case. The component I think finishes up as the .runTest() runs in async.
I also tried running a service inside the function so that I can pass the data to a service after onTestCompleted():
constructor(private dataService: DataService) {}
function onTestCompleted(testResult) {
//Can get testResult.FirstName
this.firstName = testResult.FirstName;
this.dataService.writeResult(testResult.FirstName);
}
But the problem is that an error comes out saying that .writeResult() is not known. I think it's because the life of the Component has ended?
I just want to ask for help on how I would get the testResult object and its properties outside function()?
I think third party API that compatible with Angular 2 support observable,
try using subscribe instead of waiting the test to finish and then passing the result value to a function, like this:
SomeApi.runTest().subscribe(testResult => {
this.firstName = testResult.FirstName;
...
});
or you can use promise as well, like this:
var dataPromise = SomeApi.runTest();
dataPromise.then(function(result) {
// this is only run after runTest() resolves
this.firstName = testResult.FirstName;
...
});

How to transform an AngularJS 1 service into an Angular 2 service?

I am trying to reuse some working code from AngularJS 1 services written in plain JavaScript in an Angular 2 environment.
The services look, for instance, like the following example:
(function () {
angular.module('myapp.mysubmodule').factory('myappMysubmoduleNormalService', ['someOtherService',
function (someOtherService) {
var internalState = {
someNumber: 0
};
var service = {};
service.someFunction = function () {
internalState.someNumber++;
};
someOtherService.getValues().forEach(function (v) {
service[v] = function () {
console.log(v + internalState.someNumber);
};
});
return service;
}]);
})();
I have found various examples of how to convert AngularJS 1 services to Angular 2 services (such as this one), all of which have in common that instead of the service factory, I have to export a class.
This should look roughly as follows:
import { Injectable } from '#angular/core';
#Injectable()
export class myappMysubmoduleNormalService {
someFunction: function () {
// ?
}
}
Now, the question is how to incorporate the internal state and the dynamically added properties.
Is it really the way to go to do all that in the constructor, i.e. fill each instance of the class upon initialization, like so:
import { Injectable } from '#angular/core';
#Injectable()
export class myappMysubmoduleNormalService {
constructor() {
var internalState = {
someNumber: 0
};
var service = {};
this.someFunction = function () {
internalState.someNumber++;
};
this.getValues().forEach(function (v) {
service[v] = function () {
console.log(v + internalState.someNumber);
};
});
}
}
Or is there any other way? The above probably works (save for the missing dependency injection, that I still have to find out about how to do in Angular 2). However, i am wondering whether it is a good way because I have not come across any samples that did much of a member initialization in their constructor.
You can use just the same approach in Angular with factory providers:
export function someServiceFactory(someOtherService) {
var internalState = {
someNumber: 0
};
var service = {};
service.someFunction = function () {
internalState.someNumber++;
};
someOtherService.getValues().forEach(function (v) {
service[v] = function () {
console.log(v + internalState.someNumber);
};
});
return service;
};
#NgModule({
providers: [
{
token: 'myappMysubmoduleNormalService',
useFactory: someServiceFactory,
deps: ['someOtherService']
}
]
})
Both in Angular and AngularJS the value returned by the factory function is cached.
A service is just a class that you can inject into components. It will create a singleton in the scope where it is named a provider.
import { Injectable. OnInit } from '#angular/core';
#Injectable()
export class myappMysubmoduleNormalService implements OnInit {
internalState: number;
constructor() {}
ngOnInit(){
this.internalState = 0;
}
incrementSomeNumber() {
this.internalState++;
console.log(this.internalState};
}
}
I realize this is not logging a distinct internal state for multiple functions but you get the idea.
Register this as a provider in the app.module (if you want a singleton for app scope)
When you import into a component and then inject in the constructor
constructor(private _myservice : myappMysubmoduleNormalService) {}
you can now use the _myservice methods
myNumber : number = 0 ;
componentFunction() {
_myservice.incrementSomeNumber();
this.myNumber = _myservice.internalState;
}
Of course you could have the service method return the incremented number (or data or a promise of data)
This is rough but gives you the idea. Very little code belongs in the constructor. A service should be injected. what is shown in component constructor is shorthand to a get private variable referencing the service. The service will be a singleton for the scope in which it is provided. (can be overridden within the scope but that seems a code smell to me)
To pass back a value :
In service
incrementSomeNumber(): number {
this._internalState++;
console.log(this._internalState};
return this._internalState;
}
In component:
mynumber: number;
componentFunction() {
this.mynumber = _myservice.incrementSomeNumber();
}
Not sure what you're trying to accomplish but just wanted to show example of getting information from services. Most common use of services for me is a dataservice, so the code would be a little more complex as it is asynch.

Class lacks methods after passed in Observable chain

I encounter a strange problem with my custom class in angular2 after passing it through an Observable chain.
I always receive the error:
EXCEPTION: f.mapToParams is not a function
ORIGINAL STACKTRACE:
TypeError: f.mapToParams is not a function
at SafeSubscriber._next (filter.component.ts)
...
Uncaught TypeError: f.mapToParams is not a function
at Safesubscriber._next (filter.component.ts)
Here is my coding:
filter.ts:
import { Params } from '#angular/router';
export class Filter {
public text:String = '';
public mapToParams():Params {
let params:Params = {};
// Do some mapping here...
return params;
}
}
filter.component.ts
import { Component, OnInit Output, EventEmitter } from '#angular/core';
import { Router, Params } from '#angular/router';
import { Filter } from './filter';
import { Observable, Subject } from 'rxjs/Rx';
export class FilterComponent implements OnInit {
private _filter:Filter;
private _filterStream = new Subject<Filter>();
ngOnInit() {
this._filter = new Filter();
this._filterStream
.debounceTime(300)
.switchMap((f:Filter) => Observable.of(f))
.subscribe((f:Filter) => {
let params:Params = {};
console.log(f.text); // <-- No problem here
// params = this._map(f); // <-- This would work
params = f.mapToParams(); // <-- Here occurs the error
});
}
private _map(f:Filter):Params {
// Do some mapping here
}
public onInputChanged(searchText:String):void {
this._mergeFilter( {
map(f:Filter) {
f.text = searchText;
}
})
}
private _mergeFilter(callback:FilterMergeCallback):void {
let f:Filter = JSON.parse(JSON.stringify(this._filter));
callback.map(f);
this._filterStream.next(f);
}
}
I have tried to comment out the debounceTime and switchMap statement but with no success.
At a different point in my coding the filter.mapToParams method can be called without any problems. It seems to me like the Observable chain strips all methods from my object.
Here is my angular config:
#angular/cli: 1.0.0.-beta.32.3
#angular/common: ^2.4.0
#angular/compiler ^2.4.0
#angular/core ^2.4.0
rxjs: ^5.1.0
Can anyone help me on this?
I think I got it:
I copied the current _filter Object to a new filter variable by
JSON.parse(JSON.stringify())
By this, all methods get stripped from the new object.
Means, I have to find a new method to clone the object...
Thanks all for you replies!

How to wait until a variable is defined without using $scope $watch in angular?

Below is my code so far:
My Module
module App.SomeModule {
import ILabelSettingsViewModel = App.GeneralSettings.data.ILabelSettingsViewModel;
import IGeneralSettingsService = App.GeneralSettingsService.IGeneralSettingsService;
export enum LabelPageFormat {
A4,
Thermal
}
export interface IConsignmentDataService {
getAccountLabelFormat(): LabelPageFormat;
}
export class MyDataService implements IMyDataService {
accountLabelFormat: LabelPageFormat;
static $inject: string[] = ["generalSettingsService"];
constructor(private generalSettingsService: IGeneralSettingsService) {
this.determineAccountLabelFormat();
}
getAccountLabelFormat(): LabelPageFormat {
return this.accountLabelFormat;
}
private determineAccountLabelFormat() {
var that = this;
this.generalSettingsService.getLabelSettings().then((data: ILabelSettingsViewModel) => {
switch (data.name) {
case LabelPageFormat[LabelPageFormat.Thermal]:
that.accountLabelFormat = LabelPageFormat.Thermal;
break;
default:
that.accountLabelFormat = LabelPageFormat.A4;
break;
}
}, () => {
that.accountLabelFormat = LabelPageFormat.A4;
});
}
}
angular.module("app.common").service("myDataService", MyDataService);
}
and my controller
module App.Consignment.List {
"use strict";
import IConsignmentDataService = Consignment.IConsignmentDataService;
import ConsignmentListGridScope = Consignment.IConsignmentListGridScope;
class ConsignmentListController implements IConsignmentBulkActionProvider {
accountLabelFormat: LabelPageFormat;
static $inject = ["$scope", "myDataService"];
constructor(private $scope: ConsignmentListGridScope, private myDataService: IMyDataService) {
this.accountLabelFormat = this.consignmentDataService.getAccountLabelFormat();
}
}
angular.module("app.consignment").controller("consignmentListController", ConsignmentListController);
}
what I am trying to do is, get the accountLabelFormat from my data service and then use it to somewhere else. In data service, a method is used to get the format from database which is returned as a promise and then if success, I am setting the variable that will be returned when I call the getAccountLabelFormat() method from my controller. Now my problem is, as the service method is async, by the time I call the getAccountLabelFormat() method, the variable in accountLabelFormat service was not yet set, so that every time I got an undefined value in my controller. Any ideas about how can I solve this? Thanks in advance.
use $q.when. check out https://docs.angularjs.org/api/ng/service/$q
For example:
$q.when(this.accountLabelFormat)
so when you ask for that value it will return a promise then just chain it a then statement

How can I call a class method inside a promise in Angular 2?

If I have an Angular 2 component and I get data from a service that returns an async promise or observable how can I then call a method in the component to display that data?
#Component({
moduleId: module.id,
selector: 'charts',
templateUrl: 'charts.component.html',
providers: [DataService]
})
export class ChartsComponent implements OnInit {
constructor(private dataService:DataService)
ngOnInit() {
this.getData();
}
getData(){
this.dataService.getData().then(function (data) {
this.drawChart(data);
});
}
drawChart(){
//implement drawing chart
}
}
The problem is that inside a promise "this" in "this.drawChart()" no longer refers to the ChartsComponent class. How can I call a class method post promise?
Also, I cant put drawChart() inside the promise because it needs to use other class properties.
When you use Arrow functions, the this is kept:
getData(){
this.dataService.getData().then((data) => { // <-- changed here
this.drawChart(data);
});
}
There are 2 solutions:
1) using "self":
var self = this;
ngOnInit() {
self.getData();
}
getData(){
self.dataService.getData().then(function (data) {
self.drawChart(data);
});
}
2) using "bind method" (or something like that):
.then(function (data) {
this.drawChart(data);
}).bind(this)
you can find so much information about this method, for example: Use of the JavaScript 'bind' method
I prefer first solution, because it helps make code more transparent.

Categories