AngularJS Routing Examples
In this tutorial, we will see angularJS routing using angular-routing.js. It required angular-routing.js module dependency that need to be injected in the module. $route Service is for inking of URLs to controllers and views.
JS Files and Versions:
- angular.min.js – 1.6.2
- bootstrap.css
- angular-routing.js
- bootstrap.js
- jQuery.js
AngularJS Routing Tutorial:
- Angular routing required ng-view directive at index.html file
- $routeProvider watches the url and loads the corresponding template html into ng-view area
- Lets create routing for the below links. We will use bootstrap for look and fell and have the below paths:
- home
- employee
- payslips
- admin(create/view/update)
- Lets create the below project structure:
- Index.html file is:
-
<html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <style type="text/css"> .navbar-default { background-color: rgba(68, 193, 230, 0.84); } .navbar-default .navbar-nav>li>a { color: #efe2e2; } </style> <title>Angular Routing</title> </head> <body ng-app="myApp" ng-controller="MainController"> <div class="navbar navbar-default navbar-fixed-left"> <div class="container navbar-leftmr"> <div class="navbar-collapse collapse " id="navbar-main"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#home"> Home </a></li> <li class="dropdown"> <a href="#employee"> Employees </a> </li> <li class="dropdown"> <a href="#payslips"> Payslips </a> </li> <li> <a class="dropdown-toggle" data-toggle="dropdown" id="dashboard"> Admin <span class="caret"></span></a> <ul class="dropdown-menu" aria-labelledby="download"> <li><a href="#createEmployee">Create Employee</a></li> <li><a href="#viewEmployee">View Empoyee</a></li> <li><a href="#updateEmployee">Update Employee</a></li> </ul> </li> </div> </div> </div> <div ng-view></div> </body> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </html>
-
- app.js is:
-
var app = angular.module('myApp', ['ngRoute']); app.config(function($routeProvider) { $routeProvider.when('/', { templateUrl: 'resources/home.html' }).when('/home', { templateUrl: 'resources/home.html' }).when('/employee', { templateUrl: 'resources/employee.html', }).when('/payslips', { templateUrl: 'resources/payslips.html', }).when('/createEmployee', { templateUrl: 'resources/createEmployee.html', }).when('/viewEmployee', { templateUrl: 'resources/viewEmployeeList.html', }).when('/updateEmployee', { templateUrl: 'resources/updateEmployee.html', }); }); app.controller("MainController",['$scope',function($scope){ }]);
-
- home.html is:
-
<div class="container-fluid"> <h2>This is home page </h2> </div>
Download AngularJS Routing Code
-
One thought on “AngularJS Routing Examples”
Comments are closed.
In angularjs routing example ,getting error.