CODEWITHSUNDEEP
javascriptangularjs
CaliKane
CaliKane

Reputation: 114

ng-click event doesn't seem to fire in simple Angular app

I'm learning Angular through a YouTube tutorial series. In the tutorial, you create username and password inputs, and then you use a controller and ngRoute to bring up a dashboard.html page when successful credentials are used. The problem is that when clicking the button, nothing happens, whether the proper credentials are entered or not. Everything is working on the tutorial, and I have triple checked the code thoroughly, and mine looks just like the code in the tutorial. I'm sure I must be missing something though.

What I think:

  1. There is an issue with the click event firing, so maybe there is an issue with how I am calling the function?

  2. The tutorial uses an older angular version (1.3.14), and maybe things have changed? I'm using 1.4.9, but I looked up the api data for the ng-click directive, and all seems well. I also tried using the older version to no avail.

  3. I'm doing something wrong with ngRoute, potentially $scope misuse?

I am inserting all of the code below. Thanks for taking a look!

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Place Title Here</title>
    <meta charset = "utf-8"/>
    <meta http-equiv="X-UA-compatible" content="IE-edge, chrome=1">
    <meta name = "viewport" content = "width = device - width, initial-scale = 1.0"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="controller.js"></script>
</head>
<body ng-app="mainApp">

    <div ng-view></div>
</body>
</html>

login.html

<div ng-controller="loginCtrl"></div>
<form action="/" id="myLogin">
    Username: <input type="text" id="username" ng-model="username"><br>
    Password: <input type="password" id="password" ng-model="password"><br>
    <button type="button" ng-click="submit()">Login</button>
</form>

controller.js

var app = angular.module('mainApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'login.html'
    })
    .when('/dashboard', {
        templateUrl: 'dashboard.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('loginCtrl', function($scope, $location) {
    $scope.submit = function() {
        var uname = $scope.username;
        var password =  $scope.password;
        if($scope.username == 'admin' && $scope.password == 'admin') {
            $location.path('/dashboard');
        }

        else {
            alert('Nope')
        }
    };
});

dashboard.html

Welcome User.

Upvotes: 1

Views: 1024

Answers (1)

Ryan
Ryan

Reputation: 5973

Your form needs to be inside the div with ng-controller

<div ng-controller="loginCtrl">
  <form action="/" id="myLogin">
      Username: <input type="text" id="username" ng-model="username"><br>
      Password: <input type="password" id="password" ng-model="password"><br>
      <button type="button" ng-click="submit()">Login</button>
  </form>
</div>

Otherwise it won't have access to the submit() function.

Upvotes: 2

Related Questions