How to handle routing in MEAN application for multiple pages

一笑奈何 提交于 2019-12-23 04:55:25

问题


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>

来源:https://stackoverflow.com/questions/25830823/how-to-handle-routing-in-mean-application-for-multiple-pages

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!