AngularJS $stateprovider

Question

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

This might help you. http://stackoverflow.com/questions/9293423/can-one-controller-call-another — Mohammed, Feb 02 '17 at 06:08
use ng-href to go to different state in case of stateProvider from any element. — Abhishekkumar, Feb 02 '17 at 06:23

Sravan · Accepted Answer · 2017-02-02T09:16:11.030

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

my content view has to be changed whenever I click on nav-items in header, how that can be achieved? — Lakshmi Seelam, Feb 02 '17 at 08:55

Rajath M S · Answer 2 · 2017-02-03T07:31:02.550

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"

AngularJS $stateprovider

2 Answers2