Angular app displays one page but not the other

147 views Asked by At

I have an Angular app with 2 partials (one to log in and one to post messages).

So why does Posts work but Login doesn't? Console doesn't give me anything.

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>

login html and posts html display correctly individually so the problem isn't there.

2

There are 2 answers

0
tavnab On

The problem was templateURL vs templateUrl in your route for /login. Here's the plunker:

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

I also fixed your index.html; you had an extra <head> at the top.

1
Karthi Sanjivi On

The main problem is angular.module('app') defined more than once. create module only once and then add the config,controller, etc to all and templateUrl you kept it as and templateURL

Below code is working fine for both the login and post. it loads the both the views.

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')

});

and also i have updated the code in the Plunker. Please look at it.

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

Hope this solves your problem.