Building Single Page App Using ASP.NET Core with Entity Framework Core and AngularJS

Hi Friends,

In this particular post, I thought to unveil my book on latest Microsoft ASP.NET Core stack in conjunction with Angular. This is basically hand-book for all those people who like to build Single Page App, right from the scratch meeting all the industry standards.

Buy @ discounted price from BPB Site:- http://bit.ly/SPA-BPB

<br />

or Amazon India:- http://bit.ly/Rahul-SPA-IN

or Amazon International:- http://bit.ly/SPA-Rahul-Sahay

or Flipkart:- http://bit.ly/SPA-Rahul-Flip

or Infbeam:- http://bit.ly/Rahul-SPA-Infibeam

Moreover, it will be available shortly in all the leading book-stores in india as well worldwide.

Live Working Link:- http://moviereview.azurewebsites.net/#/

About the Book Video:-

First Edition 2016

LIMITS OF LIABILITY AND DISCLAIMER OF WARRANTY

The Author and Publisher of this book have tried their best to ensure that the programmes, procedures and functions described in the book are correct. However, the author and the publishers make no warranty of any kind, expressed or implied, with regard to these programmes or the documentation contained in the book. The author and publisher shall not be liable in any event of any damages, incidental or consequential, in connection with, or arising out of the furnishing, performance or use of these programmes, procedures and functions. Product name mentioned are used for identification purposes only and may be trademarks of their respective companies. All trademarks referred to in the book are acknowledged as properties of their respective owners.

Distributors:

COMPUTER BOOK CENTRE
12, Shrungar Shopping Centre,
M.G.Road, BENGALURU–560001
Ph: 25587923/25584641

MICRO BOOKS
Shanti Niketan Building,
8, Camac Street, KOLKATA-700017
Ph: 22826518/22826519

DECCAN AGENCIES
4-3-329, Bank Street,
Hyderabad-500195
Ph: 24756967/24756400

MICRO MEDIA
Shop No. 5, Mahendra Chambers,
150 DN Rd. Next to Capital Cinema,
V.T. (C.S.T.) Station, MUMBAI-400 001
Ph: 22078296/22078297
Published by Manish Jain for BPB Publications, 20, Ansari Road, Darya Ganj, New Delhi- 110002 and
Printed him at Akash Press, New Delhi.
BPB BOOK CENTRE

376 Old Lajpat Rai Market,
Delhi-110006
Ph: 23861747

INFOTECH
G-2, Sidhartha Building,
96, Nehru Place,
New Delhi -110019
Ph: 41619735, 26438245

BPB PUBLICATIONS
20, Ansari Road, Darya Ganj
New Delhi-110002
Ph: 23254990/23254991

Table of Contents
Chapter 1: Getting Started………………………. 1
Introduction
What is SPA
Technologies used to build SPA
Glimpse of Movie Review App
Glimpse of Movie Review Solution
Summary

Chapter 2: Creating Solution from the Blank Slate………………………………………….. 19
Introduction
Solution Creation
Adding Project References
Adding Packages
Important Tools
Data Technologies
Creating Models
Creating Entity Framework
Creating Entity Framework DbContext Class
Using DbContext Class
Using Migrations
Seeding the Database
Implementing Repository Pattern
Creating Unit of Work Pattern (UOW)
Summary

Chapter 3: Implementing Web API………… 53
Introduction
Creating First Web API Controller
Implementing HTTP Put Request
Implementing HTTP Post Request
Implementing HTTP Delete Request
Improvising Web APIs
Adding More Controllers
Summary

Chapter 4: Getting Started with AngularJS…..73
Introduction
Getting started with UI Design
Installing AngularJS
Creating First Angular Controller
Data-Binding using Angular
Retrieving Data from API
Summary

Chapter 5: Deeper into AngularJS………….. 93
Introduction
AngularJS Routing
Adding More Routes
Client side validation
Saving Data using Angular
Creating Angular JS Service
Moving Add Feature in Service
Creating Movie Edit Feature
Creating Movie Remove Feature
Summary

