Encaminhamento usando ui.router AngularJs

Question

Encaminhamento usando ui.router AngularJs

Estou a tentar criar um formulário multi-passos na minha aplicação web para registo. Estou a usar ui.router para conseguir isso.

Quando um utilizador vai para o meu domínio no início, por exemplo www.mydomain.com o meu nó.o servidor js dá o índice.ejs page.

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

Agora, o importante é saber o índice .ejs é também onde estou a injectar as minhas opiniões em 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>

o meu controlador 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');
});

Agora a questão:

Agora quando eu ... vá para o www.mydomain.com/#/signup/stepOne que carrega o conteúdo duas vezes como você pode ver na imagem abaixo.

Acho que é por causa do meu nódulo.o servidor js carrega o índice.ejs e depois a minha iu.o router carrega de novo o índice.ejs, portanto, duplicando a página.

a imagem abaixo não deve mostrar o menu e o título duas vezes

Como posso contornar isto?

0

javascript angularjs node.js angular-ui-router

Author: Skywalker, 2016-02-11

Source

3 answers

score 1 · Answer 1

Não coloque o seu ficheiro {[[0]} numa rota-tudo o que definir como modelo será injectado na totalidade em ui-view, por isso está efectivamente a aninhar uma segunda instância da sua aplicação dentro da janela tal como está. O seu {[2] } só deve conter o conteúdo idêntico em cada parte do seu aplicativo.

Deverá criar um modelo signup.ejs que contenha apenas o conteúdo que deverá ser apresentado nas páginas de inscrição, com outro ui-view onde deseja que as vistas para crianças sejam injectar.

score 0 · Answer 2

Por favor adicione o nome do controlador nas suas rotas ou nas suas vistas

$RouteProvider .quando ('/login', { controlador: "stepOneController", templateUrl:".- stepOne.ejs" })

score 0 · Answer 3

Isto parece-me um problema com a configuração do router ...

.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',
});

Se te inscreveres.stepOne e inscreva-se.stepTwo um estado em seu próprio direito e não Estados filhos de seu pai "inscrever", então isso vai resolver o problema. No entanto, se você realmente quer implementar Estados infantis, então, eu acredito, O Estado-mãe deve ser um estado abstrato.

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

Espero que isto ajude. Veja Também a resposta de Joe Clay.