Getting Started - Create a SPA And use AngularJS $http Service


AngularJS & Web API - SPA & $http 

  • After Configuration of our Web API in Library project(Getting Started - Web API) , Open project From the Tools menu click NuGet Package Manager and then click Package Manager Console. In the Package Manager Console write the following command: 
PM> Install-Package angularjs
  • Also install bootstrap - we'll use it for styling 
PM> Install-Package bootstrap


  • In project root add new html page named Index.html and add references to Bootstrap &  AngularJS (from Scripts and Content folders) , Edit html to look like fallowing :
"This is page contain navigation bar and all references I needed so far 
//Index.html


<!DOCTYPE html>
<html ng-app="myLibrary">
<head>
    <title></title>
    <meta charset="utf-8" />

    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="/Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>

    <!-- Starting App Scripts-->
    <script src="Scripts/LibraryApp/libraryModule.js"></script>
    <script src="Scripts/LibraryApp/libraryService.js"></script>
    <script src="Scripts/LibraryApp/booksController.js"></script>

    <script src="Scripts/LibraryApp/authorsController.js"></script>


</head>
<body>
   
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Library</a>

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#books">Books</a></li>
                    <li><a href="#authors">Author</a></li>

                </ul>
              
            </div>
        </div>
    </div>
    <div style="margin-top:5em" class="container">
        <!-- All Pages will load in this part -->
        <div ng-view></div>
    </div>

</body>


</html>
  • add new folder named templates ,  In templates folder add 2 new paes named books.html & authors.html , in the books.html & & authors.html  Edit dom to like like this:
//books.html


<div>
    <table class="table table-condensed table-hover">
        <thead>
            <tr>
                <th>
                    Book Name

                </th>
                <th>
                    Author
                </th>

            </tr>
        </thead>
        <tbody ng-repeat="book in books">
            <tr>
                <td>
                    {{book.bookName}}
                </td>

                <td>
                    {{book.authorName}}
                </td>
            </tr>

        </tbody>

    </table>

</div>

//authors.html

<div>
    <table class="table table-condensed table-hover">
        <thead>
            <tr>
                <th>
                    Author Name

                </th>
                <th>
                    Available books
                </th>

            </tr>
        </thead>
        <tbody ng-repeat="author in authors">
            <tr>
                <td>
                    {{author.authorName}}
                </td>

                <td>
                    {{author.bookCount}}
                </td>
            </tr>

        </tbody>

    </table>


</div>


  • Add new folder in Scripts folder named LibraryApp and add 4 JavaScript files named libraryModule.js , libraryService.js , booksController.js , authorsController.js) . 


1- In libraryModule.js 

//libraryModule.js




var libraryModule = angular.module("libraryModule", ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/books', { templateUrl: '/templates/books.html', controller: 'booksController' });
        $routeProvider.when('/authors', { templateUrl: '/templates/authors.html', controller: 'authorsController' });

        //default
        $routeProvider.otherwise({ templateUrl: '/templates/books.html', controller: 'booksController' });


    });

2- In libraryService

//libraryService.js


libraryModule.factory('libraryService',function ($http, $q) {

    var svc = {

        getAllBooks: function () {
            var deferred = $q.defer();
            $http.get('/api/books')
                 .success(deferred.resolve)
                 .error(deferred.reject);

            return deferred.promise;
        },
        getAllAuthors: function () {
            var deferred = $q.defer();
            $http.get('/api/authors')
                 .success(deferred.resolve)
                 .error(deferred.reject);

            return deferred.promise;
        }
    };

    return svc;


})

3- In booksController.js
//booksController.js



libraryModule.controller("booksController", function ($scope, libraryService) {

    $scope.books = [];

    var getAllBooks = function () {
        libraryService.getAllBooks().then(
            function (books) {
                $scope.books = books;

            },
            function (error) {
                console.log('Error', error);
            });
    }();
 

});

4- In authorsController.js
//authorsController.js


libraryModule.controller("authorsController", function ($scope, libraryService) {

    $scope.authors = [];

    var getAllAuthors = function () {
        libraryService.getAllAuthors().then(
            function (authors) {
                $scope.authors = authors;

            },
            function (error) {
                console.log('Error', error);
            });
    }();


});

- That is all ! - Now run your project and go to Index page to see your work .
Index  Page












- link to project in github.