无法理解 ui-router 与 Angular JS 的行为

Question

我是 angular 的新手，正在尝试了解如何使用 ui-router。

我有以下设置

angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datetimepicker', 'ngResource'])

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
        // route to show our basic form (/form)
        .state('form', {
            url: '/',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })
        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
       .state('form.date', {
            url: 'date',
            templateUrl: 'views/form-date.html'
        })
        // url will be /form/interests
        .state('form.address', {
            url: 'address',
            templateUrl: 'views/form-interests.html'
        })
        // url will be /form/payment
        .state('form.payment', {
            url: 'payment',
            templateUrl: 'views/form-payment.html'

        }).state('create', {
            url:'create',
            templateUrl: 'views/create.html',
            controller:'formController'
        });

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/');
})

这在我最初加载页面时工作正常，但如果我输入其中一条路线，例如localhost:3000/date 我没有正确的看法。当我到达 localhost:3000/form/date

时它也不起作用

我收到以下错误：开发人员控制台中出现无法获取 /date 和 404 未找到错误。

谁能帮帮我？

这是我的 html 页：

home.html

<div class="page-header text-center">

      <!-- the links to our nested states using relative paths -->
      <!-- add the active class if the state matches our ui-sref -->
         <div id="status-buttons" class="text-center">
            <a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
            <a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
            <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
           </div>
 </div>            
   <form name="myform" id="signup-form" stripe:form="saveCustomer" novalidate>
       <!-- our nested state views will be injected here -->
       <div id="form-views" ui-view></div>
    </form>

谁能解释一下这是怎么回事？

Answer 1

试试 localhost:3000/#/date 和 localhost:3000/#/form/date。

除非您指定 $locationProvider.html5Mode(true);，否则您应该为 angular 应用程序使用 # root。但是，Html5Mode 有一些限制，例如，您将无法使用 $urlRouterProvider.otherwise(...);。检查 this post。如果您是 Angular 的新手，我不建议您使用 Html5Mode

无法理解 ui-router 与 Angular JS 的行为

cannot understand ui-router behaviour with Angular JS

javascript

url-routing

node.js

angularjs

angular-ui-router