使用 ui.router AngularJs 进行路由答案

【问题标题】：Routing using ui.router AngularJs使用 ui.router AngularJs 进行路由
【发布时间】：2016-05-22 01:28:57
【问题描述】：

我正在尝试在我的网络应用程序中创建一个多步骤表单以进行注册。我正在使用ui.router 来实现这一目标。

当用户首先访问我的域时，例如 www.mydomain.com。我的 node.js 服务器呈现 index.ejs 页面。

app.get('/',function(req, res) {
    res.render('index.ejs'); // load the index.ejs file
});

现在重要的是要知道 index.ejs 也是我在ui-view 中注入我的观点的地方：

<!doctype html>
<html ng-app="myApp">
<head>
<title>Node Authentication</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-animate.min.js"></script>
<link href="./css/side-menu.css" rel="stylesheet" type="text/css">
<script src="./js/mainApp.js"></script>
<script src="./js/controllers/knowledgeBaseCtrl.js"></script>
<script src="./js/services/knowledgeBaseFilter.js"></script>

</head>
<body ng-controller="projectsFilterCtrl">
<div class="container">
    <div>
    <h2>Our multistep form</h2>

        <div id="status-buttons" class="text-center">
            <a ui-sref-active="active" ui-sref="signup.stepOne"><span>1</span> Step One</a>
            <a ui-sref-active="active" ui-sref="signup.stepTwo"><span>1</span> Step Two</a>
            <a ui-sref-active="active" ui-sref="login"><span>2</span> login </a>
        </div>
    </div>
    // INJECT VIEW HERE
    <div ui-view></div>
   </div>

</script>
</body>
</html>

我的 AngularJs 控制器：

var knowledgeBaseCtrl = angular.module('knowledgeBaseCtrl', ['ngAnimate','ui.router'])

knowledgeBaseCtrl.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('login', {// this will be the wrapper for our wizard
    url: '/login',
    templateUrl: './login.ejs', 
})

.state('signup', {// this will be the wrapper for our wizard
    url: '/signup',
    templateUrl: './index.ejs',
})

.state('signup.stepOne', {// this will be the wrapper for our wizard
    url: '/stepOne',
    templateUrl: './stepOne.ejs',
})

 .state('signup.stepTwo', {// this will be the wrapper for our wizard
    url: '/stepTwo',
    templateUrl: './stepTwo.ejs',
});

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

现在的问题：

现在，当我转到 www.mydomain.com/#/signup/stepOne 时，它会加载两次内容，如下图所示。

我认为这是因为我的 node.js 服务器加载了 index.ejs，然后我的 ui.router 再次加载了 index.ejs，从而复制了页面。

下图不应显示菜单和标题两次

我怎样才能解决这个问题？

【问题讨论】：

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

【解决方案1】：

在我看来，您的路由器配置有问题...

.state('signup', {// this will be the wrapper for our wizard
    url: '/signup',
    templateUrl: './index.ejs',
})

.state('signup.stepOne', {// this will be the wrapper for our wizard
    url: '/stepOne',
    templateUrl: './stepOne.ejs',
})

.state('signup.stepTwo', {// this will be the wrapper for our wizard
    url: '/stepTwo',
    templateUrl: './stepTwo.ejs',
});

如果您将 signup.stepOne 和 signup.stepTwo 设为它们自己的状态，而不是其父“注册”的子状态，那么这可能会解决问题。

但是，如果你真的想实现子状态，那么我相信父状态应该是抽象状态。

.state('signup', {// this will be the wrapper for our wizard
    abstract: true
    url: '/signup', // This provides the default URL for children but it can be overriden
    templateUrl: './index.ejs', // This provides the default template for children but it can be overriden
})

希望对你有帮助

另请参阅 Joe Clay 的回答

【讨论】：

【解决方案2】：

不要将您的 index 文件放在路由中 - 您设置为模板的任何内容都将全部注入到 ui-view 中，因此您实际上是在视图中嵌套了应用程序的第二个实例。 .您的index.ejs 应该只包含在您的应用程序的每个部分都相同的内容。

您应该创建一个 signup.ejs 模板，该模板仅包含应在注册页面上显示的内容，以及另一个您希望注入子视图的 ui-view。

【讨论】：

这个问题的一个例子 - 如果你现在转到www.mydomain.com/#/signup，ui-view 将加载该应用程序的另一个副本，它也在注册视图中，它意味着它再次加载应用程序，这意味着它再次加载视图等。然后您的浏览器崩溃：p
@JoeClay 谢谢你的评论。伙计，这条路线令人困惑！有机会获得 jsFiddle 或代码示例吗？将不胜感激。
我会尝试在午休时间写点东西！
这是一个非常基本的如何正确执行嵌套视图的示例：plnkr.co/edit/2DbSX56DDgNfwvgJ9i6O?p=preview。关键要点是您应该永远在您的路线模板中包含index.html。如果您还有任何问题，请告诉我。

【解决方案3】：

请在您的路线或视图中添加控制器名称

$routeProvider .when('/登录', { 控制器：'stepOneController'，模板网址：'./stepOne.ejs' })

【讨论】：