Using ng-switch to swap templates

Question

I'm trying to switch a "sign in" form for a "sign up" form whenever the user clicks on the "Sign Up" button in my angular app, but at the moment nothing is happening when the button is clicked; The sign in form remains on the screen and there are no console errors. Can anyone tell me where I'm going wrong?

I'm attempting to do this purely in html, is this even possible to achieve?

EDIT: I included a signup function in my UserCtrl which takes care of signing in/ out. Now when I click on sign up the alert is trigger but I get a console error saying TypeError: boolean is not a function.

$scope.signup = function() {
    alert('signup function hit');
    $scope.signup = true;
}

EDIT 2:

<!DOCTYPE html>
<html  ng-app="myApp" >
<head>
    <title> My App</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/signin.css">
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
</head>
<body ng-controller="MainCtrl">
<div ng-switch on="view.name">

    <div ng-switch-default ng-controller="UserCtrl">

        <div ng-show="!isAuthenticated">
            <form class = "form-signin">

                <div class="control-group">
                    <img src="img/logo.png">
                    <br />
                    <div class="controls">
                        <br />
                        <input type="text" ng-model="username" placeholder = "Email Address" >
                    </div>

                    <br />
                <div class="controls">
                    <input type="password" ng-model="password" placeholder = "Password" >
                </div>
                <div class="controls">
                    <button class = "btn btn-default" ng-click="signIn()">Sign In</button>
                    <button class = "btn btn-primary" ng-click="view.name = 'signup'">Register</button>


                </div>
            </div>
        </form>
    </div>


    <div ng-switch-when="signup" ng-controller = "UserNewCtrl" >
        <label>
             This is where my form should be when my signup button is clicked.
        </label>
    </div>  


//This part of index.html is only shown when a user has been authenticated

    <div ng-show="isAuthenticated">

        <div class="col-md-2">
            //MenuBar code is here
        </div>
        //Other templates get loaded here
    <div class="col-md-10">

    <div ng-view></div>

</div>

</div>
    </div>

    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/transition.js"></script>
    <script src="js/ui-utils.js"></script>



</div>
</body>
</html>

MainCtrl.js:

angular.module('myApp.controllers')
  .controller('MainCtrl', function($scope) {
    $scope.view={
      name: ''
    }; 
  })

score 3 · Accepted Answer · answered Feb 11 '14 at 11:14

To achieve your requirement you need a wrapper controller that hold ng-switch on model because ngSwitch creates child scope.

You can design your view like

<body ng-controller="mainCtrl">
  <div ng-switch on="view.name">
    <div ng-switch-default ng-controller="signInCtrl">
      <h1>this is sign in page</h1>
      <a href="javascript:void(0)" ng-click="signin()">sign in</a>
      <br>
      <a href="javascript:void(0)" ng-click="view.name = 'signup'">go to sign up page</a>
    </div>
    <div ng-switch-when="signup" ng-controller="signUpCtrl">
      <h1>this is sign up page</h1>
      <a href="javascript:void(0)" ng-click="signup()">sign up</a>
      <br>
      <a href="javascript:void(0)" ng-click="view.name = null">go to sign in page</a>
    </div>
  </div>
</body>

Here mainCtrl holds view.name and by default ng-switch-default works means your sign in page, then when you click

<a href="javascript:void(0)" ng-click="view.name = 'signup'">go to sign up page</a>

view.name model changed and your sign-up page appear.

Check the Demo

That looks great in the demo, but when I try to replicate in my app a blank page loads when I click on sign up- can you have a look at my edit? — bookthief, Feb 11 '14 at 11:40
Never mind- I had a stray div tag. This works perfectly, thank you. — bookthief, Feb 11 '14 at 14:20

alfonsob · Answer 2 · 2014-02-11T14:54:08.310

1

move the app controller to the html tag, then the directive in your body tag should read if you want to match an expression

<html ng-app="myApp">
    <body ng-switch="signup">

see here

where signup is a boolean in your myApp scope, that will presumably be changed when the signIn criteria is satisfactory

$rootScope.signup = true;

you can also achieve similar with the ng-show and ng-hide directives

edited Feb 11 '14 at 14:54

answered Feb 11 '14 at 10:14

alfonsob

635
1
6
16

Would this boolean go in my signup Ctrl? Or should I have a main Ctrl for the entire app? An example of what this might look like would be greatly appreciated, very new to the whole MVC concept. – bookthief Feb 11 '14 at 10:16
probably you should have a separate controller for signin/out but this might set a flag in the application controller, really depends on your requirements - there are many examples out there of sign in for single page apps – alfonsob Feb 11 '14 at 10:23
SignIn is a different function that is called when the user inputs their username and password information and then clicks on the sign in button. The ng-click for "signup" is the one which needs to switch the templates.. – bookthief Feb 11 '14 at 10:55
@alfonsob after setting `ng-switch="signup"` on body and trying to set this value like `$scope.signup = true;` how this works ? – Tasnim Reza Feb 11 '14 at 11:23
@Reza i was assuming that signup was being set in the app controller which should be on the html tag, have edited my answer accordingly. – alfonsob Feb 11 '14 at 14:20
@Reza also your answer is more complete so have upvoted it as the more correct answer – alfonsob Feb 11 '14 at 14:23

Using ng-switch to swap templates

2 Answers2