CODEWITHSUNDEEP
angularjs
Dan Karlin
Dan Karlin

Reputation: 17

Angular Views are not Loading

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.

Upvotes: 0

Views: 43

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17494

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 ;)

Upvotes: 1

Related Questions