CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
s4tr2
s4tr2

Reputation: 415

UI-router not displaying nested views

I am learning how to employ UI-router in AngularJS, but I am not able to display the nested views.

Also, when I install UI-router using Bower, it is not working as it should. What could be the problem as I have to use CDN now.

Here is what I've done so far:

Index.html

<html ng-app="routerApp">
  <head>
    <title>Learning UI router</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" ui-sref="#">AngularUI router</a>
        </div>

      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui sref="about">About</a></li>
      </ul>

    </div>
    </nav>

    <div class="container">
      <div ui-view></div>
    </div>

  </body>
</html>

app.js

angular.module('routerApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider){
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'partial-home.html'
        })
        .state('home.list', {
          url: '/list',
          templateUrl: 'partial-home-list.html',
          controller: function($scope){
            $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
          }
        })
        .state('home.paragraph', {
            url: '/paragraph',
            template: 'Random Blah Blah Blah.'
          })
  });

partial-home.html

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>

    <a ui-sref=".list" class="btn btn-primary">list</a>
    <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>

partial-home-list.html

<ul>
  <li ng-repeat="dog in dogs">{{dog}}</li>
</ul>

Upvotes: 1

Views: 25

Answers (1)

I. Ahmed
I. Ahmed

Reputation: 2534

First the used CDN was dead or not correct, so changed the CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

Secondly, fixed the router states, for example:

.state('list', {
          url: '/list',
          views: {
            'main': {
              templateUrl: 'partial-home-list.html',
              controller: function($scope){
                   $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
              }    
            }
          }

I put the templateUrl and controller under swappable view called 'main'.

Thirdly, Changed your ui-view section as follows:

<div ui-view = "main"></div>

Please check the fixed code given below:

app.js

angular.module('routerApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider){
      $stateProvider
        .state('home', {
          url: '/home',
          views: {
            'main': {
              templateUrl: 'partial-home.html'
            }
          }
        })
        .state('list', {
          url: '/list',
          views: {
            'main': {
              templateUrl: 'partial-home-list.html',
              controller: function($scope){
                   $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
              }    
            }
          }
        })
        .state('paragraph', {
            url: '/paragraph',
            views: {
            'main': {
              template: 'Random Blah Blah Blah.'
            }
          }

        });
        $urlRouterProvider.otherwise('/home');
  });

index.html

<html ng-app="routerApp">
  <head>
    <title>Learning UI router</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" ui-sref="home">AngularUI router</a>
        </div>

      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
      </ul>

    </div>
    </nav>

    <div class="container">
      <div ui-view = "main"></div>
    </div>

  </body>
</html>

partial-home.html

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>

    <a ui-sref="list" class="btn btn-primary">list</a>
    <a ui-sref="paragraph" class="btn btn-danger">Paragraph</a>
</div>

partial-home-list.html

<ul>
  <li ng-repeat="dog in dogs">{{dog}}</li>
</ul>

Upvotes: 1

Related Questions