Angular 应用程序显示一页但不显示另一页答案

【问题标题】：Angular app displays one page but not the otherAngular 应用程序显示一页但不显示另一页
【发布时间】：2015-08-27 22:36:51
【问题描述】：

我有一个 Angular 应用程序，其中包含 2 个部分（一个用于登录，一个用于发布消息）。

那么为什么 Posts 可以工作，而 Login 不能呢？控制台没有给我任何东西。

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

Angular 应用：

    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>

【问题讨论】：

当您说它不适用于 loginctrl 时，是当您单击登录链接时，还是您希望该服务在 app.html 中工作？
当我点击登录时，它应该显示 login.html。相反，它什么也不做。控制台是空的。所以我想这可能是路由的问题，但是 Posts 也不应该工作。好困惑。
我将其简化并放入 plunker：plnkr.co/edit/tPbHaUrn73wGUPsY8mqo?p=preview
你到底为什么要在 StackOverflow 上发布丑陋的源代码？
您在登录路径templateURL 配置键中有错字。应该是templateUrl ~ plnkr.co/edit/I8FjbDj9hMaJoGgvII6i?p=preview。如果您没有混淆问题中的代码会更容易查看

标签： angularjs angularjs-routing

【解决方案1】：

问题是templateURL 与templateUrl 在您的/login 路由中。这是笨蛋：

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

我还修复了你的index.html；你在顶部多了一个<head>。

【讨论】：

【解决方案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

希望这能解决您的问题。

【讨论】：

嗨，Karthi，我实际上将所有这些文件放在单独的 js 文件中，这些文件会吞咽然后合并和丑化，这就是为什么它会重复这些东西，任何人，谢谢您的回答！