Question

我有一个AngularJS / ExpressJS应用程序，似乎有路由问题。 login.ejs和signup.ejs是部分视图，而welcome.ejs是主模板（应在ui-view容器中加载这些视图）。理想情况下，/welcome会调出welcome.ejs页面（默认情况下，页面已经在容器内部有login.ejs部分视图代码，以便首先向用户显示登录表单）。 /welcome/login应显示welcome模板上的登录视图（基本上显示在/welcome中的内容），/welcome/signup应显示signup视图{1}} / welcome`页面（使用登录表单）。

authController.js：

welcome template. Instead, all URLs only show

相关的ExpressJS代码：

var app = angular.module("myapp.controllers.auth", [
  "ui.router"
]);

app.config([
  "$stateProvider",
  "$locationProvider",
  function($stateProvider, $locationProvider) {
    $stateProvider.state("welcome", {
      url: "/welcome",
      templateUrl: "/welcome",
      controller: "AuthController",
    })
    .state("login", {
      parent: "welcome",
      url: "/login",
      views: {
        "container@": {
          templateUrl: "auth/login",
          controller: "AuthController"
        }
      }
    })
    .state("signup", {
        parent: "welcome",
        url: "/signup",
        views: {
          "container@": {
            templateUrl: "auth/signup",
            controller: "AuthController"
          }
        }
      });
    $locationProvider.html5Mode(true);
  }
]);

它必须是我忽视的小东西，任何指针？

编辑：添加HTML代码

welcome.ejs：

var express = require("express");
var router = express.Router();

router.route(/\/welcome.*/)
  .get(function(req, res, next) {
    res.render("welcome");
  });

AUTH / login.ejs

<html>
<head>
  <base href="/">
</head>
<body ng-app="myapp">
  <div ui-view="container" class="auth-container">
    <span>Sign in</span>
    <form ng-submit="login()">
      <div class="form-group">
        <input type="text" ng-model="user.email" autofocus>
      </div>
      <div class="form-group">
        <input type="password" ng-model="user.password">
      </div>
      <button type="submit" class="btn btn-primary">Log In</button>
    </form>
    <a ui-sref="signup">Sign Up</a>
  </div>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <script type="text/javascript" src="/javascripts/app.js"></script>
  <script type="text/javascript" src="/javascripts/controllers/authController.js"></script>
  <script type="text/javascript" src="/javascripts/services/authService.js"></script>
</body>
</html>

AUTH / signup.ejs：

<span>Sign in</span>
<form ng-submit="login()">
  <div class="form-group">
    <input type="text" ng-model="user.email" autofocus>
  </div>
  <div class="form-group">
    <input type="password" ng-model="user.password">
  </div>
  <button type="submit" class="btn btn-primary">Log In</button>
</form>
<a ui-sref="signup">Sign Up</a>

Answer 1

看到context = context['related_tasks'] = ...提供代表根状态的/welcome文件（通常为welcome.ejs），您不需要具体的index.html状态。您的问题是因为您的网址通过welcome正则表达式路由重写到welcome.ejs而要求其下的任何状态网址都需要/\/welcome.*/前缀。只需设置抽象父状态即可设置/welcome网址前缀。

/welcome

或者，删除$stateProvider.state('welcome', { abstract: true, url: '/welcome' } .state("login", { parent: 'welcome', url: "/login", views: { "container@": { templateUrl: "auth/login", controller: "AuthController" } } }) .state("signup", { parent: 'welcome', url: "/signup", views: { "container@": { templateUrl: "auth/signup", controller: "AuthController" } } });状态，并使用welcome为所有状态网址添加前缀，例如

/welcome

AngularJS路线未显示正确的视图

1 个答案: