The AngularJS allows us to create navigation menus in one page web applications in a very simple way. The following code sample shows that.
The following is the HTML file that includes a script element that refers the AngularJS library on Google servers.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<link rel="stylesheet" href="design.css" type="text/css" />
<title>simple navigation menu</title>
</head>
<body>
<div id="main" ng-app>
<nav class="{{cssclass}}" >
<a href="#" class="home" ng-click="data='home...';active=true;cssclass='home'">Home</a>
<a href="#" class="products" ng-click="data='products...';active=true;cssclass='products'">Products</a>
<a href="#" class="services" ng-click="data='services...';active=true;cssclass='services'">Services</a>
<a href="#" class="about" ng-click="data='about...';active=true;cssclass='about'">About</a>
<a href="#" class="contact" ng-click="data='contact...';active=true;cssclass='contact'">Contact</a>
</nav>
<p ng-hide="active">click one of the menu options</p>
<p ng-show="active">{{data}}</p>
</div>
</body>
</html>
The following is the CSS file the HTML code uses. This CSS file is responsible for the look & feel we get.
body{
font:14px sans-serif;
color: #688242;
text-align:center;
}
nav{
display:inline-block;
background-color:#6678f4;
border-radius:5px;
}
nav a{
display:inline-block;
padding: 10px 34px;
color:#fefefe;
font-size:14px;
text-decoration:none;
}
nav a:first-child{
border-radius:5px 0 0 5px;
}
nav a:last-child{
border-radius:0 5px 5px 0;
}
nav.home .home,
nav.products .products,
nav.services .services,
nav.about .about,
nav.contact .contact{
background-color:#343212;
}
p{
font-size:20px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:5px;
font-size:16px;
}
The following video clip overviews this code sample, shows its execution and explains each and every part of it.
You can find more video clips, code samples and explanations for using the AngularJS library in my online free (for personal usage) courses at http://abelski.lifemichael.com.
