CODEWITHSUNDEEP
angularjs
n00bie
n00bie

Reputation: 47

ui-sref and ui-view Angular ui-router

If user is not registered, register. I want to show registration form using ui-sref and ui-view.

included scripts : 

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/build/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/signup/signup-controller.js"></script>

In the app.js defined state

(function () {
  angular.module('TimeWaste', ['ui.router'])
  .config(function($stateProvider){
    $stateProvider
      .state('signUp', {
        url : "/signup",
        templateUrl : "app/signup/signup.html",
        controller : "SignUpController"
      })
  })
}());

Then i have this html code in my index.html

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div>
        <input type="text" ng-model="login.email">
        <input type="text" ng-model="login.password">
        <button>Login</button>
        <a ui-sref="signUp">Create</a>

      </div>
    </div>
  </nav>

  <div ui-view></div>

Link is disabled, a view not loads.... Some help ?

Upvotes: 0

Views: 1054

Answers (1)

Vicruz
Vicruz

Reputation: 331

try something like this,

.config(function($stateProvider){
  $stateProvider
    .state('signUp', {
      url : "/signup",
      views: {
        "container@": {
          templateUrl: "app/signup/signup.html",
          controller: "SignUpController"
        }
      },
  })
})

Then put name on your ui-view

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div>
      <input type="text" ng-model="login.email">
      <input type="text" ng-model="login.password">
      <button>Login</button>
      <a ui-sref="signUp">Create</a>
    </div>
  </div>
</nav>
<div ui-view="container"></div>

ui-sref doesn't know which ui-view it will load because your ui-view and ui-sref is not on the same parent node. check on multiple and named views here https://github.com/angular-ui/ui-router

Upvotes: 1

Related Questions