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){
}]);
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'
});
});