Question

我试图在Angular中使用ui-router来生成<ui-view></ui-view>中包含多个模板的单个页面，但无法加载单个模板。它只是提供一个没有JavaScript错误的空白页面，甚至导航栏也没有出现。

我在堆栈上经历了很多关于此的问题，但即使应用他们的解决方案也无济于事：

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<!--stylesheets-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="assets/css/owl.css">
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
    <link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.1.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/fonts/eleganticons/et-icons.css">
    <link rel="stylesheet" type="text/css" href="assets/css/cardio.css">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.min.css">
</head>
<body ng-app="myShelfApp">
    <nav class="navbar">
        <div class="container" >
            <!-- Brand and toggle get grouped for better mobile display -->
            <!-- <div class="navbar-header">
                <button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="assets/img/logo.png" data-active-url="assets/img/logo-active.png" alt=""></a>
            </div> -->
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right main-nav">
                    <li><a ui-sref="home">Home</a></li>
                    <li><a ui-sref="devices">Search</a></li>
                    <li><a ui-sref="addDevice">Add</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <div ui-view></div>

    <section id="service" class="section section-padded">
    <!-- Holder for mobile navigation -->



    </section>
    <!-- scripts -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="assets/js/angular.js"></script>
      <script src="assets/js/angular-ui-router.js"></script>
      <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
      <script src="app.js"></script>
      <script src="service/device.service.js"></script>
      <script src="controller/main.controller.js"></script>
      <script src="controller/shelf.controller.js"></script>
      <script src="controller/device.controller.js"></script>
      <script src="controller/newdevice.controller.js"></script>

</body>
</html>

这是app.js

(function (){
   "use strict";
    var app=angular.module("myShelfApp",['ui.router','ngTable',"deviceservice"]);


    // app.service('DeviceFactoryService',deviceservice(DeviceFactory));
    app.config(['$stateProvider', '$urlRouterProvider', function   ($stateProvider,$urlRouterProvider){
          $urlRouterProvider.otherwise("/");

        $stateProvider
        .state("home",{
            url:"/",
            templateUrl:"main.html",

        });
    }]);

    app.run(function($rootScope) {
     $rootScope.$on("$stateChangeError", console.log.bind(console));
    });

})();

这是我的模板：

    <div id="home" ng-Controller="mainController">
        <div class="container" >
            <div class="row text-center title">
                <!--<h2>Services</h2>
                <h4 class="light muted">Achieve the best results with our wide variety of training options!</h4>-->
                <div class="jumbotron">
                  <h1 class="display-3"> Device Farm </h1>
                  <hr class="my-4">
                  <p><span class="label label-info">{{count}}</span></p>
                </div>
            </div>
            <div class="row services">
                <div class="col-md-4">
                    <a href="/devices" >
                    <div class="service">
                        <div class="icon-holder">
                            <img src="assets/img/icons/phone-blue.png" alt="" class="icon">
                        </div>
                        <h3 class="description">My Devices</h3>
                    </div>
                    </a>
                </div>
                <div class="col-sm-4">
                <a href="/add_device">
                    <div class="service">
                        <div class="icon-holder">
                            <img src="assets/img/icons/add-blue.png" alt="" class="icon">
                        </div>
                        <h3 class="description">Add Device</h3>
                    </div>
                </a>
                </div>
                <div class="col-md-4">
                    <a href="">
                    <div class="service">
                        <div class="icon-holder">
                            <img src="assets/img/icons/search-blue.png" alt="" class="icon">
                        </div>
                        <h3 class="description">Search Device</h3>
                    </div></a>
                </div>
            </div>
        </div>
        <div ></div>
    </div>

这是我的app.index.js，我将重定向到index.js

    var express=require("express");
    var app= express();
    var bodyParser = require('body-parser');    
    var methodOverride = require('method-override');
    var router=require('./app.routes.js');
    var port=8888;

    app.use(express.static(__dirname + '/public'));  
    app.use(bodyParser.urlencoded({'extended':'true'}));
    app.use(bodyParser.json());
    app.use(methodOverride());
    app.use((request,response,next)=>{
    console.log(request.headers)
    next()
    });
    app.use('/api',router);
    app.get('*',function(req,res){
    res.sendFile('index.html',{root:__dirname+'/public'});
    });
    app.listen(port,error);
    function error(err){
    if(err){
        console.log(`Something went wrong`,err);
    }

    console.log(`Server is running on ${port}`);
    }

Answer 1

所以我们找到了我的ui-router无法正常工作的原因。显然你不能声明app.module（'app'，['dependency']）甚至在你的控制器或其他模块中使用angular.modular（'app'，[]）也会覆盖你的主app.module而且因为这个我控件没有进入app.config以便ui-router工作。

参考答案：

Angular routing config function not called 进一步了解。谢谢你们

Ui-router没有生成检查所有选项的模板

1 个答案: