How to handle routing in MEAN application for mult

2019-06-10 14:57发布

问题:

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>