AngularJS simple Loginform

Question

I've just started to build a prototype in AngularJs/Bootstrap. I'm new to angular but it seem interesting enough to evaluate for some upcoming webprojects. Step 1 would be to get some simple Loginform to work with hardcoded values and not bother to communicate with the backend service.

However, I read a bunch of tutorials but can't get the routing to work, the mysterious variable $location is always undefined no matter how many times I pass it around. Is perhaps the use of it old-fashioned? I tried some examples from this site but none works, $location is'nt among us anymore it seems? Last example I tried:

angular.module('myApp.controllers', []).
controller('loginController', ['$scope', function($scope, $route, $routeParams, $location) {
      $scope.auth = function() {
          //check something useful
          $location.url('/view2');
      };
}])

If someone has a simple and working example (or an url for a trusted source of information) of a form and a controller that use routing to another partial, I would be delighted.

Regards

post the code where $location is not working, please.

Davin Tryon
– Davin Tryon

2013-11-12 08:39:46 +00:00
Commented Nov 12, 2013 at 8:39 — Davin Tryon
– Davin Tryon, Commented Nov 12, 2013 at 8:39

Community · Accepted Answer · 2017-05-23 12:32:26Z

8

I have been struggling with the same issue. I posted this question. The answer shed some light. I was then able to force users to login and only then will they be able to access other links on the navbar. Then I had the issue of nav bar being visible on the login screen. So I created a work-around:

1) I split the pages: using ng-include I was able to load login.html by default. login.html and index.html does not have ng-view.

2) Once the user is authenticated, ng-view must be inlcuded so that all views required on the navigation can work

index.html

   <html ng-app="plunker">

      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link rel="stylesheet" href="style.css" />
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="app.js"></script>
      </head>

      <body ng-controller="AppCtrl">
        <div ng-include="template.url"></div>
      </body>

</html>

login.html

<h1>Login Page</h1>

<form ng-submit="login(username, password)">
  <label>User name</label>
  <input type="text" ng-model="username" class="ng-pristine ng-valid">
  <label>Password</label>
  <input type="password" ng-model="password" class="ng-pristine ng-valid">
  <br/>
  {{loginError}}  {{loggedUser}}
  <br/><br/>
  <button class="btn btn-success" ng-click="">Submit</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>

Then if authentication passes I change templates (ng-include) and make home.html the default page

app.controller('AppCtrl', function($scope, authentication) {
  $scope.templates =
  [
    { url: 'login.html' },
    { url: 'home.html' }
  ];
    $scope.template = $scope.templates[0];
  $scope.login = function (username, password) {
    if ( username === 'admin' && password === '1234') {
        authentication.isAuthenticated = true;
        $scope.template = $scope.templates[1];
        $scope.user = username;
    } else {
        $scope.loginError = "Invalid username/password combination";
    };
  };

};

Home.html has ng-view which will do the usual and the user has access to other pages.

This is what I have so far, here is a working example, hope it helps.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Nov 12, 2013 at 9:11

Simo Mafuxwana

3,7927 gold badges45 silver badges59 bronze badges

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

2 Comments

elwis Over a year ago

Interesting indeed, I will have a closer look for sure, thanks

PK-1825 Over a year ago

I need complete login functionality like if existed user allow them to login if not redirect them to the registration page if users forget their password allow them to reset the password using OTP to the mobile number.

CD.. · Accepted Answer · 2013-11-12 09:02:38Z

2

This would work:

controller('loginController', ['$scope', '$route', '$routeParams', '$location', function($scope, $route, $routeParams, $location) {
      $scope.auth = function() {
          //check something useful
          $location.url('/view2');
      };
}])

Each resource you want to inject into your controller should be passed as a string in the array.

answered Nov 12, 2013 at 9:02

CD..

74.4k25 gold badges160 silver badges170 bronze badges

1 Comment

elwis Over a year ago

Oh, that's simple and nice. Guess I'm getting confused by all the examples on the web, often with a different layout then "angular-seed" project. Thank you!

Collectives™ on Stack Overflow

AngularJS simple Loginform

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related