Question

我有一个mean-stack项目。在我的index.js中，我最终还是

router.get('*', function(req, res) {
    res.sendfile('./views/index.html');
})
module.exports = router;

现在，我希望通过https://localhost:3000/1/addin/*处理与./views/addinIndex.html匹配的所有网页，我希望引用不同的外部文件并定义不同的模块。因此，我添加了另一个router.get：

router.get('/1/addin/*', function (req, res) {
    res.sendfile('./views/addinIndex.html')
})
router.get('*', function(req, res) {
    res.sendfile('./views/index.html');
})
module.exports = router;

这是addinIndex.html：

<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
    <script> 
        jQuery(document).ready(function () {
            angular.bootstrap(document, ['app']);
            console.log("bootstrapped")
        })
        app = angular.module('app', ['ui.router'])
        app.config(['$stateProvider', function($stateProvider) {
            $stateProvider
                .state('addinHome1', {
                    url: '/1/addin/home',
                    template: 'addinHome1'
                })
                .state('addinHome2', {
                    url: '/addin/home',
                    template: 'addinHome2'
                })
                .state('addinHome3', {
                    url: '/home',
                    template: 'addinHome3'
                })
        }])
    </script>
</head>
<body>
    abcde
    <ui-view ng-cloak></ui-view>
</body>
</html>

但是，当我运行https://localhost:3000/1/addin/home时，它会显示abcde而没有其他内容，而在控制台中会打印bootstrapped。

有谁知道什么是错的？我可以定义一个额外的addinIndex.html，因为我已经有了index.html吗？

Answer 1

是的，可以根据路线提供不同的索引。但为此你必须从网址中删除#。

为此，请按照以下步骤操作。

我们将使用$ locationProvider模块并将html5Mode设置为true。
```
// use the HTML5 History API
$locationProvider.html5Mode(true);
```
要使用相对链接链接您的应用程序，您需要在文档中设置一个。在您的角度配置中添加以下代码。
```
<base href="/">
```

在1个项目中制作2个模块

1 个答案: