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.
The problem was
templateURL
vstemplateUrl
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.