Angular app displays one page but not the other

Question

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.

When you said it doesn't work for loginctrl, is that when you click login link or you expect the service to work in app.html ? — kwangsa, Jun 12 '15 at 02:29
when i click login it should display login.html. instead it does nothing. the console is empty. So I guess it could be a problem with the routing but then Posts shouldn't work either. so confused. — BelgoCanadian, Jun 12 '15 at 02:37
I dumbed it down and put it in plunker: http://plnkr.co/edit/tPbHaUrn73wGUPsY8mqo?p=preview — BelgoCanadian, Jun 12 '15 at 03:16
Why on Earth would you post uglified source code on StackOverflow? — Phil, Jun 12 '15 at 03:19
Hi Phil, I added the problem in plunker. seems like it's not service related. — BelgoCanadian, Jun 12 '15 at 03:21
You have a typo in the login route `templateURL` config key. It should be `templateUrl` ~ http://plnkr.co/edit/I8FjbDj9hMaJoGgvII6i?p=preview. Would have been easier to see if you hadn't obfuscated the code in your question — Phil, Jun 12 '15 at 03:25

score 2 · Answer 1 · answered Jun 12 '15 at 03:29

2

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.

answered Jun 12 '15 at 03:29

tavnab

2,594
1
19
26

score 0 · Answer 2 · answered Jun 18 '15 at 07:23

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.

Hi Karthi, I actually have all those in separate js files that gulp then amalgamates and uglifies, that's why it's repeating that stuff, anywho, thanks for the answer! — BelgoCanadian, Jun 18 '15 at 14:17

Angular app displays one page but not the other

2 Answers2