Question

我正在用angular js构建一个简单的应用程序，$routeProvider无法正常工作.. 我已经看过很多关于它的问题，但是找不到我的问题，所以我决定打开一个新问题。

只是产品页面不加载。

查看我的代码

app.js

var app = angular.module("app", ['ngRoute', 'ui.router', 'ngCookies']);
app.config(['$routeProvider'],function($routeProvider, $locationProvider){
    $routeProvider
        .when("/produto", {templateUrl:'/module/listaProdutoComponent/listaProduto.html'})
        .otherwise({redirect:'/'});

    $locationProvider.html5Mode(true);
});

loginController.js

var app = angular.module("app", ['ngRoute']);
app.controller("loginController", function ($http, $location, $q) {
    var vm = this;
    vm.usuario = {};

    vm.autenticar = function () {
        $http.post("/autenticar", vm.usuario).then(function (response) {
                $q.when();        
                location.href = "home#!/";
            },
            function (response) {
            });

    };
});

login.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <base href="/"></base>
    <title>Adm</title>
    <link rel="stylesheet" href="./bibliotecas/jQuery/angular/bootstrap/css/mdb.min.css">
    <link rel="stylesheet" href="./bibliotecas/jQuery/angular/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./bibliotecas/jQuery/angular/bootstrap/css/style.min.css">


</head>
<body>
<div ng-controller="loginController as vm" ng-cloak>
    <br>
    <div class="row">
        <div class="container-fluid">
            <div class="d-flex justify-content-lg-center">
                <div class="card w-50">
                    <div class="card-body ">
                        <form class="text-center border border-light p-5" method="post" ng-submit="vm.autenticar()">
                            <div class="md-form">
                                <input required type="text" maxlength="50" id="inputlogin" class="form-control" ng-model="vm.usuario.login">
                                <label for="inputlogin">Login</label>
                            </div>
                            <div class="md-form">
                                <input required maxlength="8" type="password" id="inputsenha" class="form-control" ng-model="vm.usuario.senha">
                                <label for="inputsenha">Senha</label>
                            </div>
                            <div class="d-flex justify-content-around">
                                <div>
                                    <a href="">Esqueceu a senha?</a>
                                </div>
                            </div>
                            <button class="btn btn-blue-grey btn-block my-4" type="submit">Entrar</button>
                            <a href="">Registre-se</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/jquery.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular-cookies.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular-route.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular-ui-router.min.js"></script>


<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/mdb.min.js"></script>

<script type="text/javascript" src="./controllerTemplate/loginController.js"></script>
<script type="text/javascript" src="./interceptor/token-interceptor.js"></script>

</html>

最后

homeController.js

app.controller("homeController", function ( $http, $location, $q,usuario,$cookies) {

    var vm = this;
    vm.usuario={};

    vm.goToPagina = function(pagina) {
        $location.path(pagina);
    };   
});

和..

home.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <base href="/"></base>
    <title>Adm</title>

    <link rel="stylesheet" href="./bibliotecas/jQuery/angular/bootstrap/css/mdb.min.css">
    <link rel="stylesheet" href="./bibliotecas/jQuery/angular/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./bibliotecas/jQuery/angular/bootstrap/css/style.min.css">

    <link rel="stylesheet" href="./cssTemplate/home.css">

</head>
<body>
<div ng-controller="homeController as vm">
    <nav class="navbar navbar-expand-lg navbar-dark blue-grey">      
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">        
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarCadastros" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        Cadastros
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarCadastros">
                        <a class="dropdown-item" ng-click="vm.goToPagina('produto')" >Produtos</a>
                    </div>
                </li>

            </ul>
        </div>

    </nav>
</div>

<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular-cookies.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular-route.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/angular-ui-router.min.js"></script>

<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bibliotecas/jQuery/angular/bootstrap/js/mdb.min.js"></script>

<script type="text/javascript" src="./app.js"></script>

<script type="text/javascript" src="./controllerTemplate/homeController.js"></script>
<script type="text/javascript" src="./module/listaProdutoComponent/listaProdutoController.js"></script>



<div class="container" ng-view=""></div>

</body>
</html>

Answer 1

您有两个不同的应用程序，分别在login和home.html中提到了ng-app。

在这种情况下，您应该定义一个ng-app和一个模块。不要在两个不同的.js文件中重新声明模块。只需使用相同的模块并声明控制器即可。

由于重新排列您的代码是一项艰巨的任务，因此我在下面提供了一个示例存储库。

var app = angular.module("myApp", ["ngRoute"])
app.config(function($routeProvider) {
  $routeProvider.when('/', {
      template: `<h1>Login</h1>`,
      controller: 'loginCtrl'
    })
    .when('/register', {
      template: `<h1>Register</h1>`,
      controller: 'RegisterCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });

});
app.controller('loginCtrl', function($scope) {
  $scope.name = "Login";

});
app.controller('RegisterCtrl', function($scope) {
  $scope.name = "Register";

})

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS User Registration and Login Example  </title>
</head>

<body>
  <a href="#/login">Login</a>
  <a href="#/register">Register</a>
  <div class="mainContainer" ng-view></div>
  <script src="//code.angularjs.org/1.2.26/angular.js"></script>
  <script src="https://code.angularjs.org/1.2.26/angular-route.min.js"></script>
</body>

</html>

路由提供商不重定向

1 个答案: