AngularJS: ng-view directive not working

Question

I'm learning AngularJS right now and I'm doing a simple web application that involves the use of ng-view directive. But as I try to run my codes, nothing appears on my Chrome browser, as if the ng-view was not really working. My index.html file is shown below:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Route Sample</title>
 <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
 <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
 <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body ng-app="routeApp">
 <h1>Sample Routing | ng-view directive</h1>

 <div class="container">
  <ul>
   <li><a href="#Angular">Angular JS Topics</a></li>
   <li><a href="#Node">Node JS Topics</a></li>
  </ul>
 </div>
 <div class="container-ngView">
  <div ng-view></div>
 </div>

 <script>
  var app=angular.module('routeApp', ['ngRoute']);
  app.config(['$routeProvider', function($routeProvider){
   $routeProvider
   .when('/Angular', {
    templateUrl: 'angular.html',
    controller: 'AngularCtrl',
   })
   .when('/Node', {
    templateUrl: 'node.html',
    controller: 'NodeCtrl',
   });
  }]);

  app.controller('AngularCtrl', function($scope){
   $scope.tutorial = [
   {Name:"Controllers", Description :"Controllers in action"},
            {Name:"Models", Description :"Models and binding data"},
            {Name:"Directives", Description :"Flexibility of Directives"}
   ]
  });
  app.controller('NodeCtrl', function($scope){
   $scope.tutorial = [
   {Name:"Promises", Description :"Power of Promises"},
            {Name:"Event", Description :"Event of Node.js"},
            {Name:"Modules", Description :"Modules in Node.js"}
   ]
  });
 </script>


</body>
</html>

And this is my angular.html file

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

And this is my node.html file

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

I did try to separate my js script file from my main html file but the result is still the same. I dunno what to do and where to find the problem. I hope you could help me with this one. Thank you!

Aleksey Solovey · Answer 1 · 2018-06-27T08:45:00.903

You need to reference the ngRoute module script after AngularJS. Simply swap them around.

Additionally you are using AngularJS 1.6.X, which have different hash-bang in URL. You need to change your href from # to #!.

Here is a working example:

var app = angular.module('routeApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/Angular', {
      templateUrl: 'angular.html',
      controller: 'AngularCtrl',
    })
    .when('/Node', {
      templateUrl: 'node.html',
      controller: 'NodeCtrl',
    });
}]);

app.controller('AngularCtrl', function($scope) {
  $scope.tutorial = [{
      Name: "Controllers",
      Description: "Controllers in action"
    },
    {
      Name: "Models",
      Description: "Models and binding data"
    },
    {
      Name: "Directives",
      Description: "Flexibility of Directives"
    }
  ]
});
app.controller('NodeCtrl', function($scope) {
  $scope.tutorial = [{
      Name: "Promises",
      Description: "Power of Promises"
    },
    {
      Name: "Event",
      Description: "Event of Node.js"
    },
    {
      Name: "Modules",
      Description: "Modules in Node.js"
    }
  ]
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Route Sample</title>
  <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
</head>

<body ng-app="routeApp">
  <h1>Sample Routing | ng-view directive</h1>

  <div class="container">
    <ul>
      <li><a href="#!Angular">Angular JS Topics</a></li>
      <li><a href="#!Node">Node JS Topics</a></li>
    </ul>
  </div>
  <div class="container-ngView">
    <div ng-view></div>
  </div>

  <script type="text/ng-template" id="angular.html">
    <h2>Angular</h2>
    <ul ng-repeat="ptutor in tutorial">
      <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
    </ul>
    <a href="#!/">Back</a>
  </script>

  <script type="text/ng-template" id="node.html">
    <h2>Node</h2>
    <ul ng-repeat="ptutor in tutorial">
      <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
    </ul>
    <a href="#!/">Back</a>
  </script>

</body>

</html>

@natnat this is a working example, so the problem is on your end. Try checking for any errors in the console (F12, or Ctrl + Shift + J). Also, are you running the code on a local server? I believe ngRoute requires that — Aleksey Solovey, Jun 27 '18 at 08:49
thank you for this solution. yes it did worked. it worked in the plunker. i tried to copy the answer you provided in my local html but it didn't work. i still can't see the routed pages in my Chrome browser. i'm using sublime by the way — natnat, Jun 27 '18 at 08:54
how come this is not working on the sublime? but its working fine in the Plunker? — natnat, Jun 27 '18 at 08:57
sublime is just a text editor. You need a **local server** to run the code in the browser. Try something simple like [http-server](https://www.npmjs.com/package/http-server). Also mark the question as correct, if you found it useful — Aleksey Solovey, Jun 27 '18 at 09:00
@natnat you can use Brackets editor though, or install npm live-server — Prasanna, Aug 27 '18 at 14:14

Sajeetharan · Answer 2 · 2018-06-27T12:49:55.613

1

You need to call angular-route reference after loading angular, change the order of references as

<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>

EDIT

Should be an issue with the references. Check the following one,

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

DEMO

EDIT:

We were able to solve the issue via chat, the solution was to clear the cache and run the application via xampp since it cannot load the templates when you access via browser

edited Jun 27 '18 at 12:49

answered Jun 27 '18 at 07:56

Sajeetharan

216,225
63
350
396

i change it already but still not working. I can't view it on Chrome – natnat Jun 27 '18 at 08:01
yeah it worked in plunker but it didn't work in my local html. how come? huuhu i'm still confused. i'm using sublime text 3 by the way – natnat Jun 27 '18 at 08:32
change the references , it is not an issue with sublime – Sajeetharan Jun 27 '18 at 08:32
i changed it already but the problem is still the same sir hhuhu – natnat Jun 27 '18 at 08:33
thats very strange, can you double check – Sajeetharan Jun 27 '18 at 08:34
very strange indeed. i've been looking for answers for 3 days but i'm still stuck into this problem. – natnat Jun 27 '18 at 08:38
check Aleksey Solovey answer, if that does not work let's see – Sajeetharan Jun 27 '18 at 08:39
i checked his answer Sajeetharan. it also worked in th Plunker, but it didnt work on my local html. – natnat Jun 27 '18 at 08:55
this keeps getting weirder and weirder you know – natnat Jun 27 '18 at 08:56
give me your email sir – natnat Jun 27 '18 at 09:05
i emailed you. did you receive it sir? – natnat Jun 27 '18 at 09:14

score 1 · Answer 3 · answered Jun 27 '18 at 11:11

Use npm (node package manager) in sublime to install http-sever package. Then you can rstart the web server which would bring up your app

npm install -g http-server

Following configuration in package.json file under scripts:

"start": "http-server -a localhost -p 8000 -c-1"

Then run below command from root of your project:

Command : npm start (from root of project)

AngularJS: ng-view directive not working

3 Answers3