why ng-view doesn't display anything in my angularjs code

Question

I'm new to AngularJS and I tried creating a sample login page and I tried routing to other page on successful login but nothing shows up in ng-view and my code has no error. What could be the problem?

index.html

<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="maincontroller.js"></script>    
</head>
<body>
<div ng-view>
</div>
</body>
</html>

controller

var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
     .when('/', {
        templateUrl: 'login.html',
        controller: 'maincontroller'
    })
    .when('/dashboard', {
        templateUrl: 'dashboard.html'
    })
    .otherwise('/', {
        templateUrl: '/'
    })
    });
 app.controller('maincontroller', function($scope, $location) {
 $scope.submit = function($scope) {
 var username = $scope.username;
 var password = $scope.password;
if ($scope.username == 'ashok' && $scope.password == 'ashok') {
        $location.path('/dashboard');
    } else {
        windows.alert('wrong stuff');
}
};
});

login.html

<div ng-controller="maincontrol">


<form action="/" name="formgroup">
    <label>Username:<input type="text" id="username" ng-model="username"/></label><br>
    <label>Password:<input type="password" id="password" ng-model="password"/></label><br>
    <button type="button" ng-click="submit()">Login</button>
</form>

You missed the ng-app='myapp' in your HTML

Sankar
– Sankar

2018-01-18 16:03:13 +00:00
Commented Jan 18, 2018 at 16:03 — Sankar
– Sankar, Commented Jan 18, 2018 at 16:03

Sankar · Accepted Answer · 2018-01-18 16:19:50Z

0

You should mention ng-app in your HTML to make this an Angular app.

<html ng-app='myapp'>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
  <script src="script.js"></script>
</head>

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

</html>

Maincontroller.js

var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'login.html',
      controller: 'maincontroller'
    })
    .when('/dashboard', {
      templateUrl: 'dashboard.html'
    })
    .otherwise('/', {
      templateUrl: '/'
    })
});
app.controller('maincontroller', function($scope, $location) {
  $scope.submit = function() {
    var username = $scope.username;
    var password = $scope.password;
    if ($scope.username == 'ashok' && $scope.password == 'ashok') {
      $location.path('/dashboard');
    } else {
      windows.alert('wrong stuff');
    }
  };
});

$scope is already injected in to the controller and you are passing that as a parameter to your submit function which is undefined since you did not pass anything on submit.

Login.html

<form action="/" name="formgroup">
    <label>Username:<input type="text" id="username" ng-model="username"/></label><br>
    <label>Password:<input type="password" id="password" ng-model="password"/></label><br>
    <button type="button" ng-click="submit()">Login</button>
</form>

Since you are injecting controller on routing, You don't have to use ng-controller in your login.html. It makes the controller execute again.

Check this Plunker: https://plnkr.co/edit/8jPJ7WOa3ixjqeRU8bpg?p=preview

edited Jan 18, 2018 at 16:19

answered Jan 18, 2018 at 16:08

Sankar

7,1772 gold badges36 silver badges57 bronze badges

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

2 Comments

Ashok Over a year ago

Thank you @Sankar

Sankar Over a year ago

Glad That helped :)

Himanshu sharma · Accepted Answer · 2018-01-18 18:20:48Z

0

I will recomment to use ng-app in body .

<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="maincontroller.js"></script>    
</head>
<body ng-app="myapp">
<div ng-view>
</div>
</body>
</html>

also User maincontroller in login page

<div ng-controller="maincontroller">


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

edited Jan 18, 2018 at 18:20

answered Jan 18, 2018 at 16:10

Himanshu sharma

8,0436 gold badges48 silver badges82 bronze badges

Collectives™ on Stack Overflow

why ng-view doesn't display anything in my angularjs code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related