Angular Views are not Loading

Question

The pages aren't loading in my ng-view. All the clicked links come up as just blank. What am I doing wrong? I think I have all my routes put correctly. Thanks in advance.

index.html

<!DOCTYPE html>
 <html ng-app="soolApp">
<head>
<link rel="stylesheet" href="main.css">  
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />


  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="mainController">

    <header>
        <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Hi. I'm Dan Karlin.</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#promo"><i class="fa fa-folder-open"></i> Example 1</a></li>
                <li><a href="#rain"><i class="fa fa-folder-open"></i> Example 2</a></li>
            </ul>
        </div>
        </nav>
    </header>

<div id="main">

    <div ng-view></div>

</div>


</body>
</html>

script.js

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

soolApp.config(function($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        .when('/promo', {
            templateUrl : 'pages/promo.html',
            controller  : 'promoController'
        })

        .when('/rain', {
            templateUrl : 'pages/rain.html',
            controller  : 'rainController'
        });
});

soolApp.controller('mainController', function($scope) {
});

soolApp.controller('promoController', function($scope) {
});

soolApp.controller('rainController', function($scope) {
});

So, I'm at a loss. I have a job interview on Monday and was putting together this angular app for that purpose.

provide a plunker link, so others can debug issue and help to resolve it. — Praveen Soni
– Praveen Soni, Commented Mar 25, 2018 at 10:51

Shashank Vivek · Accepted Answer · 2018-03-25 04:39:42Z

1

I think you should check your console of browser. You have done everything right. Here is the plunkr I created from your example. Its working. Only thing you should look into is the location of html files which might be giving 404 error.

And, Best of luck for the interview ;)

answered Mar 25, 2018 at 4:39

Shashank Vivek

17.6k9 gold badges70 silver badges110 bronze badges

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

Collectives™ on Stack Overflow

Angular Views are not Loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related