Question

我有一个带有2个部分的Angular应用程序（一个用于登录，另一个用于发布消息）。

那么为什么帖子有效但是登录没有？控制台没有给我任何东西。

Plunker：http://plnkr.co/edit/tPbHaUrn73wGUPsY8mqo?p=preview

感谢您的帮助！

Angular app：

    angular.module('app', [
  'ngRoute'
])


angular.module('app')
.config(function ($routeProvider) {
  $routeProvider
  .when('/', { controller: 'PostsCtrl', templateUrl: 'posts.html' })
  .when('/login', { controller: 'LoginCtrl', templateURL: 'login.html' })
  .otherwise({ redirectTo : '/' })
})

angular.module('app')
.controller('LoginCtrl', function ($scope, $http) {

  console.log('LoginCtrl Triggered')

})

angular.module('app')
.controller('PostsCtrl', function ($scope, $http) {

  console.log('PostsCtrl Triggered')

})

app.html

<!DOCTYPE html>
<html>
<head>
<title>Posts</title>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="/app.css">
</head>

<body ng-app="app">

  <nav class="navbar navbar-default">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="/#/">Posts</a></li>
        <li><a href="/#/login">Login</a></li>
      </ul>
    </div>
    </nav>

<div ng-view></div>

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="/app.js"></script>

</body>
</html>

登录html和发布html单独正确显示，所以问题不在那里

Answer 1

templateURL路线中的问题是templateUrl vs /login。这就是吸食者：

http://plnkr.co/edit/FMNsO2nh8LtRzsPuxZQ3?p=preview

我还修复了你的index.html;你在顶部有一个额外的<head>。

Answer 2

主要问题是angular.module（'app'）定义了多次。只创建一次模块，然后将配置，控制器等添加到所有和templateUrl中，并将其保存为templateURL

以下代码适用于登录和发布。它会加载两个视图。

angular.module('app', [
  'ngRoute'
])


//angular.module('app')
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'PostsCtrl',
      templateUrl: 'posts.html'
    })
    .when('/login', {
      controller: 'LoginCtrl',
      templateUrl: 'login.html'
    })
    .otherwise({
      redirectTo: '/'
    })
})

//angular.module('app')
.controller('LoginCtrl', function($scope, $http) {

  console.log('LoginCtrl Triggered')

})

//angular.module('app')
.controller('PostsCtrl', function($scope, $http) {

  console.log('PostsCtrl Triggered')

});

我也更新了Plunker中的代码。请看一下。

http://plnkr.co/edit/4TayS8Anonhd0ehAzBVP?p=preview

希望这能解决你的问题。

Angular app显示一页但不显示另一页

2 个答案: