UI routing not working, angular JS

Question

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>

does it give any error message in console, or just doing nothing? — Ahmet Cetin
– Ahmet Cetin, Commented Jan 7, 2016 at 20:27
No errors in the console. Just loads the header and routing is not working. — Gaurav Ram
– Gaurav Ram, Commented Jan 7, 2016 at 20:30
Did you setup a default view? angular.module('fleetOperate').config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/main");[...]}); — Oliver
– Oliver, Commented Jan 7, 2016 at 20:37

Maher · Accepted Answer · 2016-01-07 20:39:10Z

1

Update your UI Router:

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

})
});

answered Jan 7, 2016 at 20:39

Maher

2,5471 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Ram Over a year ago

Hi Maher, can you please check this question and help me what the mistake is in the code? Thank you. stackoverflow.com/q/34668416/5724169

Collectives™ on Stack Overflow

UI routing not working, angular JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related