Create a Single-Page Application (SPA) - Angularjs
- This article is Part of a series :
Create a Single-Page Application (SPA) - Angularjs
- This article is Part of a series :A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a user experience similar to that of a desktop application. (wikipedia).
- Create new html page named main or index
- use ng-view In order to determine loading part (html template) , your main page will look like this :
//main.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>
</head>
<body>
<div style="margin-top:5em" class="container">
<!-- your View will appear here -->
<div ng-view></div>
</div>
</body>
</html>
- add new folder named templates
- add 2 new pages to templates folder named books.html & authors.html
- The books.html & authors.html are samples pages contain table of authors and table of books (we'll go through implementation later in this article)
- now we will configure our angularjs app to use routing
- Add 3 JavaScript files in new folder (or script folder) named (myLibrary.js , booksController.js , authorsController.js ) .
- Open myAppModule.js and write the following configuration :
//myLibrary.js
var myLibrary =
angular.module("myLibrary", ['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'
});
});
- Open booksController.js and create books array for $scope.books :
//booksController.js
myLibrary.controller("booksController", function ($scope) {
$scope.books = [
{ name: 'A brief history of time', author: 'Stephen Hawking' },
{ name: 'Death: The Final Stage of
Growth', author: 'Elisabeth Kübler-Ross' },
{ name: '50 Mathematical Ideas You
Really Need to Know',
author: 'Tony Crilly' },
{ name: 'The Grand Design', author: 'Tony Crilly', author: 'Stephen Hawking'}
];
});
- Same steps in authorsController.js :
//authorsController.js
myLibrary.controller("authorsController", function ($scope) {
$scope.authors = [
{ authorname: 'Stephen Hawking' , numOfBooks : 2 },
{ authorname: 'Elisabeth Kübler-Ross', numOfBooks: 1 },
{ authorname: 'Tony Crilly', numOfBooks: 1 }]
});
- Open books.html and create books table (I used bootstrap for styling) :
//LibraryDbContext.cs
<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.name}}
</td>
<td>
{{book.author}}
</td>
</tr>
</tbody>
</table>
</div>
- To do authors.html(same steps).
- add scripts and links references to main.html :
//main.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>
<script src="Scripts/myApp/myLibrary.js"></script>
<script src="/Scripts/myApp/booksController.js"></script>
<script src="/Scripts/myApp/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">
<div ng-view></div>
</div>
</body>
</html>
 |
| main page |