CODEWITHSUNDEEP
htmlangularjsauthenticationangular-routing
Ravisankar R
Ravisankar R

Reputation: 37

Angular routing is not working, url is displayed but page is not loading

I have added angular.min.js, angular-route.min.js

The issue is when the login button is clicked the url changes to '/home' but the page home.html is not displaying. I've tried adding controller under templateUrl but it's not working

<main class="container" ng-app="Myapp">
<div class="row">
  <div class="login-page" ng-controller="loginCtrl">
    <div class="form">
      <form class="login-form">
        <input type="text" placeholder="username" ng-model="username"/>
        <input type="password" placeholder="password" ng-model="password"/>
        <button type="submit" ng-click="submit()">login</button>
        <p class="message">Not registered? <a href="#">Create an account</a></p>
      </form>
    </div>
  </div>
</div>


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

 app.config(function ($routeProvider, $locationProvider){
 $locationProvider.hashPrefix('');
 $routeProvider
 .when('/', {
    templateUrl: 'index.html'
 })

 .when('/home', {
    templateUrl: 'home.html'
 })
 .otherwise({
    redirectTo: '/'
 });
});


app.controller('loginCtrl', function($scope, $location){
$scope.submit = function(){
    var username = $scope.username;
    var password = $scope.password;

    if($scope.username =='admin' && $scope.password == 'pwd'){
        $location.path('/home');
    }
    else {
        alert("Invalid Credentials");
    }

});

Upvotes: 1

Views: 872

Answers (3)

Youness HARDI
Youness HARDI

Reputation: 532

If the index.html has ng-app="Myapp" delete it from home.html and add ng-view to to the right place in index.html . So angular route will replace ng-view with your home.html

Upvotes: 0

Vivz
Vivz

Reputation: 6630

You need to abstract your application and put it in different files and include the reference to these files in your index.html

index.html

 <main class="container" ng-app="Myapp">

        <div class="row" ng-controller="mainCtrl">
          <div ng-view></div>
        </div>
   </main>

login.html

<div class="login-page">
    <div class="form">
      <form class="login-form">
        <input type="text" placeholder="username" ng-model="username"/>
        <input type="password" placeholder="password" ng-model="password"/>
        <button type="submit" ng-click="submit()">login</button>
        <p class="message">Not registered? <a href="#">Create an account</a></p>
      </form>
    </div>
  </div>

Config file

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

 app.config(function ($routeProvider, $locationProvider){
 $locationProvider.hashPrefix('');
 $routeProvider
 .when('/', {
    templateUrl: 'login.html',
    controller:'loginCtrl'
 })

 .when('/home', {
    templateUrl: 'home.html',
    controller: 'homeCtrl'
 })
 .otherwise({
    redirectTo: '/'
 });
});

Main Controller

app.controller('mainCtrl', function($scope, $location){

    });

Home Controller

app.controller('homeCtrl', function($scope, $location){

    });

Login Controller

app.controller('loginCtrl', function($scope, $location){
$scope.submit = function(){
    var username = $scope.username;
    var password = $scope.password;

    if($scope.username =='admin' && $scope.password == 'pwd'){
        $location.path('/home');
    }
    else {
        alert("Invalid Credentials");
    }

});

Upvotes: 1

Qinglu
Qinglu

Reputation: 26

You need a "ui-view elment" to wrap dynamic contents. then home.html will be loaded/compiled within this "ui-view" element.

Upvotes: 0

Related Questions