Page .html does not want to appear

1

I'm making an application with angularJS. I have pages being called, but a single one does not appear.

Here are 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><scriptsrc="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 where the .html files are

Andprintfromtheuser.htmlstructurewhereyouhavethelinktothepagethatdoesnotappear

    
asked by anonymous 08.01.2016 / 22:03

1 answer

2

For the Ui Router to work, the%% of typed in the address must be equal to url defined in url . In your case, you still have a number later, which I believe is the .state of the user, so you'll still need a id .

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 param of url , so you have an initial state even though you do not type anything in inicio . This way you do not need to login with the url without filling, leaving the application more dynamic.

In your specific case, I noticed that you are trying to access a url with a parameter: "updateUsuario / 2", I assume it is url of user to be updated.

For this, you need to set in the ID setting that 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 should also define the parameter, as follows:

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

Within your .state , 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 to not use controller blank, it is always good to give it a name, so you can also determine which ui-view will appear in which state .

ui-view="main

//e a configuração seria:

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

You'll probably be able to follow your view correctly. Hope it helps.

    
08.01.2016 / 22:38