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?

score 0 · Answer 1 · answered Jun 30 '17 at 18:02

0

Just add initial redirection:

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

There is a working plunker

answered Jun 30 '17 at 18:02

Radim Köhler

122,561
47
239
335

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... – SoftTimur Jul 01 '17 at 02:57
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)[http://plnkr.co/edit/kf6OhXfxgbkWws1gQ2NA?p=preview] – Radim Köhler Jul 01 '17 at 16:06

Can one server serve 2 angularjs modules / routings?

1 Answers1