Can one server serve 2 angularjs modules / routings?

Question

(I re-edited my initial question to better explain the context.)

I have a mean-stack web site built with angular-ui-router and html5mode. routes/index.js contains the following code, and it is views/index.html which has <ui-view></ui-view> and is the entry point of all the pages. As a result, https://localhost:3000/XXXX in a browser will remain the same (rather than adding #) and show the corresponding content based on the router.

router.get('*', function(req, res) {
    console.log("router.get *");
    res.sendfile('./views/index.html');
});

Now, because of this problem, I want to have views/addin.html that contains office.js and another router, such that the site serves a set of urls https://localhost:3000/addin/XXXX, and I don't mind if it is html5mode or not (a url can contain # somewhere). To this end, I added one block for addin in routes/index.js:

router.get('/addin/*', function (req, res) {
    console.log("router.get /addin/*");
    res.sendfile('./views/addin.html')
});

router.get('*', function(req, res) {
    console.log("router.get *");
    res.sendfile('./views/index.html');
});

And here is views/addin.html:

<html>
<head>
    <title>addinF</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
</head>
<body ng-app="addinF">
    addin content
    <ui-view ng-cloak></ui-view>
</body>
<script>
    var addinApp = angular.module('addinF', ['ui.router'])
    addinApp.config(['$stateProvider', function ($stateProvider) {
        $stateProvider
            .state('addinNew', {
                url: '/addin/new',
                template: "new page"
            })
            .state('addinHome', {
                url: '/addin/home',
                template: "home page"
            })
    }]);
</script>
</html>

However, loading https://localhost:3000/addin/new or https://localhost:3000/addin/home just shows addin content and does not show new page or home page in console; it did not raise any error either.

Could anyone tell me what's missing? Can one server serve 2 angularjs modules or routings?

Radim Köhler · Accepted Answer · 2017-06-30 18:02:38Z

0

Just add initial redirection:

appAddin.config(['$urlRouterProvider', function ($urlRouterProvider) {
    $urlRouterProvider.otherwise("/addin/new");
}])

There is a working plunker

answered Jun 30, 2017 at 18:02

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SoftTimur Over a year ago

Thank you... but $urlRouterProvider.otherwise("/addin/new") will redirect all the pages https://localhost:3000/addin/XXXX to a same page https://localhost:3000/addin/XXXX#/addin/new, I want them to be different based on router. Please see my edit of the question...

Radim Köhler Over a year ago

Not sure about the router.. but, simply.. what I tried to show you.. was how to trigger your initial state. We can do that with some initial redirect as well.. appAddin.run(['$state', function ($state) {$state.go("addinNew")}]).. there is an (example)[plnkr.co/edit/kf6OhXfxgbkWws1gQ2NA?p=preview]

Collectives™ on Stack Overflow

Can one server serve 2 angularjs modules / routings?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related