How to do subpages in AngularJS?

Question

So, I've been looking all day for this, but I can't find anything about it. Suppose, I have a webapp with a settings page www.example.com/settings. What do I do if I want to add subpages to this settings pages, e.g. www.example.com/settings/account. Below you can find my current implementation, but that isn't working...

var Example = angular.module('ExampleApp', ['ngRoute']);

Example.config(function($routeProvider, $locationProvider) {
$routeProvider
    // route for account settings
    .when('/settings/account', {
        templateUrl : 'views/settings/account.php',
        controller  : 'SettingsController'
    })

    // route for profile settings
    .when('/settings/profile', {
        templateUrl : 'views/settings/profile.php',
        controller  : 'SettingsController'
    })

    // route for the settings
    .when('/settings', {
        templateUrl : 'views/settings.php',
        controller  : 'SettingsController'
    });

    $locationProvider.html5Mode(true);
});

And this is an example of the settings/account view:

<div ng-controller="SettingsController">

    <h1>ExampleApp</h1>
    <h4>Account | Settings</h4>

</div>

======================================

I added the code suggested to main.js, but now it keeps going to /home

Example.config(function($stateProvider, $urlRouterProvider) {
   //
   // For any unmatched url, redirect to /home
   $urlRouterProvider.otherwise("/home");
   //
   // Now set up the states
   $stateProvider
     .state('home', {
       url: "/home",
       templateUrl: "views/home.html"
     })
     .state('add', {
       url: "/add",
       templateUrl: "views/add.html"
     })
     .state('edit', {
       url: "/edit",
       templateUrl: "views/edit.html"
     })
     .state('settings', {
       url: "/settings",
       templateUrl: "views/settings.html"
     })
     .state('account', {
       url: "/settings/account",
       templateUrl: "views/settings/account.html"
     });
 });

don't declare controllers twice. What isn't working? What errors are thrown? — charlietfl
– charlietfl, Commented Sep 10, 2014 at 11:30
Did your other pages are routing properly, except settings/account..? — Pradeepta
– Pradeepta, Commented Sep 10, 2014 at 11:38
Yeah, I fixed since posting this question. The page keeps loading, throwing errors until it eventually crashes the Chrome tab. The errors that are thrown are coming from ContentVeil.js and mtgm.js. — User183849481
– User183849481, Commented Sep 10, 2014 at 11:48

julien bouteloup · Accepted Answer · 2014-09-10 14:01:11Z

2

You should consider using ui-router. It's a 3rd-party module. It supports everything the normal ngRoute can do as well as many extra functions.

Ui-router would be very helpful in your example using states. states allow you to map and access different information about different states and you can easily pass information between states via $statsParams.

LIVE DEMO: http://plnkr.co/edit/37O7NFnrKYsgwbF5eqRt

First you need to create the different views:

Index view

<!DOCTYPE html>
<html ng-app="exampleApp">

<head>
    <title>exampleApp</title>
    <!-- Bootstrap CSS -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">
  <p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i></p>

  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">exampleApp</a>
      <ul class="nav">
        <li><a ui-sref="settings">settings</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>        
    </div>
  </div>         

  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

  <!-- App Script -->
  <script>
    var exampleApp = angular.module('exampleApp', ["ui.router"])
    exampleApp.config(function($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/home");
    //
    // Now set up the states
    $stateProvider
      .state('index', {
        url: "/index",
      })
      .state('settings', {
        url: "/settings",
        templateUrl: "settings.html"
      })
      .state('settings.account', {
        url: "/account",
        templateUrl: "settings.account.html",
        controller: function($scope) {
          $scope.account = "i'm the account view"
        }
      })
      .state('settings.profile', {
        url: "/profile",
        templateUrl: "settings.profile.html",
        controller: function($scope) {
          $scope.profile = "i'm the profile view"
        }
      })
      .state('home', {
        url: "/home",
        templateUrl: "home.html"
      });
  });
  </script>

</body>

</html>

Home view

<h1>I'm the home view</h1>

Settings view

<h1>Settings view</h1>
<hr/>
<p><a ui-sref=".account">Account</a></p>
<p><a ui-sref=".profile">Profile</a></p>
<div ui-view></div>

Account view

<h3>Account view</h3>
<ul>
  {{account}}
</ul>

Profile view

<h3>Profile View</h3>
<ul>
  {{profile}}
</ul>

And then you configure the state in the module config:

I directly add the module config in the index.

edited Sep 10, 2014 at 14:01

answered Sep 10, 2014 at 12:07

julien bouteloup

3,09224 silver badges16 bronze badges

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

6 Comments

User183849481 Over a year ago

Okay, so I added your code to my main.js, but now it keeps going to /home. No matter what I visit...

julien bouteloup Over a year ago

I guess you forgot about adding the  using <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> I updated the home.html with these changes.

User183849481 Over a year ago

I did that before, but what happens is that subroutes aren't working now...they just display a blank page.

julien bouteloup Over a year ago

Ok I just created a Plunker with a working project. Let me know what you think. plnkr.co/edit/37O7NFnrKYsgwbF5eqRt

User183849481 Over a year ago

What happens is that if I go to /settings, everything works just fine. But if I go to /settings/account directly, I get a blank page....

|

Collectives™ on Stack Overflow

How to do subpages in AngularJS?

1 Answer 1

First you need to create the different views:

Index view

Home view

Settings view

Account view

Profile view

And then you configure the state in the module config:

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

First you need to create the different views:

Index view

Home view

Settings view

Account view

Profile view

And then you configure the state in the module config:

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related