Page . html does not want to appear

Question

Page . html does not want to appear

Asked 8 years, 5 months ago

Viewed 951 times

1

I’m making an application with Angularjs. I have pages being called, however, a single, does not appear.

Follow my codes:

app js.

var app = angular.module("vc", ["ui.router"]);

app.config(function($stateProvider){
$stateProvider
    .state("login", {
        url:"/",
        controller: "LoginController",
        templateUrl: "admin/views/login.html"
    })

    .state("painel", {
        url: "/painel",
        controller: "PainelController",
        templateUrl: "admin/views/painel.html"
    })

    .state("usuario", {
        url: "/usuario",
        controller: "UsuarioController",
        templateUrl: "admin/views/usuario.html"
    })

    .state("paises", {
        url: "/paises",
        controller: "PaisesController",
        templateUrl: "admin/views/paises.html"
    })

    .state("atualizarUsuario", {
        url: "/atualizarUsuario",
        controller: "AtualizarUsuarioController",
        templateUrl: "admin/views/atualizarUsuario.html"
    })


})

index.html

<html ng-app="vc">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/vc.css">
<body>
    <div ui-view></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="admin/js/app.js"></script>
<script src="admin/js/loginController.js"></script>
<script src="admin/js/painelController.js"></script>
<script src="admin/js/usuarioController.js"></script>
<script src="admin/js/atualizarUsuarioController.js"></script>
</html>

Follow print of where the . html files are

And print of the user.html structure where you have the link to the page that does not appear

how Voce type the url to access the app?

– celsomtrindade

2016/01/08 at 21:16
http://localhost:8888/systems/systems_web/Vigilantescomunitarios/index.html#/updateUsuario/2

– GustavoSevero

2016/01/08 at 21:18
Nothing appears in the browser console?

– Marco Aurélio Deleu

2016/01/08 at 21:25
No, nothing appears on the console. I’m very intrigued by this. Is the way to redo this part again? Because when there is no mistake, the way is to redo and the thing works hehehe

– GustavoSevero

2016/01/08 at 21:32

1 answer

Browser other questions tagged html angularjs

You are not signed in. Login or sign up in order to post.

by celsomtrindade • **8,038** points · Answer 1 · 2016-01-08T21:38:48+00:00

For the Ui Router to work, the url entered in the address, must be equal to url defined in .state. In your case, you still have a number after, which I believe is the id user, so you will still need a param.

Starting from the basics, I recommend you use the following code:

$urlRouterProvider.when('', '/inicio'); //Colocar o nome da URL, não do state
$urlRouterProvider.when('/', '/inicio'); //Colocar o nome da URL, não do state
$urlRouterProvider.otherwise('/Erro'); //Quando não existir nenhum, direciona para página de erro

This will redirect you to the state with url of inicio, so you have an initial state even if you don’t type anything into url. This way you don’t need to log in with the url without filling in, making the application more dynamic.

In your specific case, I noticed that you’re trying to access a url with a "upgrade/2" parameter, I assume ID user to be updated.

For this, you need to set in the configuration of .state it will have a parameter with a given name. Example:

.state('meuestado', {
    url:'/suaurl/:id'
})

And in the link that will direct to this page you must also set the parameter, this way:

ui-sref="meuestado({id: usuario.id})" //O nome 'usuario.id' é a sua referência ao id do usuário

Within your controller, you can access this value as follows:

$state.current.params.id; //Basta injetar o $state na inicialização do controller

Another recommendation I make is not to use the ui-view blank, it’s good to always assign a name to it, so you can also determine which state will appear in which view.

ui-view="main

//e a configuração seria:

.state('inicio', {
    url:'/Inicio',
    views: {
        "main": {
            templateUrl: "meu/caminho/inicio.html"
        }
    }
}

Probably with that you’ll be able to follow your own .state correctly. I hope it helps.