Working with Angular 4 and .Net the right way - WebApi

As already stated, Angular is Framework for Singe Page Applications. so its NOT for Websites that wants a good enhancement for their pages. but.... we love Angular so we do want to learn how to do that, but lets start at the beginings

1st lets just create a simple SPA app with WebApi(v2), and see how the thing works.

as stated, this tutorial is not to learn how to code, so i'm using the Basic MSDocs example for webApi as is, just copy paste and make sure its working, and DO try to understand. in the end its just a RestfulAPI.

*MAKE SURE you allow CORS for the webApi since we're doing all this at localhost, so add to the web.config (msdn)



so we now have these 2 rest urls (you might have a different localhost port like localhost:493820
http://localhost:57267/api/products
http://localhost:57267/api/products/1 => [id]

great, now we will create an SPA app with 2 tabs, 1 for all and 1 for search.

if you never coded in Angular 4, see this coursetro nice tutorial

start by creating a new app, like we learned here. or if you got it from angular cli home site.
i'll call mine MSProductApp. so CLI command is
ng new MSProductApp

now i'll open it with Visual Studio Code [open folder], just since it has more colors differences for JS, for .Net apps i use VS 2017.

i'll start by adding 2 components and 1 service
ng generate component AllProducts
ng generate component FindProductById
ng generate service ProductsRestApi

my results

notice that the generator changed upper-cases to dash-lower-case. this is because in HTML elements may be lower-case only, so these are fixed automatically made in Angular, and i did it on purpose for you to learn. also notice the selectors:


anyway, lets start by making a semi-tabs functionality, and this is for tut-purpose only, you should use thing like Angular Material tabs components or something for real apps.

*NOTICE, i am using picture since i DONT teach to code here, use and read the tutorials i mention, but if you're in it already, here is a .git in the end with all my code.
Bresleveloper's Angular4WebApiTutorial git

so coding the app-root and the styles.css with simple *ngIf to set tabs, sry for being so robust, i just want to get to the point quick


for just understanding how to code services see the services chapter is coursetro, and i definitely recommend codecraft.tv to understand angular 4 http, what i did, promise is the next one, and of course angular docs.

p.s., the right way is with types and modules ect. but i just want to quickly get to the point.

the right way in angular when using a service to load static data is to let the service load everything and let the component just use the data strait from the service, so planning the AllProducts component to just use our service will look like that (html, css, ts [type script, instead of js]), the files here are
all-products.component.html
all-products.component.css
all-products.component.ts


*Notice the double dot "'../product..." for our service, as it is 1 directory up, unlike with the app.module.ts which has only 1 since its in the same directory.
now, in order for the app to know our service we must import it in our app.module.ts



so now for the hard part, configuring a service to consume REST.

why do i call it the hard part? since it takes a few steps just to get the Http provider running.
1st is to import HttpModule AND Http, Respone... in app.module.ts file, and aslo add the HttpModule  in the NgModule imports section


then you again need to import Http and friends in your component .ts plus rxjs for using promises


anyway, this is the result, a simple call the our rest as the service starts working,


and if you build all this with me, you should see


now to our search page, find-product-by-id.component.[html, css, ts], just don't forget to import the service


and the function in the service


and the result


there you go!
we've created an Angular 4 SPA that consumes a simple .Net WebApi.

again the git Bresleveloper's Angular4WebApiTutorial git

next we'll see how to take this app out into a simple .Net WebForms project or MVC.
 Taking Angular 4 as Stand Alone with Asp.Net Web Forms and MCV

for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"


Comments

Post a Comment

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

game portal: http://overthewire.org/wargames/natas/ PASSWORDS for each level are stored in /etc/natas_webpass/natasX I made this walkthrough for people like me, i needed some help, but didnt want the spoiler, so here i will give you all the information needed to pass each level, yet not the solution. For levels needed custom web request i made a different post for powershell and javascript  with how-to's, since is a piece of learning for itself, and also for those of us that play at work and have only powershell at their hands. Although its not a complete spoiler there, its quite most of the solution so try yourself 1st. Natas The Natas game is from basic to advances web hacking. Every few levels is about whole new exploitation (with some harder ones doing comeback later), so a lot of learning. If you're new, you're the reason i am writing so much even for the 1st level, just please google EVERY topic you see, since in the following levels i assume you know the
Read more

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

if you got an error like this The item could not be indexed successfully because the item failed in the indexing subsystem. ( The item could not be indexed successfully because the item failed in the indexing subsystem.; Failed to recover content group; Aborting insert of item in Link Database because it was not inserted to the Search Index.; ; SearchID = 04081656-B51B-4DCD-96D4-6DB2D2CEEEE7 ) as well as these: The item could not be indexed successfully because the item failed in the indexing subsystem. ( The item could not be indexed successfully because the item failed in the indexing subsystem.; Caught exception when preparing generation GID[7]: (Previous generation (last=GID[6], curr=GID[7]) is still active. Cannot open GID[7]); Aborting insert of item in Link Database because it was not inserted to the Search Index.; ; SearchID = 92EB0180-C086-4853-BED8-F4878D9748AD ) the solution for me was to clear configuration cache (PS)  and then restart SP Search Services. THX to m
Read more

Asp.Net Ending Response options, Response.End() vs CompleteRequest()

this blog is for any1 who get the ThreadAbortException when caling Response.End(), and then tried the other options such as HttpContext.Current.ApplicationInstance.CompleteRequest() and found out that there was no replacement. i'll start with the bottom line: if you want to stop right now your response and send it as is you dont have any other option other than Response.End(), period and it's the right thing to throw that EX in that case. the answer is its because there is the "HTTP pipeline" and the "Asp.Net pipeline", and CompleteRequest() cuts the HTTP pipeline but not the Asp.Net one so everything that is from handlers forwars (including all page events) continues but your part, the asp one, stays in your hands so that no information will be lost, so ur suppose to manage your code currectly, since information lost is really a bad thing, although in most cases we use Response.End() we know what we are losing and we want it. see this short article ab
Read more