I'm trying to display main.html template via UI routing, but its not working for some reason. Can someone please point out the mistake in my code. Thank you.
appModule
"use strict";
angular.module("fleetOperate", ["ui.router", "mainModule"]);
UI Routing
"use strict";
angular.module('fleetOperate').config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});
mainModule
"use strict";
angular.module("mainModule", []);
main.HTML
<div class="icon-bar" ui-view="main">
<a ui-sref="" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Fleet</label>
</a>
<a ui-sref="" class="item">
<i class="fa fa-users" style="font-size:48px;"></i>
<label>Drivers</label>
</a>
<a href="#" class="item">
<i class="fa fa-calendar" style="font-size:48px;"></i>
<label>Planner</label>
</a>
<a href="#" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Trailors</label>
</a>
<a href="#" class="item">
<i class="fa fa-files-o" style="font-size:48px;"></i>
<label>Pod</label>
</a>
<a href="#" class="item">
<i class="fa fa-cog" style="font-size:48px;"></i>
<label>Settings</label>
</a>
<a href="#" class="item">
<i class="fa fa-square-o" style="font-size:48px;"></i>
<label>Control Center</label>
</a>
<a href="#" class="item">
<i class="fa fa-phone" style="font-size:48px;"></i>
<label>Communication</label>
</a>
<a href="#" class="item">
<i class="fa fa-user" style="font-size:48px;"></i>
<label>Customer Profile</label>
</a>
</div>
Index.HTML
<!DOCTYPE html>
<html ng-app="fleetOperate">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Truck Trackers</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="app/app.css" rel="stylesheet" />
<link href="app/main/main.css" rel="stylesheet" />
<script src="scripts/angular.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="app/main/mainModule.js"></script>
<script src="app/appModule.js"></script>
<script src="app/appUI_Routing.js"></script>
</head>
<body class="container-fluid">
<header class="js-title-bar">
<div class="js-logo-area">
<img class="js-icon" ng-src="http://www.cam-trucks.com/images/2.jpg"/>
<div class="js-title-area">
<p class="js-logo-title"> <strong>Truck Tracker's</strong></p>
<p class="js-logo-subtitle">Where ever you GO, we FIND you !</p>
</div>
</div>
</header>
<div ui-view></div>
</body>
</html>
angular.module('fleetOperate').config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/main");[...]});– Oliver 17 hours ago