Skip to main content

Angular2 working with http

Things get more interesting when working with Http in Angular 2.

You will need to include angularjs2 http script.



Lets create a simple component that grab data from a rest service and renders on your component. Lets start with a component :-



If you look at "ngOnInit", this is a directive that automatically gets call when your component loads or alternatively you can use ES6 "constructor". But there are not the same. ngOnInit allows child components to setup their events or initiate a get request.

Our http request are called via getStock() and it uses reactive js to help to turn raw data into json.

this.http.get("http://jsonplaceholder.typicode.com/posts/1").map((res: Response) =>



res.json()).subscribe(

data => {
this.info = new Article(data.id, data.title, data.title);
},
err => console.log(err),
() => console.log('done!'));
};

As you can see, we use http.get() and then calls map to convert data into JSON format. Next we pass this to subscribe and data gets loaded in our markup / front end. All in a single statement. Cool.

Catches here :-

you need to import rxjs/Rx, otherwise you will not be able to call map method.

If you look at your mark up you see that we have a question mark beside our object attribute

you need to inject HTTP_PROVIDERS in our main.ts file as show below :-



If you missed that you, you will get "no http provider found " and lots of red colored text.

Comments

Popular posts from this blog

Android Programmatically apply style to your view

Applying style to your view (button in this case) dynamically is pretty easy. All you have to do is place the following in your layout folder (res/layout)
Let's call this file : buttonstyle.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#449def" /> <stroke android:width="1dp" android:color="#2f6699" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#449def" a…

OpenCover code coverage for .Net Core

I know there are many post out there getting code coverage for .dotnetcore. I'm using opencover to address this needs.

In case, you do no want to use opencover and wanted to stick with vs2015 code coverage, you can try to copy Microsoft.VisualStudio.CodeCoverage.Shim.dll from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Team Tools\Dynamic Code Coverage Tools\coreclr\ and drop it into your project "bin\Debug\netcoreapp1.0" folder.  Please note : you need to be on VS2015 Enterprise to do this. 

To get started, I guess we need to add OpenCover and ReportGenerator for our test projects, as shown in diagram below :-



When nuget packge gets restored, we will have some binaries downloaded to our machine and we going to use this to generate some statistics. I think the biggest issue is to getting those command lines work.

In dotnetcore, we run test project using "dotnet test" (assuming you are in the test project folder - if not please go there)  So we add this …

DataTable does not have AsEnumerable

I have problem locating my AsEnumerable extension method in my DataTabe (System.Data). Thank god for this post by Angel
(http://blogs.msdn.com/angelsb/archive/2007/02/23/does-not-contain-a-definition-for.aspx)

I was able to find this method once i have added reference to the following assembly.

C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll

Try to do a dummy Build and you should be able to get it.