In this section, we will retrieve data from the database, consuming the previously created ASP.NET Web API and display the data on the client-side using AngularJS. In order to use AngularJS, we need to add AngularJS into our application:
Scripts
folder will be added to the solution explorer.Content
, which contains CSS for Bootstrap.Views
(you can give a different name to this folder if you want to). We use this folder to store our HTML pages.Views
folder. Select Add | New Item | HTML Page and name the page:<head>
tag of HTML, add the reference to the AngularJS library as shown in the following code. You can find the angular.js
file in the Scripts
folder of the project:<script src="/Scripts/angular.js"></script>
AngularScript
folder. It is a best practice to keep your Angular JavaScript in a separate folder. Right-click on the project and select Add | New Folder.AngularScript
folder: Application
, Directives
, and Controllers
. We will keep all the AngularJS controllers in the Controller
subfolder, AngularJS directives in the Directives
subfolder, and so on.Application
subfolder under the AngularJS
folder in solution explorer. Select Add | New item | JavaScript File:Controllers
and Directives
subfolders. Reference these files in the HTML <head>
tags. The <head>
tag will look like this code:<!-- BOOTSTRAP CSS REFRENCES--> <link href="../Content/bootstrap.min.css" rel="stylesheet" /> <!--JAVASCRIPT REFRENCES --> <script src="../Scripts/jquery-2.1.1.js"></script> <script src="../Scripts/bootstrap.js"></script> <script src="../Scripts/angular.js"></script> <script src="../AngularScript/Application/Application.js"></script> <script src="../AngularScript/Controllers/myControllers.js"></script> <script src="../AngularScript/Directives/myDirectives.js"></script>
The following code shows the AngualarJS Controller:
app.controller('ctrlCustomer', function ($scope, $http) { //Call to web API var Url = '/api/Customer/getAllCustomers' $http({ method: 'GET', url:Url }).success(function (customerList) { $scope.AllCustomer = customerList; }).error(function () { }); $scope.GetCustomerByCustomerID = function(customerID) { //Call to web API var Url = '/api/Customer/getCustomerByCustomerID'; $http({ method: 'GET', url: Url, params: { customerID: customerID } }).success(function (customerList) { $scope.CustomerByID = customerList; }).error(function () { }); } });
In the preceding code, we create a ctrlCustomer
controller, and use $http
to retrieve the data from a web API by calling the URL /api/Customer/getAllCustomer
, where Customer
is the web API controller named without the suffix controller and getAllCustomers
is the function in the controller. We create a function called $scope.getCustomerByCustomerID
in the AngularJS controller and expose this function with ng-click
in the HTML as shown here. The data is also shown within the Bootstrap model:
<div class="container table table-striped table-condensed"> <div class="row success"> <div class="col-lg-3"> <b>Company</b> </div> <div class="col-lg-3"> <b>Representative</b> </div> <div class="col-lg-5"> <b>Address</b> </div> </div> <div ng-repeat="customers in AllCustomer|filter:search"> <div class="col-lg-3"> <a href="#" ng-click="GetCustomerByCustomerID(customers.CustomerID)" data-toggle="modal" data-target="#customerByIDModal" style="margin-left:0px">{{customers.CompanyName}}</a> </div> <div class="col-lg-3"> <b>{{customers.ContactName}}</b><br /> {{customers.ContactTitle}} </div> <div class="col-lg-5"> {{customers.Address}}<br /> {{customers.City}}, {{customers.Country}} </div> </div> </div>
This figure shows the output of the preceding code:
Clicking on the company name will show information specific to the customer clicked on, as shown:
Bootstrap: You can find a tutorial about Bootstrap at http://getbootstrap.com/.