Apache Cordova with Angular JS

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. In this post I will create a sample hybrid mobile application using Cordova. This application will mainly use Angular JS. I will use most of the codes from my previous post.
You can easily install Cordova using Visual Studio plugins.
Create a Blank Cordova Application.

Project structure looks like below. When Cordova starts, it will initiate to run index.html file as the start up page. There you will find references of cordova.js and platformoverrides.js which are mainly used by Cordova, when it package the application for different mobile specific packages.

And also, index.js file is another important file which contains mobile application specific lifetime events.
Download Jquery, Bootstrap, Angular, Angular-resource, Angular-router, Angular-touch and FontAwesome and then save javascripts, CSS and fonts accordingly.

Add references of javascripts and css files into index.html file.

Add Angular main module in to app folder like below.

As I have mentioned before, I copied several files from my previous project which relates to previous post. Therefore, I won't explain much about the content. welcomeView.html file is like below.

studentListViewController.js file content is like below.

studentListView.html file content should be like below.

studentDetailViewController.js file content should be like below.

studentDetailView.html file should like below.

commonService.js file content is like below.

studentResource.js file should be like below.

Change index.html file like below.

Then add application specific javascript files.

Now run the application. Sometimes, Visual Studio get crashed(may be I'm using 2015 preview version). Therefore I think it is better if you enable Detailed build output. To do that, go to Tools -> Options and then select Detailed according to following way.

You must run your previous application which contains web api controllers. Reason for that is, you have specified a web api URL, in studentResource.js file.
Following are the screens of Home, List and Detail view.

Entity Framework with Inheritance

In Entity Framework(EF) code-first approach, there are three types of methods to handle the inheritance hierarchy.

• Table per Hierarchy (TPH)
• Table per Type (TPT)
• Table per Concrete Class (TPC)

By default EF use TPH approach.

Table per Hierarchy (TPH)

In TPH, All data in the hierarchy will be saved in a single table. It uses Discriminator column to identify which record belongs to which sub type. Value of this column is the name of the sub type.

In the below sample I have a base class called Vehicle. Car and Bicycle classes are inherited from the Vehicle class. SportsCar class is inherited from the Car class.

According to the above class structure the database table design will be look like below. The Discriminator column will be added automatically through the EF.

After add some data, it'll be look like below. The value of the Discriminator column will be the name of the sub type.

Table per Type (TPT)

In TPT, EF will create table for each type. In this approach inheritance relationships are represented as Relational Foreign Key Associations.

The table for sub classes contains only the non-inherited properties along with the primary key. Primary key of each sub class is a foreign key for the base class.

To do this we can override the OnModelCreating method of DbContext and write some fluent API code.

The design of the tables will be as follow.

After add some data, it'll be like,

Table per Concrete Class (TPC)

In TPC, for each class, the EF will create a table. So all the properties and all the inherited properties will be mapped to the each table.

To do this we can override the OnModelCreating method of DbContext and write some fluent API code.

After add some data, tables'll be like.