AngularJS: ng-view directive not working

Question

AngularJS: ng-view directive not working

634 Views Asked by natnat At 27 June 2018 at 07:55

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!

Original Q&A

There are 3 best solutions below

**Sajeetharan** · Answer 1 · 2018-06-27T07:56:47.877000

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

**Aleksey Solovey** · Answer 2 · 2018-06-27T08:37:38.573000

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>

**bhwp** · Answer 3 · 2018-06-27T11:11:02.607000

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

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in ROUTES

Related Questions in NG-VIEW

Trending Questions

Popular # Hahtags

Popular Questions