CODEWITHSUNDEEP
angularjsangular-ui-routerangular-uing-controller
user1595858
user1595858

Reputation: 3890

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

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);
    });
  }

});

Upvotes: 1

Views: 2266

Answers (2)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

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

Upvotes: 2

Michael
Michael

Reputation: 3104

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.

Upvotes: 0

Related Questions