How does one map many routes in AngularJS?

Question

An AngularJS site with a Spring Boot backend has numerous public url patterns in addition to a secure section. All the public url patterns fall in the model mydomain.com/public1, mydomain.com/public2, mydomain.com/public3, and so on, while all the secure content will be inside the mydomain.com/secure url pattern like mydomain.com/secure/one_of_many_urls. The problem is that the sample app I am starting with has separate modules for every route. This would become hard to maintain with n routes.

How can I set the code up so that all the public1, public2, public3, public_n routes share a single controller?

Here is the current directory structure. I would like for the public1 directory to turn into public and be able to map as many specific url patterns as I want to put into it:

In addition, my public1.js is currently empty as follows:

angular.module('public1', []).controller('public1', function($scope, $http) {

});

The link to the public1 route is handled in a navigation bar in index.html as follows:

<!doctype html>
<html>
<head>
<title>Hello Angular</title>
<!-- To produce natural routes (without the #), you need an extra <base/> element in the header of the HTML in index.html, and you need to change the links in the menu bar to remove the fragments ("#").  There are also changes in a spring controller and in the main js module. -->
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}
</style>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
    <div ng-controller="navigation" class="container">
        <ul class="nav nav-pills" role="tablist">
            <li ng-class="{active:tab('home')}"><a href="/">home</a></li>
            <li ng-class="{active:tab('message')}"><a href="/message">message</a></li>
            <li ng-class="{active:tab('public1')}"><a href="/public1">public1</a></li>
            <li><a href="/login">login</a></li>
            <li ng-show="authenticated()"><a href="" ng-click="logout()">logout</a></li>
        </ul>
    </div>
    <div ng-view class="container"></div>
    <script src="js/angular-bootstrap.js" type="text/javascript"></script>
    <script src="js/auth/auth.js" type="text/javascript"></script>
    <script src="js/home/home.js" type="text/javascript"></script>
    <script src="js/message/message.js" type="text/javascript"></script>
    <script src="js/public1/public1.js" type="text/javascript"></script>
    <script src="js/navigation/navigation.js" type="text/javascript"></script>
    <script src="js/hello.js" type="text/javascript"></script>
</body>
</html>

And public1.html is:

<h1>Public 1</h1>
<div>
    <p>This will be a public url pattern.</p>
</div>

How do I change the code below so that a scaling n number of public routes can efficiently share the same controller? Each public_n route will have their own images, but would share js logic, if they have any js logic.

I found the following, but where would one put it in the code above, and how would a person link everything to it without resorting to leaving it in hello.js?

.when('/public1', {
    templateUrl: 'js/public/public1.html'
}
.when('/public2', {
    templateUrl: 'js/public/public2.html'
}
.when('/public3', {
    templateUrl: 'js/public/public3.html'
})

score 2 · Accepted Answer · edited May 23 '17 at 12:17

How do I change the code below so that a scaling n number of public routes can efficiently share the same controller?

You can Associate one Controller to Many Routes (Views) just assigning it to more routes in your $routeProvider as follows:

myApp.config(function ($routeProvider) {

  $routeProvider
  .when('/public1', {
    templateUrl: 'js/public/public1.html',
    controller: 'myController'
  })
  .when('/public2', {
    templateUrl: 'js/public/public2.html',
    controller: 'myController'
  })
  .when('/public3', {
    templateUrl: 'js/public/public3.html',
    controller: 'myController'
  })
  .otherwise({
    redirectTo: '/'
  });
})

You can also Set a Controller Alias as follows:

.when('/public1', {
    templateUrl: 'js/public/public1.html',
    controller: 'myController',
    controllerAs: 'myCtrl'
})

I found the following, but where would one put it in the code above, and how would a person link everything to it without resorting to leaving it in hello.js?

If I got your question, you just need to put the $routeProvider in a separated routeProvider.js file and include it in your index.html. Same thing for your controller/controllers.

I suggest you to take a look at:

And also take a look at those Q/A on StackOverflow:

I hope I've been helpful.

So then does your first block of code above go into routeProvider.js? And how does hello.js change to accommodate this? — CodeMed, Dec 17 '15 at 21:07
Yes, it belongs to routeProvider.js. If your hello.js is supposed to incorporate the route logic, you just need to copy paste and re-arrange on your needs my code. — AndreaM16, Dec 17 '15 at 21:09

How does one map many routes in AngularJS?

1 Answers1