Angularjs change view without a click

Question

I am stil new to Angular, but trying, very hard, to get my head round it. Basically, I just want to move from one view, to another one function is complete. Here is the code:

App.controller('clientLogin', function ($scope, $http, $route) {
$scope.clientLoginBt = function () {
    var sun = $('#ClientUsername').val();
    var spa = $('#ClientPassword').val()

    $http({url: "/sources/",
        headers: {"X-Appery-Database-Id": dbid},
        params: {where: '{"$and" : [{"username": "' + sun + '"}, {"password" : "' + spa + '"}]}'}})
        .success(function (data) {
            console.log(data.length);
            $scope.clientLogggedin = data;
            if (data.length > 0) {
                $route.clientLogggedin();

            } else {

            }
        })

        .error(function (status) {
            console.log('data on fail: ' + status);
        });
   }
});

Above, if the data comes back with more than one row, the user log is correct, and I just want to change view!

I have tried $location, did not work, and as Angular is really simple to use, in the amount of coding, I cannot see any info on it, other than if you click, it starts a controller.

Here is the HTML:

        <div class="row" ng-controller="clientLogin">
            <div class="large-12 medium-12">
                <input type="text" id="ClientUsername" placeholder="Enter Username" />
                <input type="password" id="ClientPassword" placeholder="Enter Password" />
                <button ng-click="clientLoginBt()">Login</button>
            </div>
        </div>

The page I am looking to jump to, within the is called clientLoggedIn.html.

I have also added it to the config, thinking i could access it with $route :

 App.config(function ($routeProvider) {
   $routeProvider
    .when('/',
    {
        templateUrl: 'views/home.html'
    })
    .when('/userLogin', {
        templateUrl : 'views/userLogin.html',
        controller: 'userLoginController'
    })
    .when('/clientLogin', {
        templateUrl : 'views/clientLogin.html',
        controller: 'clientLoginController'
    })
    .when('/clientLoggedIn', {
        templateUrl : 'views/clientLoggedIn.html',
        controller: 'clientLoggedInController'
    })
    .otherwise({
        redirectTo : '/'
    }
);
});

Any ideas on what I am doing wrong please ?

Thanks in advance.

Patrick · Accepted Answer · 2014-03-26 17:15:25Z

2

Using path method of $location should do the trick. Since you want to get to clientLoggedIn.html, you would need to use the matching route (/clientLoggedIn):

$location.path("/clientLoggedIn");

Be sure that $location service is injected into your App Controller. This is the line you should probably replace with what I have above:

$route.clientLogggedin();

answered Mar 26, 2014 at 17:15

Patrick

6,9783 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Walker Over a year ago

That did it. Not sure why it never worked before. But that did do it this time. I knew it would have been simple.

dmahapatro · Accepted Answer · 2014-03-26 17:20:36Z

1

It is just a matter of checking an indicator whether the $http call was successful or not. If you are not willing to add a routing for clientLoggedIn.html. You can do something like below, just to enable the logged in page:

<div class="row" ng-controller="clientLogin">
    <div class="large-12 medium-12" ng-hide="sucessfulLogin">
        <input type="text" id="ClientUsername" placeholder="Enter Username" />
        <input type="password" id="ClientPassword" placeholder="Enter Password"/>
        <button ng-click="clientLoginBt()">Login</button>
    </div>
    <ng-include src="'views/clientLoggedIn.html'" ng-show="sucessfulLogin">
    </ng-include>
    <!-- or just include the DOM element here if you do not 
      want a separate html altogether-->
</div>

and in the REST call:

if (data.length > 0) {
    //Assuming the flag in pre-initialized to false in controller
    $scope.sucessfulLogin = true;
} else {

}

Also note, using ng-include directive you can still use a separate controller in clientLoggedIn.html if you are willing to. Just have to use ng-controller in the first element inside clientLoggedIn.html.

answered Mar 26, 2014 at 17:20

dmahapatro

50.4k7 gold badges94 silver badges122 bronze badges

8 Comments

Andrew Walker Over a year ago

Really liked this solution, thank you for sharing it.

dmahapatro Over a year ago

Glad it was helpful. When you mentioned I have also added it to the config, thinking i could access it with $route, I assumed you were compelled to add a route to access the page where adding a route isnot necessary right now. So I came up with the simple solution following the KISS principle. :) @AndrewWalker

Andrew Walker Over a year ago

I do seem to be getting an error:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.15/$parse/syntax?p0=views&p1=is%20an%20unexpected%20token&p2=2&p3=%2Fviews%2FclientLoggedIn.html&p4=views%2FclientLoggedIn.html     at Error (native)

dmahapatro Over a year ago

Yes, the relative path to clientLoggedIn.html has to be provided here. If this is a web-app (a javaish example) something like js/views/clientLoggedIn.html has to be used, which is relative to the app and not the directory location relative to parent html. I hope I was able to make it clear.

dmahapatro Over a year ago

Yes, that is what I mentioned an app relative path to the html has to be provided to access the html. Also note usage is like src="'relative/path/to/html'" single quotes inside double quotes.

|

Collectives™ on Stack Overflow

Angularjs change view without a click

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related