url中带有点的角度js状态提供程序不起作用答案

【问题标题】：angular js state provider with dot in url not workingurl中带有点的角度js状态提供程序不起作用
【发布时间】：2017-05-03 07:52:08
【问题描述】：

我正在使用 Angular js 状态提供程序。我想要这样的网址。 http://localhost:8080/state1/state1.html 。它说“无法获取 /state1/state1.html”。这是代码

$stateProvider
    .state('state1', {
        url: '/state1/state1.html',
        templateUrl: "partials/state1.html",
        controller: 'MyCtrl'
    });

当我删除 .html 时它工作正常。在这种情况下如何处理 dot。我正在使用节点服务器

谢谢

【问题讨论】：

如果你有一个404，这意味着你正在谈论templateUrl: "partials/state1.html"中的.html。问题来自您的服务器，而不是来自角度。
请阅读我更新的问题，这只是 url 的问题。当我在 url (/state1/state1) 中删除 .html 时，它工作正常
对不起，我不明白你为什么在 url 末尾添加 .html。

标签： angularjs node.js angular-ui-router

【解决方案1】：

    var routerApp = angular.module('routerApp', ['ui.router']);

    routerApp.config(function($stateProvider, $urlRouterProvider) {
        
        $urlRouterProvider.otherwise('/');
        
        $stateProvider

            .state('main', {
                url: '/',
                template: '...'
            })
        
            .state('home', {
                url: '/urlto/home.html',
                template: 'Home page'
            })
            
            .state('about', {
                url: '/urlto/about.html',
                template: 'about page'
            });
            
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

    <div ng-app="routerApp">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="about">About</a></li>
        </ul>
    </nav>

    <div class="container">

        <div ui-view></div>

    </div>
    </div>

对我来说似乎工作得很好。也许您对 HTML5 模式和服务器应用程序路由有问题？

【讨论】：

【解决方案2】：

带有点的 URL 可以正常工作。 Here in this plunker，状态 withdot 配置了 url /withdot.html，我添加了带有点的 url 参数只是为了更好地衡量。 url 规范中没有对点 (.) 的特定处理，而不是表示父/子关系的州名称中的点。

【讨论】：

【解决方案3】：

这是节点服务器或者前端路由器配置的问题，多发生在webpack-dev-server下，或者说它不完善。并根据RFC3986， unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~" 您无法将 . 转换为 %2e，除非您将其打包为您的自定义解决方案。

如果你的路由器是用history API前端实现的，你可以打包你的angular应用，然后在Nginx或Caddy服务器下编译，就可以正常工作了。

对于节点服务器或其他，您最好在路由器配置中指定*.*。

【讨论】：