How to get data from Database/Model with JavaScript/AngularJS

Question

I'm new to ASP .NET, MVC and AngularJS so I'm trying to figure this all out still.

I have a Model called Words.cs which contains:

namespace liveSearch.Models
{
    public class Words
    {
        public int ID { get; set; }
        public string Word{ get; set; }
    }
}

The database is already populated with data and I want to use JavaScript/JQuery to get every Word from the database and then use AngularJS to display that on my index.cshtml page.

I currently have Razor in my index.cshtml which does:

@{
     foreach (var item in Model)
     {
         <li>
             @Html.DisplayFor(modelItem => item.Word)
         </li>
     }
 }

This works in getting and displaying all Words in the model but I want to get rid of the Razor and use JavaScript/Jquery to get the data and AngularJS to display it there.

Ideally, I want to get all Words from the DB (I don't care about the IDs) and add it to an array in the scope. Then I can use AngularJS to display each Word by using ng-repeat.

The problem is that I don't know how to get all the Words into an array in the scope from the DB/model.

I think I can use $.get() or $.ajax() but I don't really know how to use it with a DB/model.

Thank you

Answer 1

Angular is a client side technology. .Net is server side. Your .net code will have to be changed to an API that the Angular code will be able to use. I suggest you read up on WebApi to creat a RESTful service that your Angular code can then consume.