Chapter 6: Adding More Features using
AngularJS……………………………………………123
Introduction
Listing Reviews
Creating Reviews
Editing Reviews
Deleting Reviews
Introducing Authentication
Introducing Authorization
Implementing Search and Pagination
Summary

Chapter 7: Unit Testing………………………..159
Introduction
Testing Web APIs with QunitJS
Writing Angular Test
Using $httpBackend Service
Writing Controller Tests
Self-Hosting with Kestrel
Publishing on IIS
Publishing with DNU or DOTNET
Publishing on Azure
Summary

Preface
Building Single Page App using ASP.NET Core with Entity Framework Core and AngularJS is designed to build the application right from the grass root level. This Book is actually targeted to those people who are comfortable with ASP.NET MVC and Angular as this needs basic knowledge of both the technology. There has been a major shift between previous versions of ASP.NET MVC and current version of ASP.NET Core. Hence, readers are expected to have minimum working knowledge of ASP.NET Core. Throughout this book, you will be learning
how to build Single Page Application right from the scratch. I would recommend you to download the app from GitHub URL https://github.com/rahulsahay19/MovieReviewSPASkeleton to help you while building the app. You will also learn tons of client/server technologies while building the app. Apart from this, you will also get good grasp on design patterns widely used across industries these days. Whole and soul motto of this book is to familiarize you with changing trend across the industry.

