Question

我有一个 index.vm ，它包含两个模板，tpl-index和tpl-cadastrar。路径在Spring中定义，但当我访问路径/cadastrar e /时，页面显示相同的模板。
我需要帮助才能知道为什么会这样？

index.vm

<!DOCTYPE html>
<html ng-app="oknok">
<head lang="pt-br">
    <meta charset="UTF-8"/>
    <title>OKNOK Admin</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="js/controller.js"></script>
</head>

<script type="text/ng-template" id="/tpl-index.tpl">
<div class="container" ng-controller="indexController" data-ng-init="init()">
    <h2>Listagem de ve&iacute;culos</h2>
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>Nome</th>
            <th>Tipo</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="x in resultado">
            <td ng-model="nome">{{x.nome}}</td>
            <td ng-model="tipo">{{x.tipo}}</td>
            <td ng-model="lixeira">
                <span class="glyphicon glyphicon-trash"
                      ng-click="excluir(resultado, $index, x._links.self.href)"></span>
                <span class="glyphicon glyphicon-search" ng-click="visualizar(x._links.self.href)"></span>
            </td>
        </tr>
        </tbody>
    </table>

    <div align="right">
        <button type="button" class="btn btn-primary" ng-click="adicionarNovo()">Adicionar novo</button>
    </div>
</div>
</script>

<script type="text/ng-template" id="/tpl-cadastrar.tpl">
    <h1>Cadastro de ve&iacute;culos</h1>

    <div class="col-xs-4" ng-controller="veiculoController">
        <label for="nome">Nome:</label>
        <input type="text" class="form-control" ng-model="nome"><br>
        <label for="tipo">Tipo:</label>
        <input type="text" class="form-control" ng-model="tipo"><br>
        <br>

        <h3>Ag&ecirc;ncias</h3>
        <div>
            <input type="text" ng-model="pesquisar" class="form-control" placeholder="Buscar ag&ecirc;ncias..">
            <br>
            <table>
                <th ng-repeat="k in selecionados">
                    <span class="label label-default" ng-click="removerAgencia(k)">{{k.nome}}</span>
                </th>
            </table>
            <br>
            <ul ng-repeat="j in resultado | filter: pesquisar" class="list-group">
                <li ng-show="pesquisar.length > 0" class="list-group-item" ng-click="selecionarAgencia(j.nome)">{{j.nome}}</li>
            </ul>
        </div>
        <br>

        <h3>Contatos</h3>
        <br>
        <div ng-repeat="x in contatos">
            <form class="form-horizontal" role="form">
                <h4>Contato {{x.numero}}</h4>
                <div class="form-group">
                    <label class="control-label col-sm-2">Nome:</label>

                    <div class="col-sm-10">
                        <input type="text" class="form-control" ng-model="x.nome">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Email:</label>

                    <div class="col-sm-10">
                        <input type="email" class="form-control" ng-model="x.email">
                    </div>
                </div>
            </form>
        </div>

        <button type="button" class="btn btn-xs btn-primary" ng-click="novoContato()">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        <button type="button" class="btn btn-xs btn-danger" ng-click="excluirContato()">
            <span class="glyphicon glyphicon-minus"></span>
        </button>

        <br>
        <br>
        <button type="button" class="btn btn-default" ng-click="cancelar()">Cancelar</button>
        <button type="button" class="btn btn-success" ng-model="salvar" ng-click="salvar()">Salvar</button>
    </div>
</script>
<body>

<div ng-view></div>
</body>
</html>

弹簧

@Controller
@RequestMapping("")
public class IndexAPI {

    @RequestMapping(value = "", method = RequestMethod.GET)
    public ModelAndView getIndex() {
        return new ModelAndView("index");
    }

    @RequestMapping(value = "/cadastro", method = RequestMethod.GET)
    public ModelAndView cadastro() {
        return new ModelAndView("index");
    }

}

我的路线

    oknok.config(function($routeProvider) {
    $routeProvider.when('/',{
        controller:'indexController',
        templateUrl:'/tpl-index.tpl' // The ng-template id
    }).when('/cadastro',{
        controller: 'veiculoController',
        templateUrl: '/tpl-cadastrar.tpl' // The ng-template id
    });
});

使用AngularJS的路由器

0 个答案: