ng-Route is not loading the view, a blank screen is displayed without any errors

Question

I am trying to creae an application in angular using ng-route but i cannot get it to work.

I did search the issue and tried suggestions like to move my ng-app to but nothing seems to work.

I have added a plunker link below

http://plnkr.co/edit/a8VIRzloIMqANK4f8YXb?p=preview

Can someone help

adding the code here too

index html

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script type="text/javascript" src="dist/ng-table.min.js"></script>
    <link rel="stylesheet" href="dist/ng-table.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
    <link href="main.css" rel="stylesheet" />
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="DemoCtrl.js"></script>


</head>
  <body  ng-controller="DemoCtrl" ng-app="stockApp">
    <header>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <h1 class="stockHeader">Stock App</h1>
          <a class="blog-nav-item pull-right" href="#/">Login</a>
          <a class="blog-nav-item pull-right" href="#/stock">Stock</a>
          <a class="blog-nav-item active pull-right" href="#/addTools">Add Tools</a>
          </nav>
      </div>
    </div>
    </header>
    <div ng-view></div>
  </body>
</html>

app.js

var sampleApp = angular.module('stockApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'login.html',
        controller: 'DemoCtrl'
      }).
      when('/stock', {
        templateUrl: 'stockStatus.html',
        controller: 'DemoCtrl'
      }).
      when('/addTools', {
        templateUrl: 'addTools.html',
        controller: 'DemoCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

DemoCtrl.js

var app = angular.module('stockApp', ['ngTable']).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})

other than these have 3 partials.

the partials are in the same folder as the other files – naah Apr 09 '15 at 03:48 — naah, Apr 09 '15 at 03:48

score 4 · Accepted Answer · edited May 23 '17 at 10:28

See this fork of your original plunker where the code segments below have been updated: http://plnkr.co/edit/91XYMEC85Shgu6kQSrty?p=preview

// DemoCtrl.js
var app = angular.module('controllers', []).
            controller('DemoCtrl', function($scope) {
               $scope.stock="In Stock!"
            })

// app.js
var sampleApp = angular.module('stockApp', ['ngRoute', 'controllers']);

First, your controller code was re-initializing the stockApp module by passing in dependencies. If you need separate depedencies for your controllers, create them as a separate module and make your app dependent on that module.

Second, I updated the versions of angular and angular JS. Conflicting versions can cause issues as per this prior answer: Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>

while running the same code in eclipse it dosent works. it giving error as : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=stockApp&p1=Refere…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A1) any suggestions where it might go wrong. — naah, Apr 10 '15 at 05:41
I'm not sure; if it works the way you expect in the plunker I posted but has an issue when running in your local project my guess is that the code wasn't applied correctly. Did you make sure you replace the angular script references instead of just adding them, and did you put the two code blocks in their respective files? Did you tweak anything like the controller module name or make any other changes that could've been typoed/incorrect? — Travis, Apr 10 '15 at 16:51

score 0 · Answer 2 · answered Nov 01 '15 at 02:51

One additional thing to check on... make sure you're loading your angular js files (controllers, services, factories, etc) in the correct order. For example, if a controller uses a service, the service needs to be loaded into the DOM before the controller.

Additionally, make sure that none of your services or factories are re-initializing the app. Your code should NOT look like this:

angular.module('app', [])
    .service('TrxnService', function () {
         //code here
     })

But instead, it should look like this (without the brackets)...

 angular.module('app')
     .service('TrxnService', function () {
          //code here
      })

NOTE FOR NEWBIES: replace 'app' with whatever you named your app in your top level module declaration.

ng-Route is not loading the view, a blank screen is displayed without any errors

2 Answers2