UI 路由不工作，angular JS

Question

我正在尝试通过 UI 路由显示 main.html 模板，但由于某种原因无法正常工作。有人可以指出我的代码中的错误吗？谢谢。

appModule

"use strict";

angular.module("fleetOperate", ["ui.router", "mainModule"]);

UI路由

"use strict";

angular.module('fleetOperate').config(function ($stateProvider) {

    $stateProvider
    .state('main', {
        url: '/main',
        templateUrl: 'app/main/main.html'

    })

});

主模块

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

Answer 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'

})
});

UI 路由不工作，angular JS

UI routing not working, angular JS

angularjs

angularjs-directive

angularjs-scope

angular-ui-router

angularjs-routing