Angular UI-Routing不会将我的部分加载到视口中

问题描述：

我有一个Node.JS + Express后端，并且正在尝试设置角度前端。Angular UI-Routing不会将我的部分加载到视口中

我有一个基本的HTML模板称为common.html：

<!DOCTYPE HTML> 
    <html> 
     <head> 
      <title>Watson-Amadeus</title> 
      <link rel = "stylesheet" href = "css/index.css" /> 
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
      <link rel = "script" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" /> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 
      <script src="js/amadeus.js"></script> 
     </head> 
     <body ng-app = "watson_amadeus"> 
      <div ui-view> 
      </div> 
     </body> 
    </html>

js/amadeus.js然后貌似

var app = angular.module("watson_amadeus", ["ui.router"]); 
app.config(($stateProvider) => { 
    var introState = { 
     name: "intro", 
     url: "/intro", 
     templateUrl: "../index.html" 
    } 

var amadeusState = { 
    name: "amadeus", 
    url: "/amadeus", 
    template: "../watson-amadeus.html" 
} 

$stateProvider.state(introState); 
$stateProvider.state(amadeusState); 
}); 

app.controller("amadeus_controller", ($scope) => { 
    $scope.messages = [ 
         {text: "Yo"}, 
         {text: "sup?"} 
        ]; 
    console.log("controller"); 
    $scope.send_message =() => { 
     $scope.messages.push({text: $scope.msg_to_send}); 
     $scope.msg_to_send = ""; 
    }; 
});

intro.html和watson-amadeus.html然后只是在其中一些HTML谐音。我的节点服务器的代码如下所示：

var express = require('express'), 
amadeus = require('./rest/amadeus.js'), 
body_parser = require('body-parser'); 

var app = express(); 

app.use(body_parser.json()); 
app.use(body_parser.urlencoded({extended: false})); 
app.use(express.static("public")); // Use static pages from the public directory 

app.post("/api/amadeus/", amadeus.send_message); 
app.get("*", (req, res) => { 
    res.sendFile(__dirname + "/public/common.html"); 
}); 

app.listen(8080); // Set the server to listen on port 8080

最后，我的目录结构是相当简单：

project_dir 

    public 

    js 

     amadeus.js 

    common.html 
    index.html 
    watson-amadeus.html 

    node_server.js 
    package.json

当我启动Web服务器并尝试http://localhost:8080/intro，我只是一个空白屏幕映入眼帘，并查看页面源代码显示它只是加载common.html而不会将index.html内容放入视口中，因为它应该如此。更;当我做时，我得到index.html的内容，但没有来自common.html的部分。

我是新来的角，所以这可能是一些基本的东西，但我不知道我在哪里搞砸了。

amadeusState正在使用模板而不是templateUrl，就像在索引中尝试changeit一样。 –

谢谢，但不幸的是，这并没有奏效。 – Makcheese

答

一旦你定义app.use(express.static('public'));，Express服务器会加载index.html，自动，所以app.get("*", (req, res) => { res.sendFile(__dirname + "/public/common.html"); });将无法运行。

我建议将common.html重命名为index.html，因为它是您的主要html。

默认ui-route将增加#!到URL，尝试http://10.8.8.8:8080/，之后index.html已经成功加载，该URL实际上变为http://10.8.8.8:8080/#!/。因此，您可以通过http://10.8.8.8:8080/#!/intro访问您的/intro。

如果你想删除#!，你会花费很大的努力，你可以研究下一步。祝你好运！

开始=>

啊，我没有意识到＃！事情，并感谢与重命名的意见！我会放弃它。 – Makcheese

是的，弹出＃！在工作的网址！现在我必须弄清楚如何摆脱它。但至少我知道这个问题是什么。非常感谢！ – Makcheese

Angular UI-Routing不会将我的部分加载到视口中

相关推荐