Angular UI- Router Inherited Views

Question

My index.html file is as follows..

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

My home.html file is as follows..

<div login id="loginBox"></div>
  <div ng-show="users.length">
  <hr/>

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

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

My app.js file is as follows

var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
  myapp.config(['$stateProvider', '$routeProvider' ,'$urlRouterProvider',function($stateProvider,$routeProvider,$urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');




$stateProvider
                .state('home', {
                    abstract:true,
                    url : "/home",
                    templateUrl : 'views/home.html',
                    controller : 'homeCtrl'
                    // views: {
                    // "": {
                    // url:"/home",
                    // templateUrl: 'views/home.html',
                    // controller: 'homeCtrl'
                    // },
                    // "header@home": {
                    // templateUrl: "views/header.html"
                    // }
                    // }
                })

                .state('header', {
                    url : '/header',
                    templateUrl : 'views/header.html'
                        })
                .state('footer', {
                    url : '/footer',
                    templateUrl : 'views/footer.html'
                        })     
       }]);

Which is an incomplete one. How should i design my app.js such that i can have following flow of view.

Home is parent in which header and footer are views..

pawan9977 · Accepted Answer · 2013-11-13 07:23:46Z

It worked like this..

$urlRouterProvider.otherwise("home");

                $stateProvider
                .state('home', {
                    //abstract:true,
                    // url : "/home",
                    // templateUrl : 'views/home.html',
                    // controller : 'homeCtrl'
                    url:'',
                    views: {
                        '': {
                            //url:"/home",
                            templateUrl: 'views/home.html',
                            controller: 'homeCtrl'
                        },
                        "header@home": {
                            templateUrl: "views/header.html"
                        },
                        "footer@home": {
                            templateUrl: "views/footer.html"
                        },
                        "container@home": {
                            templateUrl: "views/container.html"
                        }

                    }
                })

user2779653 · Accepted Answer · 2013-11-12 16:27:41Z

1

2 options:

You can use the default angular ngRoute module (Reference with example here and here).

You would have something like this:

index.html: (contains the layout of your website, including header/footer)

<div login id="loginBox"></div>
<div ng-show="users.length">
<hr/>
<div id="header"></div>
<div ng-view></div>
<div id="footer"></div>

home.html: (partial view of dynamic content to load dynamically)

<div id="content">
Your home content.
</div>

app.js:

var myApp = angular.module('myApp', []);
myApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
    when('/home', {
      templateUrl: 'partials/home.html',
      controller: 'HomeCtrl'
    }).
    when('/page2', {
      templateUrl: 'partials/page2.html',
      controller: 'Page2Ctrl'
    }).
    otherwise({
      redirectTo: '/home'
    });
}]);

Or you can use ui-router for more advanced routing features. See this very good tutorial to get started.

-EDIT

Using $stateProvider, here is an example in Plunker that works with an index, linking to a sub-view "home".

edited Nov 12, 2013 at 16:27

answered Nov 12, 2013 at 13:05

user2779653

9271 gold badge10 silver badges26 bronze badges

2 Comments

pawan9977 Over a year ago

Actually I dont want to use ng-route , I am trying to use $stateProvider , but cant get output..

pawan9977 Over a year ago

Thanks for $stateProvider example. I have edited my app.js file according to that. But Header and footer views are not being displayed.

Collectives™ on Stack Overflow

Angular UI- Router Inherited Views

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related