I want to access my admin end using the URL http://localhost:3000/users/123
for which I have the following routing using Angular UI-Router module:
.state('users', {
url: '/users/:id',
views: {
'': {
templateUrl: 'partials/admin/index.html',
controller: 'UserController'
},
'sidebar@users': {
templateUrl: 'partials/admin/sidebar.html',
controller: 'UserController'
},
'content@users': {
templateUrl: 'partials/admin/content.html',
controller: 'UserController'
},
//other named views
}
})
Accessing http://localhost:3000/users/123
gives me 404 error through NodeJS.
At the same time I could access the http://localhost:3000/questions/342359
URL through <a ui-sref="questions({ id: {{qid}} })">Ask</a>
in the front end with the following configuration:
.state('questions', {
url: '/questions/:id',
views: {
'': {
templateUrl: 'partials/questions.html',
controller: 'QuestionController'
},
//other named views
}
})
Following is the express.Router()
for the front end and the admin end:
/* GET front end */
router.get('/', function(req, res) {
res.render('index', { title: 'Front' });
});
/* GET admin end */
router.get('/users', function(req, res) {
res.render('users', { title: 'Admin' });
});
Both index.ejs
and users.ejs
have the <div ui-view></div>
in them. The <div ui-view></div>
in index.ejs
takes partials/index.html
in it and the <div ui-view></div>
in users.ejs
takes partials/admin/index.html
in it. Both the partials/index.html
and the partials/admin/index.html
have some named views in them.
Its like I have 2 pages in my application (front end and admin end) and both the pages I want to behave like single page app, for which I have partials for each of the end(front end and admin end).
Could somebody help understand that how could I access partials/admin/index.html
without getting the 404
error?
Edit: Some More Code
index.ejs (Front end)
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title><%title%></title>
<!-- CSS files for front end to make front end look pretty -->
</head>
<body>
<div ui-view></div>
<!-- JavaScript files for front end to make front end look pretty and other Angular specific stuff -->
</body>
</html>
/partials/index.html (Front end)
<div class="main">
<div class="container">
<div class="row margin-bottom-40">
<div class="col-md-12 col-sm-12">
<div class="content-page">
<div class="row">
<div ui-view="foo"></div>
<div ui-view="bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
users.ejs (Admin end)
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title><%title%></title>
<!-- CSS files for admin end to make amdin end look pretty -->
</head>
<body>
<div ui-view></div>
<!-- JavaScript files for admin end to make admin end look pretty and other Angular specific stuff -->
</body>
</html>
/partials/admin/index.html (Admin end)
<div class="page-container">
<div ui-view="sidebar"></div>
<div ui-view="content"></div>
</div>