Mahedi Sabuj Mahedi Sabuj - 1 month ago 4
AngularJS Question

Multiple View where one will change based on State or Url and others with stay same [Angular UI Router]

I try to create a blog for me by using Angular and ASP.NET Web API.
Here is my

Layout.cshtml


<div id="header">
<div data-ui-view="menu"></div>
</div>
<div id="main">
<div data-ui-view></div>
<div data-ui-view="sidebar"></div>
</div>
<div id="footer">
<div data-ui-view="footer"></div>
</div>


And views by using
text/ng-template


<!-- Layout Views -->
<script type="text/ng-template" id="/Templates/Layout/Menu.html">
<div>
<a ui-sref="home">Home</a>
<a ui-sref="register">Register</a>
</script>

<script type="text/ng-template" id="/Templates/Layout/Sidebar.html">
<div>Sidebar</div>
</script>

<script type="text/ng-template" id="/Templates/Layout/Footer.html">
<div>Footer</div>
</script>

<!-- Page Views -->
<script type="text/ng-template" id="/Templates/Layout/Home.html">
<div>Home</div>
</script>

<script type="text/ng-template" id="/Templates/Layout/Register.html">
<div>Register</div>
<a ui-sref="home">Back</a>
</script>


And Here is
app.js


angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');

$stateProvider
.state('home', {
url: '/',
views: {
'': {
templateUrl: '/Templates/Layout/Home.html'
},
'menu@': {
templateUrl: '/Templates/Layout/Menu.html'
},
'sidebar@': {
templateUrl: '/Templates/Layout/Sidebar.html'
},
'footer@': {
templateUrl: '/Templates/Layout/Footer.html'
}
}
}).state('register', {
url: '^/Register',
templateUrl: '/Templates/Layout/Register.html'
});
}]);


Here is what i want:


  1. When i browse home page
    (domain/#/)
    it will replace unnamed view with
    Home.html

  2. When i browse register page
    (domain/#/Register)
    or clicked on
    Register
    from menu, it will replace unnamed view with
    Register.html



As per now,
domain/#/
is working fine but
(domain/#/Register)
only shows
Register
view whereas it should have shown other 3 (menu, sidebar, footer) views also.

CODEPEN LINK

I check stackoverflow & different blogs for 2 days but can't solve the issue. What I miss here? Any help would be appreciated.

Lex Lex
Answer

One way you could accomplish this is to have an abstract "master" state where you define the templates for the named views and then "children" of this "master" for your home and register states. Here is an example adapted directly from your Codepen:

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('master', {
          abstract: true,
          views: {
            'menu@': {
              templateUrl: '/Templates/Layout/Menu.html'
            },
            'sidebar@': {
              templateUrl: '/Templates/Layout/Sidebar.html'
            },
            'footer@': {
              templateUrl: '/Templates/Layout/Footer.html'
            }
          }
        })
        .state('master.home', {
          url: '/',
          views: {
            '@': {
              templateUrl: '/Templates/Layout/Home.html'
            }
          }


        }).state('master.register', {
          url: '/Register',
          views: {
            '@': {
              templateUrl: '/Templates/Layout/Register.html'
            }
          }

        });
    }
  ]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

<body ng-app="app">
  <div id="header">
    <div data-ui-view="menu"></div>
  </div>
  <div id="main">
    <div data-ui-view></div>
    <div data-ui-view="sidebar"></div>
  </div>
  <div id="footer">
    <div data-ui-view="footer"></div>
  </div>

  <!-- Layout Views-->
  <script type="text/ng-template" id="/Templates/Layout/Menu.html">
    <div>
      <a ui-sref="master.home">Home</a>
      <a ui-sref="master.register">Register</a>
    </div>
  </script>

  <script type="text/ng-template" id="/Templates/Layout/Sidebar.html">
    <div>Sidebar</div>
  </script>

  <script type="text/ng-template" id="/Templates/Layout/Footer.html">
    <div>Footer</div>
  </script>

  <!-- Page Views-->
  <script type="text/ng-template" id="/Templates/Layout/Home.html">
    <div>Home</div>
  </script>

  <script type="text/ng-template" id="/Templates/Layout/Register.html">
    <div>Register</div>
    <a ui-sref="master.home">Back</a>
  </script>
</body>

Comments