I am not sure how to name the question, but here is my situation
My template is like this:
├── index.html
├── ...
├── account
│ ├── index.html
│ ├── authorization
│ │ ├── login.html
│ │ ├── signup.html
│ │ └── dashboard
So the first index page is the front page, the second index page contains ng-view which is the template for the login page, signup page, and dashboard page.
I have made:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'authorization/login.html',
controller: 'authCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'authorization/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'dashboard',
templateUrl: 'authorization/dashboard/index.html',
controller: 'authCtrl'
})
.otherwise({
redirectTo: "/login"
});
}
])
.run(['$rootScope', '$location', 'apiService', function ($rootScope, $location, apiService) {...
}]);
<a href="account"></a>
<div class="nav_item_extra"><a class="loggedIn" href="account/authorization/login">Sign in</a></div>
<div class="nav_item_extra"><a class="loggedIn" href="account/authorization/signup.html">Register</a></div>
You only miss '#' (hash tag on your href)
<div class="nav_item_extra"><a class="loggedIn" href="#/login">Sign in</a>
</div>
<div class="nav_item_extra"><a class="loggedIn" href="#/signup">Register</a>
</div>