Acknowledgements
Again, this book would not have been possible without the loving support of my wife Nivi, who had to take over much of the household responsibility apart from her teaching activities. Appreciation also goes out to my Mom and Dad for believing in me and always keeps on encouraging me to complete the book in a best possible way. In the end, as always, I would like to thank all the readers whole-heartedly for
choosing the book. Finally, I would like to thank readers of my blog (http://myview.rahulnivi.net). Many of you have contributed by asking questions, providing feedback, and inspiring and encouraging me in everything, I do.

About The Author
Rahul Sahay is a Microsoft MVP living in Bangalore, India. Rahul has been working in various aspects of the software
development life cycle since 8+ years, focusing on Microsoft & Google technology-specific development. He has been part of the development in different applications, ranging from client applications to web services to websites. Rahul is a Lead Developer at Marlabs (http://www.marlabs.com/). But he works for Marlabs’s client Nasdaq, on their premier trading IR-Insight tool(http://www.nasdaq.com/). A dedicated and result oriented Software professional and B.Tech (Information Science & Engineering) degree holder, with 8+ years of Software Development experience. He has an enviable track record through a series of Software Development, Software Support and Software Testing & Debugging. The results have been achieved by a mix of dedication, focus, persuasiveness, and a ‘can do’ attitude. He is able to adapt to new technologies in a quick time and very well-versed with design and development of .NET based applications. He is proactive and self-motivated to identify and acquire current trends and advancements in the organization. He is also very active blogger. His articles can be read at http://myview.rahulnivi.net/. He is also author of many other books which can be referred at http://amzn.to/20qOf2Z. You can also follow him at his twitter handle https://twitter.com/rahulsahay19 or ask him questions at his Facebook Community Page http://bit.ly/My-FB-GRP.

Chapter 1: Getting Started

WHAT DO you find in this CHAPTER?

Introduction
What is SPA
Technologies used to build SPA
Glimpse of Movie Review App
Glimpse of Movie Review Solution
Summary

INTRODUCTION: –

Hi my name is Rahul Sahay and I am going to introduce this whole new story of building Single Page Application right from the scratch. Here, in this context I am going to talk about bunch of different client/server side technologies and demonstrate how these small pieces marry together and creates a robust End to End application. However, I do expect from the readers to have basic working knowledge of ASP.NET MVC and Angular. Then, only you will be able to grasp the techniques comfortably. Hence, without wasting time let’s get started.

What is SPA: –

Single Page App is all about user experience. People will love your app if you give them nice user experience which not only fits nicely in your laptop or desktop rather it goes nicely with multitude of devices like tabs, phones etc… without breaking any single functionality. As shown in the below diagram, these are basic requirements for building any SPA.

Reliability: – People know that it’s reliable and it’s going to work. This kind of reliability only comes with positive experience.
Responsiveness: – Responsiveness means it’s going to work quickly for them. Quick is the key thing which any user expects to have in the app which he is using.
Reach: – Reach is often substituted with mobility. Mobility is again one of the key ingredient which every user is looking for. They always want to have the data handy irrespective of what device they are on.
Available: – This thing is really important when it comes to the point at working offline. Hence, delivering a good user experience is must while building SPA.

“Therefore, in a nutshell a Single Page App is web application which fits in a single page providing a fluid UX by loading all the necessary data in a single load.”

Now, apart from this there are many other attributes linked to SPA. They are: –

Maintain History: – When you flip between pages, it maintains your history in the same order how you visited them. Actually, it’s not going on different pages rather its loading different information’s on the same page. But, it looks to user that it’s presenting different pages to them.

Persisting Information: – Persisting information is also very important aspect of the SPA. It doesn’t mean that you need to save each and every thing at cache but you can store important things in the cache to improve the performance.

Mostly loaded on Page Load: – Mostly loaded on the page load means majority of information user required to use gets loaded initially itself to avoid roundtrip back to the server.

Dependent Elements: – As and when user requires to access different features of the application, app will go and download for the user.

Technologies used to build SPA: –

Movie Review app is built using tons of different client side and server side technologies. Some of these I have listed below: –

Client Side Technologies: –

HTML 5
CSS 3
Modernizer & LESS
Responsive Design
Media Queries
AngularJS
Toastr JS
Bootstrap Templates
Font Awesome Icons
Templating
Bootbox
Bower

Server Side Technologies: –

ASP.NET Core
SQL Server
Entity Framework Core – Code First Approach
Repository Pattern
Unit of Work Pattern
Web API
JSON & AJAX
NuGet
IOC
POCO Models

Design Techniques: –

Solid Principles
Factory Pattern

Testing Framework: –

MSTest
Jasmine
QUnit

Tools Used: –

Visual Studio 2015

Glimpse of Movie Review APP: –

I think it would be good idea you to show you finished app before directly jump in creating the same. Below is the glimpse of finished product in the best possible way. You can navigate the same at the URL http://moviereview.azurewebsites.net/#/ .

Above shown screen shot is the home page of the app. Now, when you click on the Movies link, it will take you to the below shown page.

Once, page gets loaded, little toast message at the bottom right of the screen pops up saying Movies Fetched Successfully. Now, from this screen you can do all the CRUD Operation. Here the very first link is Add Movie, which will give user flexibility to go ahead and add any new movie as shown below.

Let’s suppose if we try to post the Form as it is blank, then it won’t allow. Because above fields are required and therefore form became invalid, which is taken care at angular level validation. Now, once I enter any information, different validation will get triggered.

Even at this moment I cannot submit the form as the form is invalid. Once, I modify and enter valid details, then form will become valid and error messages will disappear.

Now, at this instant I can go ahead and submit the movie. Once I click submit button; one toast message will appear saying Movie Saved Successfully and will get redirected back to movies link.

Next is the Edit link corresponding to the movie. When you click on this, it will present the below screen for editing the same.

Here, also each and every validation will be there, what we have seen during creation. However, you can go ahead and edit anything over here, let’s say I change the year to 2002 and update.

Once I update the movie it will save the same in database and then get redirected to Movies link as shown below.

However, let me change the same back to the original one as it’s not correct. Now, next to Edit link, there is review link, where in you can go ahead and add Reviews as shown below.

Here, when I click on Add New Review, it will take me to the below form.

Above form has also got different set of validations as shown below.

Once done all the corrections, it will be like this

After successful, submission, it will redirect back to the movies link.

Upon adding Review, position of newly added movie moves up in the list as behind the scene order by clause is working on total no of reviews. Now, when I click on the Reviews link again, it will show me the review which I have added.

Similarly, I can go ahead and edit review as well by clicking on Edit link.

Till now, we have seen create and update operation. However, site supports full-fledged CRUD operation. However, in order to delete any record, user has to login first. Therefore, anonymous user can’t delete any record. Hence, let’s go ahead and login in the app first.

In the above screenshot, when I click on Log in link, it will take me to the below login page.

Once, I logged in successfully, it will show my credentials on the top of the screen as shown below.

Now, when I click on Movies link, it will produce the new links for deleting movie as well.

Here, when I click on Remove button corresponding to any Movie, it will produce one confirmation popup as shown below.

When, I click on Ok button, then it will delete the record and then get redirected back to the movies link as shown below.

Also, for deleting reviews corresponding to the movie, first needs to refer the corresponding review as shown below.

Then, in reviews screen, remove link will appear as shown below.

Upon, clicking on remove button, this will also produce the similar behavior what happened in Movie. About App link lists all the details of the application like what technologies used what tools you need, where to download the code etc.….

I have also used QUnit Library to test my Web APIs. Below is the glimpse for the same. You can refer the same @ http://moviereview.azurewebsites.net/WEBAPITests/apitests.html.

When you click on any individual test, it will present you the detailed results as shown below in the screen shot.

And if there is anything wrong with any end points, let’s suppose that doesn’t exist; easiest way to break the test, then it will be like

You can also verify these APIs like shown below

http://moviereview.azurewebsites.net/api/movies

Similarly, different endpoints can be tested. Apart from Web API tests. I have also used Jasmine to test my Angular code. You will also learn how to test client side JavaScript code with Visual Studio. Below is the glimpse for the same.

And Jasmine Spec Runner will produce the result like shown below.

Glimpse of Movie Review SOLUTION: –

Let me go ahead and show you the solution structure of finished app. Below in the screen shot, I have 5 different projects. Each is having its on dependency and responsibility.

Here, the highlighted one is the web project which is dependent on other infrastructure projects like Data, Contracts and Model. Data project is the place where in you maintain initial seed data, Entity Framework DBContext and many other things interacts directly down the layer with database. Data Contract is the place where in you manage your repositories and apply Unit of Work Pattern on repositories like movies and moviereviews. Model is the section where you will be having your POCOs (Plain Old CLR Objects). This is also place for maintaining all properties attributed to the tables. Below is the glimpse of all projects in its expanded form.

SUMMARY: –

In this section, we have seen the bits and bytes of the Single Page Application which we are going to make use while building the application. We have also seen the glimpse of app and solution. In the next section, we’ll start creating the application right from the scratch. I would recommend you to download the app from GitHub URL shown below to help you while building https://github.com/rahulsahay19/MovieReviewSPASkeleton.

P.S.:- I would appreciate if you guys leave constructive feedback upon reading the book. If you have any suggestions, please do put that too, so that going forward that can be incorporated. I hope, you people will like the book. With this, I would like to wrap the introduction here. However, in order to understand the book in detail, I do encourage you guys to watch the you-tube video for the same.

Exercises for you:- As far as client/server side validations are concerned, only basic validations have been kept to get you started. Readers are encouraged, to apply many more validation around the app to make it robust their way.

Links to Buy the book online.

Buy @ discounted price from BPB Site:- http://bit.ly/SPA-BPB

or Infbeam:- http://bit.ly/Rahul-SPA-Infibeam

or Flipkart:- http://bit.ly/SPA-Rahul-Flip

or Amazon India:- http://bit.ly/Rahul-SPA-IN

or Amazon International:- http://bit.ly/SPA-Rahul-Sahay

Thanks for joining me. Happy Coding!

Send this article by email

What is your name?

Please indicate below the emails to which you want to send this article: Building Single Page App Using ASP.NET Core with Entity Framework Core and AngularJS

Enter one email per line. No more than 5 emails.

Send