ui-router $stateProvider.state.controller don't work

Question

The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working.

index.html

<html class="no-js" ng-app="mainApp" ng-controller="MainCtrl">
  <head> ....
  </head>
  <body class="home-page">
          <div ui-view="header"></div>
        <div ui-view="content"></div>
        <div ui-view="footer"></div>
...

signup.html

<div class="form-container col-md-5 col-sm-12 col-xs-12">
  <form class="signup-form">
    <div class="form-group email">
      <label class="sr-only" for="signup-email">Your email</label>
      <input id="signup-email" type="email" ng-model="user.email" class="form-control login-email" placeholder="Your email">
    </div>
    <!--//form-group-->
    <div class="form-group password">
      <label class="sr-only" for="signup-password">Your password</label>
      <input id="signup-password" type="password" ng-model="user.password" class="form-control login-password" placeholder="Password">
    </div>
    <!--//form-group-->
    <button type="submit" ng-click="createUser()" class="btn btn-block btn-cta-primary">Sign up</button>
    <p class="note">By signing up, you agree to our terms of services and privacy policy.</p>
    <p class="lead">Already have an account? <a class="login-link" id="login-link" ui-sref="login">Log in</a>
    </p>
  </form>
</div><!--//form-container-->

app.js

angular
  .module('mainApp', [
    'services.config',
    'mainApp.signup'
  ])
  .config(['$urlRouterProvider', function($urlRouterProvider){
    $urlRouterProvider.otherwise('/');

  }])

signup.js

'use strict';

/**
 * @ngdoc function
 * @name mainApp.signup
 * @description
 * # SignupCtrl
 */
 angular
 .module('mainApp.signup', [
  'ui.router',
  'angular-storage'
  ])
 .config(['$stateProvider', function($stateProvider){
  $stateProvider.state('signup',{
    url: '/signup',
    controller: 'SignupCtrl',
    views: {
      'header': {
        templateUrl: '/pages/templates/nav.html'
      },
      'content' : {
        templateUrl: '/pages/signup/signup.html'
      },
      'footer' : {
        templateUrl: '/pages/templates/footer.html'
      }
    }
  });
}])
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {

  $scope.user = {};

  $scope.createUser = function() {
    $http({
      url: 'http://localhost:3001/users',
      method: 'POST',
      data: $scope.user
    }).then(function(response) {
      store.set('jwt', response.data.id_token);
      $state.go('home');
    }, function(error) {
      alert(error.data);
    });
  }

});

The controller will be bound to the `ui-view` directive. [ui-view](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view). Do you have that in your index.html? Your 'signup' config seems to miss also the template or templateUrl property. — Michael, May 03 '15 at 14:50

score 2 · Accepted Answer · edited May 23 '17 at 10:28

There is a working plunker. Firstly, check this Q & A:

Are there different ways of declaring the controller associated with an Angular UI Router state

Where we can see, that

controller does not belong to state. It belongs to view!

This should be the state definition:

$stateProvider.state('signup',{
    url: '/signup',
    //controller: 'SignupCtrl',
    views: {
      'header': {
        templateUrl: 'pages/templates/nav.html'
      },
      'content' : {
        templateUrl: 'pages/signup/signup.html',
        controller: 'SignupCtrl',
      },
      'footer' : {
        templateUrl: 'pages/templates/footer.html'
      }
    }
});

Check it here

score 0 · Answer 2 · answered May 03 '15 at 15:18

0

You need a template to bind a controller.

In the docs ui-router Controllers

Controllers

You can assign a controller to your template. Warning: The controller will not be instantiated if template is not defined.

answered May 03 '15 at 15:18

Michael

3,085
1
17
15

I now added template: ..., will that help? I don't see any change – user1595858 May 03 '15 at 16:29
I think you also need a `ui-view` directive in the index/parent.html to bind the template with its controller. – Michael May 03 '15 at 17:16

ui-router $stateProvider.state.controller don't work

2 Answers2