current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
2

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..

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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".

share|improve this answer
    
Actually I dont want to use ng-route , I am trying to use $stateProvider , but cant get output.. –  pawan9977 Nov 12 '13 at 13:18
    
I edited my answer with a working example of $stateProvider. –  user2779653 Nov 12 '13 at 16:28
    
Thanks for $stateProvider example. I have edited my app.js file according to that. But Header and footer views are not being displayed. –  pawan9977 Nov 13 '13 at 5:36
up vote 2 down vote

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"
                        }

                    }
                })
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.