Glimpse of Single Page App using ASP.NET MVC 5 and Angular

Hi Friends,

It’s been long since i blogged any thing but it’s ok as i was working on one of the assignments which i shared few days back where in i’ll be wiring up bunch of technologies to make a robust SPA. Here, is the glimpse of the app what i have been working on.

Looks like my git shell has been corrupted, hence not able to push images in git. not a problem, will fix the same some time later, but for now let me upload images here itself.

However, below is the solution structure for the same. However, this is still incomplete as i have not yet added the testing project. But that’s ok, will be adding shortly and publishing the same shortly…Now, below is the glimpse of variety of technologies used so far to make this app…

Technologies Used

Client Side Technologies

Server Side Technologies

so, the one showed below is the web project rather web api project talking to and fro with my other projects listed here. Here, the crucial things are api controllers and my client side scripts “Angular” here for delivering the same back to UI. Other projects are equally important where in one is having models project which is keeping my plain classes then contracts project which is the medium for Unit of Work Pattern and Repository Pattern. Then the last one is Data project where Entity Framework is playing it’s role. Here, I have also used design principles like Single Repository principle to keep the things simple and clean and Factory Pattern to create the required instance in case if that is not created earlier by the app. Like this there are variety of out of the box things i used in this app which you will experience once you start building this app right from the blank state.

1st

2nd

3rd

4th

5th

6th

7th

8th

9th

10th

11th

Below, is the glimpse of all api controller sets and the same in action as well.




12th

13th

14th

Now, at the end my two driving factors of my app; my two Angular files.

Here, i also used qunit.js to test my api controller. Below is the glimpse of api test resources and their test results.

15th

16th

17th

and below is the snippet used for the same.


Beta Version Download Link:- https://github.com/rahulsahay19/MovieReview-Angular/tree/Movie-Review-Angular

I hope you liked the glimpse, stay tuned for complete step by step tutorial. Till then stay tuned and Happy Coding.

Thanks,
Rahul

6,000 total views, 2 views today

Book Cover Released Today

Hi Friends,

Book cover officially released today. By Next weekend, it will be available on all the leading stores like Amazon and Flipkart. However, you can book your copy from my store http://myview.rahulnivi.net/store/ or from my facebook page https://www.facebook.com/BlogsByRahulSahay/app_251458316228 at a discounted price. Book will be available in all the available formats. I’ll shortly share the message on the same. You can also get free copies of my book in eBook format. But, for that you need to participate on my ebook Contest https://www.facebook.com/events/495570303912887/. Top 25 winners will get the free copies. Till then, stay tuned and Happy coding.

664 total views, no views today

Hands On with ASP.NET MVC – eBook Contest

790 total views, 2 views today

HTML5 layout elements and their descriptions

Hi Friends,

I Have posted few of the important HTML 5 components. These are the few elements which we have been using on daily basis in our day to day development. These are the few settings which i am using during my MVC development.  so, i thought to share few of the setting name and it’s illustration.

Element Description
<article> Marks a section of the page that holds independent content
<aside> Holds content that is related in some fashion to the surrounding content
<figcaption> A tag used inside the <figure> tag that contains the caption for the figure
<figure> Defines an illustrative figure
<footer> Defines a footer for an HTML document or section
<header> Defines a header for an HTML document or section
<nav> Defines the section of the page, generally the set of links, that are used to navigate within the application
<section> Contains a group of content that is related; much like a chapter of a book

so, for the time being that’s it. so, in the next post we’ll discuss something new. Till then, stay tuned and Happy coding.

Thanks,
Rahul
Happy Coding

789 total views, no views today