路由使用ui.router AngularJs

我想在註冊我的web應用程序創建一個多步的形式。我使用ui.router來實現這一點。路由使用ui.router AngularJs

當用戶進入到我的域名最初例如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因此複製的頁面。

下面的圖片不應顯示菜單和標題兩次

我怎樣才能解決這個得到什麼？

來源

2016-02-11 Skywalker

這看起來像你的路由器的配置給我一個問題...

.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 
})

希望這有助於

又見喬·克萊的答案

來源

2016-02-11 10:28:38 danday74

不要把你的index文件的路徑 - 您所有的設定作爲模板將全部注入ui-view，所以你將視圖中的第二個實例嵌入視圖中。您的index.ejs應該只包含您的應用的每個部分都相同的內容。

您應該創建一個signup.ejs模板，其中只包含應在註冊頁面上顯示的內容，另一個ui-view您希望注入子視圖。

來源

2016-02-11 10:28:56

以及發現那個男人 – danday74

爲什麼這是一個問題的一個例子 - 因爲它現在代表，如果你去'www.mydomain.com /＃/ signup'，'UI-view'會加載應用程序的另一個副本，這也在註冊視圖上，這意味着它再次加載應用程序，這意味着它再次加載視圖等等。然後您的瀏覽器崩潰：p –

@JoeClay感謝您的評論。這條路線讓人感到困惑！任何獲得jsFiddle或代碼示例的機會？這將非常感激。 – Skywalker

請在您的路線或你的觀點

$ routeProvider添加控制器名稱。當（ '/登錄'，{ 控制器： 'stepOneController'， templateUrl：」 ./stepOne。EJS' }）

來源

2016-02-11 10:33:12

路由使用ui.router AngularJs

回答

相關問題