Search code examples
angularjsangularjs-directiveangularjs-scopeangular-ui-routerangularjs-routing

UI routing not working, angular JS

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>
Solution

  • Update your UI Router:

    angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("main");
$stateProvider
.state('main', {
    url: '/main',
    templateUrl: 'app/main/main.html'

})
});