templates not loading in angular routing

Issue

i have three views: a homepage a second view and a third view. there’s no error and whenever i navigate using the links it’s just blank. i’ve experimented with the href and tried different things in the routing pattern string but i can’t seem to get it to work. i’ve looked around here and online and haven’t come across any solutions. any help would be appreciated.

my code:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <script type='text/javascript' id='lt_ws' src='http://localhost:5678/socket.io/lighttable/ws.js'></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>

  <script type="text/javascript" src="https://code.angularjs.org/1.5.1/angular.min.js"></script>
  <script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body>
  <div>
    <a href="#/">home</a>
    <a href="#/view2">main</a>
    <a href="#/view3">no</a>
  </div>
  <div class=container>
    <div class=ng-view>
  </div>
  </div>
</body>
</html>

js:

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

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

  .when('/', {
    templateUrl: 'pages/area-code.html',
    controller: 'mainController'
   })

  .when( '/view2', {
    templateUrl: 'pages/breath.html',
    controller: 'secondController'
  })

  .when( '/view3', {
        templateUrl: 'pages/main.html',
        controller: 'secondController'
        });

});


myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter){

  $scope.characters = 3;


}]);



  myApp.controller('secondController', ['$scope', '$filter', function($scope, $filter){

  }]);

plunkr

Solution

There were two issues in your plunker,

(i) Need to load script.js instead of app.js

(ii) Your template paths are wrong! remove pages from each path.

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

  .when('/', {
    templateUrl: 'area-code.html',
    controller: 'mainController'
   })

  .when( '/view2', {
    templateUrl: 'area-code.html',
    controller: 'secondController'
  })

  .when( '/view3', {
        templateUrl: 'main.html',
        controller: 'secondController'
        });

});

WORKING DEMO

Answered By – Sajeetharan

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.