(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?