how to load views in a base html view in angular?

Question

I Need to load two html files in a base html file .In other words I have base html file in which I have header and contend view .I need to load different HTML file in header and in contend view .. Here is Base HTML file

<div class="container">

    <div class="row page-header">
        <ui-view name="header"></ui-view>
    </div>

    <ui-view name="content"></ui-view>

    <div class="row">
        <div class="col-xs-12">
            <hr>
            <p class="text-center">Test Come</p>
        </div>
    </div>
</div>

In this view

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

in header I need to load header.html and <ui-view name="content"></ui-view> in thisI need to load content.html http://plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview Thanks

You are mixing <ng-view> with <ui view> which is not desired "github.com/angular-ui/ui-router/wiki/…" way to do either choose ng-view or ui-view for routing. — squiroid
– squiroid, Commented Jan 12, 2015 at 5:44
I change something plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview — user944513
– user944513, Commented Jan 12, 2015 at 5:45
You can use <div ng-include="'content.html'"></div> and <div ng-include="'header.html'"></div> if possible or you want to work with <ui-view>..?? — squiroid
– squiroid, Commented Jan 12, 2015 at 5:49
@squiroid I am using ui-view plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview ..Please check where I am doing wrong — user944513
– user944513, Commented Jan 12, 2015 at 5:51

mega6382 · Accepted Answer · 2018-04-30 12:08:34Z

1

You need to update your state according to child states:

var config = function($stateProvider,$urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
       $stateProvider
       .state('main', {
        url: '/',
        views: {

            // the main template will be placed here (relatively named)
            '': { templateUrl: 'base.html' },


            // the child views will be defined here (absolutely named)
            'content@main': { template: 'contend.html' },

            // for column two, we'll define a separate controller 
            'header@main': { 
                templateUrl: 'header.html',

            }
        }

    });
};

edited Apr 30, 2018 at 12:08

mega6382

9,39217 gold badges52 silver badges73 bronze badges

answered Jan 12, 2015 at 6:11

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

1 Comment

user944513 Over a year ago

could you please send link

dhavalcengg · Accepted Answer · 2015-01-12 06:13:55Z

0

You can have just one ng-view. You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.

UI-Router is a project that may help: https://github.com/angular-ui/ui-router One of it's features is Multiple Parallel Views

EDIT

Checkout this plnkr

There were some problem with your code

(1) inject $stateProvider instead of $routeProvider if you are uing ui-router

(2) use ui-view instead of ng-view

(3) you can have multiple view at same template level. If you tries to define ui-view inside ui-view and you create multiple ui-view in single state, it will not work.

(4) ui-view inside ui-view will create another state.

var app=angular.module("firstApp",['ui.router']);
var config = function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
   $stateProvider
    .state('base', {
      url: "/",
        views: {
        "content": { templateUrl: "contend.html" },
        "header": { templateUrl: "header.html" }
      }
    })
};
config.$inject = ['$stateProvider', '$urlRouterProvider'];

var loginCntrl=function($scope){

}
loginCntrl.$inject=['$scope']

app.config(config);
app.controller(loginCntrl);

edited Jan 12, 2015 at 6:13

answered Jan 12, 2015 at 5:42

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

3 Comments

user944513 Over a year ago

plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview I upload that could you please check my plunker

user944513 Over a year ago

Could you please look on my plunker

dhavalcengg Over a year ago

i have edited my answer. Check plnkr.co/edit/qfyrvR5z04IXMvH1rKXq?p=preview also.

Collectives™ on Stack Overflow

how to load views in a base html view in angular?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related