templates not loading in angular routing

Question

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

Sajeetharan · Accepted Answer · 2018-02-02 07:36:02Z

1

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 Feb 2, 2018 at 7:36

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Khari Thompson Over a year ago

thank you! so weird--those were actual errors in my plunker; on my machine i was using a pages directory and my script was titled 'app.js'. however on my plunker changing those two things are what fixed the functionality! not sure what's happened there but i'm going to use this set up as my template for future spas

Aref Zamani · Accepted Answer · 2018-02-02 07:33:03Z

1

you must just change your script src:

 <script type="text/javascript" src="script.js"></script>

and change your templateUrl address:

 $routeProvider

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

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

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

});

update: for binding data to your view you must use ng controller in breath.html and main.html

answered Feb 2, 2018 at 7:33

Aref Zamani

2,0622 gold badges23 silver badges42 bronze badges

Collectives™ on Stack Overflow

templates not loading in angular routing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related