Using AngularJS with ASP.NET Web API

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:

  1. Right-click on the project. Select the Manage NuGet packages item and search for AngularJS. Make sure Online is selected on the left-hand side and click on Install as shown in the following screenshot. After the installation is completed, a new Scripts folder will be added to the solution explorer.
    Using AngularJS with ASP.NET Web API
  2. Repeat step one to install Bootstrap. We use Bootstrap to create a responsive design of HTML pages, but this is not required. Note that there is a new folder added in the solution explorer Content, which contains CSS for Bootstrap.
  3. Right-click on the project and create a new folder called Views (you can give a different name to this folder if you want to). We use this folder to store our HTML pages.
  4. Right-click on the Views folder. Select Add | New Item | HTML Page and name the page:
    Using AngularJS with ASP.NET Web API
  5. In the <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>
  6. Add a new 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.
  7. Add three subfolders in the 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.
  8. Right-click on the Application subfolder under the AngularJS folder in solution explorer. Select Add | New item | JavaScript File:
    Using AngularJS with ASP.NET Web API
  9. Repeat step 8 to create JavaScript files in the 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:

Using AngularJS with ASP.NET Web API

Clicking on the company name will show information specific to the customer clicked on, as shown:

Using AngularJS with ASP.NET Web API

Note

Bootstrap: You can find a tutorial about Bootstrap at http://getbootstrap.com/.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset