Lakshmi Seelam Lakshmi Seelam - 4 years ago 96
AngularJS Question

AngularJS $stateprovider

I am new to angularjs, I am not able to understand the concept of $stateprovider
I want to create a header that has menu and logo and the body content should change when clicked on menu items accordingly, code is given below, please check and answer my query

HTML

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


JS

var App=angular.module('test', ["ui.router", "App.controllers", "ui.bootstrap"]);

App.config(function ($stateProvider){
$stateProvider
.state('test', {
url: '',
views: {
'header': { templateUrl: '/templates/header.html'}

}
});
})


Thank You

Answer Source

Since you have taken two views, one for header and other for content,

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

The route also should have two different named routes.

views: {
            'header': { templateUrl: '/templates/header.html'},
            'content': { templateUrl: '/templates/content.html'}
         }

From this,

<div ui-view = "header"></div> opens header.html and <div ui-view = "content"></div> opens content.html

Here is the code,

var App=angular.module('test', ["ui.router", "App.controllers", "ui.bootstrap"]);

App.config(function ($stateProvider){
    $stateProvider
        .state('test', {
          url: '',
          views: {
            'header': { templateUrl: '/templates/header.html'},
            'content': { templateUrl: '/templates/content.html'}
         }
      });
})

In the HTML,

<ul class="nav nav-pills main-menu right">
   <li role="presentation"><a ui-sref="test" class="active">Home</a></li>
   <li role="presentation"><a href="#/bus_chart">Bus Chart</a></li>
   <li role="presentation"><a href="#/bookings">My Bookings</a></li>
   <li role="presentation"><a href="#/review">Reviews</a></li>
   <li role="presentation"><a href="#/contact">Contact</a></li>
</ul>

The first li click goes to our test state as given in routes.

Here is the documentation for the same

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download