In this tutorial, I will show you how to fetch data from database using AngularJs. In the previous tutorial, I have shown how to setup AngularJs in ASP.NET MVC Application. This is our second article, in this article, I will make a database (E.g. Student) in App-_Data folder, Save some records in a table named StudentRecord. Then I will add AngularJs library in our project, then Create new JS file in the Scripts folder, then create a controller with two action methods, such as Index() action method and GetStudentRecord() action method. Then finally add a view to Index action method.
List of Previous Tutorials
How to fetch Data from Database using AngularJs
Let,s start how to fetch data from database using AngularJs in step by step.
Step # 1 – Create Project.
Go to File => New => Project. It will show new Project popup.
Select ASP.NET Web application(from middle pane) => Enter the name of Application (E.g. FetchDataUsingAngularJsDemo) => click Ok button. It will show a new ASP.NET Project popup.
Select MVC option => Check the checkbox under the “Add folder and core references for:” => then click Ok button.
Step # 2 – Add AngularJs library.
Now add AngularJs library to your project from NuGet package manager.
Go to solution explorer => right click on project name => Chose Mange NuGet Packages (It will show a new tab) => Enter “AngularJs” in the search box => select AngularJs option => Click on install. It will add all the libraries into your project scripts folder.
Step # 3 – Add Angular bundle to the project.
Go to solution explorer => click on App_Start folder => Double click on BundleConfig.cs file => Add the below code to this BundleConfig.cs file.
Step # 4 – Add Database.
Now in this step add a database to your project.
Go to solution explorer => right click on the App_Data folder => Add => New Item => Chose “SQL Server Database” (under the Data option) => enter the database name (E.g. AngularData) in the name field => click Add button.
Step # 5 – Add Table.
Now in this step add a table to your project database.
Go to data base (from left pane) => right click on the table option => Add new table => Add columns => Enter the table name => Update => Ok.
I have used this below table in this tutorial.
Now add some record to the table. Right click on the table => show table data => enter record.
Step # 6 => Add Entity model.
Now in this step add an entity model to your project.
Go to solution explorer => right click on the project name => Add => new item => Select “ADO.NET Entity Data Model” (under data option) => Enter name => click Add button. It will show a new popup window named as Entity Data Model Wizard => Choose “Generate from database” => Next => Choose your connection (under the “Which data connection should your application use to connect to the database”) => Next => check the table checkbox (under the table checkbox also) => Finish.
Step # 7 – Add new js file.
Now in this step add a new js file to your project.
Go to solution explorer => right click on the scripts folder => Add => New Folder (named as “AngularData”).
Right click on the AngularData Folder (Under scripts folder) => Add => New Item => choose JavaScript file (under the Web option) => enter the name (E.g. FetchData) => and click Add button.
Right the following code in “FetchData.js” file.
I have already discussed a little bit about angular.module and angular.controller and $scope. Click here to read.
$http: $http is an AngularJs service. It is used for reading data from remote servers. AngularJs $http service makes a request to the server and then returns a response to that request.
Factory: Here I have used MyApp.Factory. We can use it to organize our data for the whole application. This is same as service layer in ASP.NET MVC Application.
Step # 8 – Modify _Layout.cshtml file.
In this step modify _Layout.cshtml file. Add ng-app=”MyApp” in <body> tag, add angular bundle and add a path of FetchData.js file. So, write the following code.
Step # 9 – Create Controller.
In this step add a new controller in your project under the Controller folder.
Go to solution explorer => right click on the Controller folder => Add => Controller. It will show a new “Add Scaffold” popup.
Select MVC 5 Controller – Empty => then click Add button
Enter the name of controller (E.g. StudentController) => click Ok. It will add a new file “StudentController.cs” under the controller folder with Index() action method.
Step # 10 – Add GetStudentData() action method.
Now in this step add a new action method named as GetStudentData() to get data from database using AngularJs. Write the following code into StudentController.cs file.
Step # 11 – Add view to Index Action Method.
Now in this step add a view to Index action method.
Now right click on the Index action method => Add View … => Enter View name in the name field (Same as Action Method) => Click Add button.
Add the following code to this file.
Step # 12 – Run your application.
Now in this step run your application with this URL http://localhost:62673/student/Index . You will get the following output.
Summary:
Congratulation you have successfully Fetch data from database using AngularJs. I hope this will be useful for. Please like and share if you like.
[download id=”1049″]
Leave a Reply
5 Comments on "How to Fetch Record From Database using AngularJs"
[…] on January 25, 2017 submitted by /u/dekhoworld [link] [comments] Leave a […]
can i work with code first migration approach instead ho db first migration
Yes Muhamad Waleed we can do. According to your point first we will create model class and add DbContext class and then we will run package manager console quries…! please see this post also.
Keep visiting and feel free to add any query here.
thnks
it is very Helpful Article!!! Great work…