Angular app displays one page but not the other

Question

Angular app displays one page but not the other

122 views Asked by BelgoCanadian At 12 June 2015 at 01:59

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.

Original Q&A

There are 2 answers

**tavnab** · Answer 1 · 2015-06-12 03:29:12

tavnab On 12 June 2015 at 03:29

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.

**Karthi Sanjivi** · Answer 2 · 2015-06-18 07:23:31

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.

TechQA.

Angular app displays one page but not the other

There are 2 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-ROUTING

Popular Questions

Popular Tags

Trending Questions