CODEWITHSUNDEEP
angularjs
Lakshmi Seelam
Lakshmi Seelam

Reputation: 25

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

Upvotes: 0

Views: 235

Answers (2)

Rajath M S
Rajath M S

Reputation: 1092

In config File

// State definitions
$stateProvider
  .state('test', {
    abstract: true,
    views: {
    'main@': {
        templateUrl: 'app/../../full-view.html'
      },
      'header@test': {
        templateUrl: '/templates/header.html' // correct path to the template
        //  controller: 'HeaderController as vm'   if needed
      },
      'footer@test': {
        templateUrl: '/templates/footer.html' // correct path to the template
        //  controller: 'FooterController as vm'   if needed
      }
    }
  });

HTML

in content-only.html

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

in full-view.html

<div class="container">
  <div ui-view="header"></div>
  <div>
    <div ui-view="content"></div>
  </div>
  <div ui-view="footer"></div>
  </div>

in index.html

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

in other modules(example)

views: {
        'content@test': {
          templateUrl: 'app/main/policies/policies.html'
        //  controller: 'PoliciesController as vm'   if needed
        }
      }

so that whatever you append to content@test will comes under ui-view="content"

for routing avoid using href="", use ui-sref="" since you are using ui-router

example ui-sref="app.home" or ui-sref="app.about" rather than usinghref="#/home" or href="#/about"

Upvotes: 0

Sravan
Sravan

Reputation: 18647

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

Upvotes: 2

Related Questions