AngularJS Navigation Bar Example Using Simple Routing

Hello friends. Today we are going to create a simple Website in Angularjs with various pages like home page, about page, contact page, portfolio page, etc. with complete form validation.

So to achieve this simple task “angularjs navigation bar example using simple routing”, follow these steps.

Step 1.

Create a site directory structure like this.

root(folder)

————-include(folder)

——————–bootstrap library(folder)

——————–jquery library

————-js(folder)

——————–angularjs library

——————–app.js

————-pages(folder)

——————–about.html

——————–contact.html

——————–home.html

——————–portfolio.html

——————–sidebar.html

——————–notfound.html

index.html

Step 2.

Write or paste the following code in index.html

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <!-- Set the viewport so this responsive site displays correctly on mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Angularjs Routing Navigation | trycatchclasses.com</title> <!-- Include bootstrap CSS --> <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="includes/style.css" rel="stylesheet"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22includes%2Fjquery%2Fjquery-2.1.0.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <!--Angular js--> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fangular-route.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fangular-animate.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fapp.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </head> <body ng-controller="navController"> <!-- Site header and navigation --> <header class="top" role="header"> <div class="container"> <a href="#" class="navbar-brand pull-left">Trycatch Classes Tutorials</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-align-justify"></span> </button> <nav class="navbar-collapse collapse" role="navigation"> <ul class="navbar-nav nav"> <li><a href="#/">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> </header> <div ng-view="" id="ng-view" class="slide-animation"></div> <!-- Site footer --> <div class="bottom"> <div class="container"> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> Content for the first footer section. </div> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> Content for the second footer section.</div> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> Content for the third footer section.</div> </div> </div> <!-- Include jQuery and bootstrap JS plugins --> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22includes%2Fbootstrap%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html>

Step 3.

Now understand the contact form so paste the following code in contact.html

<!-- Site banner --> <div class="banner"> <div class="container" ng-controller="validationController"> <p ng-model="response" style="color: green; font-weight: bold"> {{response}} </p> <h1>Contact us page</h1> <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- NAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"> <label>Name*</label> <input type="text" name="name" class="form-control" ng-model="user.name" required style="border: 1px solid #ddd; border-radius: 0px; box-shadow: 0px;"> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p> </div> <!-- USERNAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"> <label>Username</label> <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" style="border: 1px solid #ddd; border-radius: 0px; box-shadow: 0px;"> <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p> </div> <!-- EMAIL --> <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email" style="border: 1px solid #ddd; border-radius: 0px; box-shadow: 0px;"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p> </div> <button type="submit" class="btn btn-primary" style="border: 1px solid transparent; border-radius: 0px; box-shadow: 0px;">Submit</button> </form> </div> </div> <!-- Middle content section --> <div class="middle"> <div class="container"> <div class="col-md-9 content"> <h2>Angularjs Routing Navigation</h2> <p>A comprehensive tutorial showing you how to quickly create Angular route navigation.</p> <div class="to-tutorial"> <p><strong>Visit the tutorial now to learn more:</strong></p> <a href="http://www.trycatchclasses.com/angularjs-navigation-bar-example-using-simple-routing/" class="btn btn-success">GO TO THE TUTORIAL</a> </div> </div> <div class="col-md-3"> <div ng-include src="'pages/sidebar.html'"></div> </div> </div> </div>

Step 4.

Now understand the heart of this side is app.js file.

// create the module of the app var myApp = angular.module('myApp',['ngRoute', 'ngAnimate']); //create the navigation controller myApp.controller('navController', function ($scope){}); //create the validation controller myApp.controller('validationController', function ($scope){ // function to submit the form $scope.submitForm = function(isValid){ //check to make sure that form is completely valid if(isValid){ $scope.response = 'Your form is submited susscssfuly'; // alert('Thanks'); } else{ $scope.response = ''; } }; }); //Define route for site myApp.config(['$routeProvider',function ($routeProvider){ $routeProvider .when('/',{ title: 'home', templateUrl: 'pages/home.html' }) .when('/about',{ title: 'About', templateUrl: 'pages/about.html' }) .when('/contact',{ title: 'contact', templateUrl: 'pages/contact.html' }) .when('/portfolio',{ title: 'portfolio', templateUrl: 'pages/portfolio.html' }) .otherwise({ redirectTo: 'pages/notfound.html' }); }]);// create the module of the app var myApp = angular.module('myApp',['ngRoute', 'ngAnimate']); //create the navigation controller myApp.controller('navController', function ($scope){}); //create the validation controller myApp.controller('validationController', function ($scope){ // function to submit the form $scope.submitForm = function(isValid){ //check to make sure that form is completely valid if(isValid){ $scope.response = 'Your form is submited susscssfuly'; // alert('Thanks'); } else{ $scope.response = ''; } }; }); //Define route for site myApp.config(['$routeProvider',function ($routeProvider){ $routeProvider .when('/',{ title: 'home', templateUrl: 'pages/home.html' }) .when('/about',{ title: 'About', templateUrl: 'pages/about.html' }) .when('/contact',{ title: 'contact', templateUrl: 'pages/contact.html' }) .when('/portfolio',{ title: 'portfolio', templateUrl: 'pages/portfolio.html' }) .otherwise({ redirectTo: 'pages/notfound.html' }); }]);

Step 5.

Rest of the code you can see in demo site or in Download folder.

So finally you can run your first angularjs site on server.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.