index.html
This is the simple part. We’re using Bootstrap and Font Awesome. Open up your index.html file and we’ll add a simple layout with a navigation bar.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Single page web app using Angularjs</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="shaharma">
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#/about">About us</a></li>
<li><a href="#/about">Read tutorial</a></li>
</ul>
</nav>
</div>
<br/>
<div ng-view class="jumbotron"></div> <!-- div where the dynamic page view will be loaded -->
</div>
</body>
</html>
Injecting Pages into the Main Layout
ng-view is an Angular directive that will include the template of the current route (/home, /about, or /contact) in the main layout file. In plain words, it takes the file we want based on the route and injects it into our main layout (index.html).
We will add the ng-view code to our site in the div#maito tell Angular where to place our rendered pages.
Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.
Let’s look in our Angular file and add to our application. We will be using $routeProvider in Angular to handle our routing. This way, Angular will handle all of the magic required to go get a new file and inject it into our layout.
For linking to pages, we’ll use the #. We don’t want the browser to think we are actually travelling to about.html or home.html
First, we have to create our module and controller in javascript. We will do that now in script.js.
script.js.
var app = angular.module('shaharma',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html',
controller:'yubrajcontroller'
});
});
app.controller('yubrajcontroller', ['$scope', '$http', function($scope, $http){ ---[A]
$scope.message = 'Welcome to Inspire';
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}]);
--[A]- description
here we are fetching the json data from the http server which will be shown in the about.html file
about.html.
<div style="padding-left:130px;padding-right:200px;">
<h1>About us page2. {{message}} </h1>
<p><input type="text" ng-model="searchresult"></p>
<table class="table">
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in names | filter:searchresult">
<!-- here names comes from the yubrajcontroller which is returning the json data to the about us page -->
<td>{{ x.Name | uppercase }}</td>
<td>{{ x.City | uppercase }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
</div>
home.html
<div style="padding-left:130px;padding-right:200px;">
<h1>Hello, world!</h1>
<p>This is simple angular ng-view and ng-route tutorial to demonstrate single page web app development.</p>
<p>
This is executed because of this code.
<pre>
<code>
.when('/',{
templateURl: 'home.html'
})
</code>
</pre>
</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Read tutorial</a></p>
</div>
--Enjoy
