I'm encountering a routing problem with my AngularJS/ExpressJS application. The issue is that login.ejs and signup.ejs are partial views, while welcome.ejs serves as the main template. The intention is for these views to load in a ui-view container within the welcome.ejs page. When accessing /welcome, the welcome.ejs page should appear with the default login form. However, both /welcome/login and /welcome/signup URLs only display the /welcome page with the login form.
authController.js:
var app = angular.module("myapp.controllers.auth", [
"ui.router"
]);
app.config([
"$stateProvider",
"$locationProvider",
function($stateProvider, $locationProvider) {
$stateProvider.state("welcome", {
url: "/welcome",
templateUrl: "/welcome",
controller: "AuthController",
})
.state("login", {
parent: "welcome",
url: "/login",
views: {
"container@": {
templateUrl: "auth/login",
controller: "AuthController"
}
}
})
.state("signup", {
parent: "welcome",
url: "/signup",
views: {
"container@": {
templateUrl: "auth/signup",
controller: "AuthController"
}
}
});
$locationProvider.html5Mode(true);
}
]);
Relevant ExpressJS code:
var express = require("express");
var router = express.Router();
router.route(/\/welcome.*/)
.get(function(req, res, next) {
res.render("welcome");
});
There seems to be a minor oversight causing this issue, any suggestions?
EDIT: Including HTML code
welcome.ejs:
<html>
<head>
<base href="/">
</head>
<body ng-app="myapp">
<div ui-view="container" class="auth-container">
<span>Sign in</span>
<form ng-submit="login()">
<div class="form-group">
<input type="text" ng-model="user.email" autofocus>
</div>
<div class="form-group">
<input type="password" ng-model="user.password">
</div>
<button type="submit" class="btn btn-primary">Log In</button>
</form>
<a ui-sref="signup">Sign Up</a>
</div>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script type="text/javascript" src="/javascripts/app.js"></script>
<script type="text/javascript" src="/javascripts/controllers/authController.js"></script>
<script type="text/javascript" src="/javascripts/services/authService.js"></script>
</body>
</html>
auth/login.ejs
<span>Sign in</span>
<form ng-submit="login()">
<div class="form-group">
<input type="text" ng-model="user.email" autofocus>
</div>
<div class="form-group">
<input type="password" ng-model="user.password">
</div>
<button type="submit" class="btn btn-primary">Log In</button>
</form>
<a ui-sref="signup">Sign Up</a>
auth/signup.ejs:
<span>Sign Up</span>
<form ng-submit="signup()">
<div class="form-group">
<input type="text" ng-model="name" autofocus>
</div>
<div class="form-group">
<input type="text" ng-model="user.email" autofocus>
</div>
<div class="form-group">
<input type="password" ng-model="user.password">
</div>
<button type="submit" class="btn ban-primary">Sign Up</button>
</form>
<a ui-sref="login">Login</a>