UI路由不起作用，角度JS答案

【问题标题】：UI routing not working, angular JSUI路由不起作用，角度JS
【发布时间】：2016-01-07 20:24:44
【问题描述】：

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

appModule

"use strict";

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

界面路由

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

【问题讨论】：

它是否在控制台中给出任何错误消息，或者什么也不做？
控制台中没有错误。只是加载标题和路由不起作用。
您是否设置了默认视图？ angular.module('fleetOperate').config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/main");[...]});

标签： angularjs angularjs-directive angularjs-scope angular-ui-router angularjs-routing

【解决方案1】：

更新您的 UI 路由器：

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

})
});

【讨论】：

嗨，Maher，你能检查一下这个问题并帮助我代码中的错误是什么吗？谢谢你。 stackoverflow.com/q/34668416/5724169