The article presents take-away code sample for quickly getting started with single page app using AngularJS and Bootstrap.
For detailed instructions, we recommend you to take a look at some of the following blogs we wrote earlier:
Following are key things to note:
- Routes defined for different views (pages)
- Container page where ng-view directive is placed in order to load different views
- Separate HTML page representing different views
- Unique controllers defined for each view (page)
Container Page
Copy and paste the code below in a new file and give a name to the file, may be, index.html.
<!DOCTYPE html>
<html ng-app="ngSpApp">
<head>
<title>Single Page App Template</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table style="width:100%;margin:10px">
<tr>
<td style="width: 15%;vertical-align: top;">
<div class="list-group" style="margin-top:20px" >
<a href="#/" class="list-group-item active">Home</a>
<a href="#/link1" class="list-group-item">Link 1</a>
</div>
</td>
<td style="vertical-align: top;padding-left:10px;">
<div ng-view></div>
</td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-route.js"></script>
<script>
//
// Defining Module
//
var spApp = angular.module( "ngSpApp", ['ngRoute'] );
//
// Defining Routes
//
spApp.config(function($routeProvider) {
$routeProvider.when('/link1', {
controller : 'Link1Ctrl',
templateUrl : 'views/link1.html'
}).otherwise({
controller : 'HomeCtrl',
templateUrl: 'views/home.html'
});
});
//
// Controller for Home Page
//
spApp.controller( "HomeCtrl", [ '$scope', function($scope) {
$scope.text = 'Hello, this is homepage';
}]);
//
// Controller for Link1 Page
//
spApp.controller( "Link1Ctrl", [ '$scope', function($scope) {
$scope.text = 'Hello, this is link1 page';
}]);
</script>
</body>
</html>
Inner Pages
As per the routes configuration, create a folder, “views” within the same folder where you saved the container page, index.html and create following two files:
home.html
<div>
<div class="page-header" style="margin-top:0">
<h1>Welcome, Home Page</h1>
</div>
<div>
{{text}}
</div>
</div>
link1.html
<div>
<div class="page-header" style="margin-top:0">
<h1>Welcome, Link1 Page</h1>
</div>
<div>
{{text}}
</div>
</div>
Conclusion
That is it. You are done. Open the index.html in the web browser (Chrome/Firefox) and test your single page app.
[adsenseyu1]
I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com
Latest posts by Ajitesh Kumar (see all)
- Model Parallelism vs Data Parallelism: Examples - April 11, 2024
- Model Complexity & Overfitting in Machine Learning: How to Reduce - April 10, 2024
- 6 Game-Changing Features of ChatGPT’s Latest Upgrade - April 9, 2024
Leave a Reply