AngularJS two templates routing trouble

Question

I am creating Angular app and I need two templates(one for working with workout and one for working with diet) so I created workout.html and diet.html and I want to change page content in ng-view but now it isn't work(I get blank content).

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>WorkoutExport</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="js/script.js"></script>
    <link rel="stylesheet" href="css/style.min.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body  ng-controller="workoutController">
    <div class= "container">
      <div class="col-sm-10 col-sm-offset-1 appContent">
          <a href="#">Workout</a>
          <a href="#diet">Diet</a>

          <div id="main">
            <div ng-view></div>
          </div>

    </div>
   </div>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

script.js

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

app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl : 'pages/workout.html',
                controller  : 'workoutController'
            })
            .when('/diet', {
                templateUrl : 'pages/diet.html',
                controller  : 'dietController'
            })
    });

app.controller('workoutController', function($scope) {

    $scope.records = [
        {workout: "", series:"", reps: "", day: ""}
    ];

    // add record
    $scope.add = function() {
        $scope.records.push( {workout: $scope.inputExercise,series: $scope.inputSeries, reps:$scope.inputReps, day:$scope.inputDay});
        $scope.inputExercise="";
        $scope.inputSeries="";
        $scope.inputReps="";
        $scope.inputDay="";
    };

    // delete record
    $scope.remove = function(index) {
        $scope.records.splice(index, 1);
    };

    //export as PDF
    $scope.export = function(){
        html2canvas(document.getElementById('exportpdf'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("workoutPlan.pdf");
            }
        });
    }

    $scope.MondayFilter = function (item) {
        return item.day === 'Monday' ;
    };

    $scope.TuesdayFilter = function (item) {
        return item.day === 'Tuesday' ;
    };

    $scope.WednesdayFilter = function (item) {
        return item.day === 'Wednesday' ;
    };

    $scope.ThursdayFilter = function (item) {
        return item.day === 'Thursday' ;
    };

    $scope.FridayFilter = function (item) {
        return item.day === 'Friday' ;
    };

    $scope.SaturdayFilter = function (item) {
        return item.day === 'Saturday' ;
    };

    $scope.SundayFilter = function (item) {
        return item.day === 'Sunday' ;
    };
});

app.controller('dietController', function($scope) {
  $scope.message =' Diet';
};

pages/workout.html

<h1>WorkoutExport</h1>
<p>Tool for creating workout plans build with AngularJS</p>
<h2>Add exercise</h2>
<div>
    <input type="text" ng-model="inputExercise" placeholder="Enter the exercise">
    <input type="text" ng-model="inputSeries" placeholder="Enter the number of series">
    <input type="text" ng-model="inputReps" placeholder="Enter the range of repetition">
    <select ng-model="inputDay">
        <option>Monday</option>
        <option>Tuesday</option>
        <option>Wednesday</option>
        <option>Thursday</option>
        <option>Friday</option>
        <option>Saturday</option>
        <option>Sunday</option>
    </select>
    <button class="btn btn-default" type="submit" ng-click="add()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>

<div id="exportpdf">
    <h2>Your training plan</h1>
    <ul>
        <h3>Monday</h3>
        <li ng-repeat="record in records | filter:MondayFilter">
            {{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps}}
            <button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </li>
    </ul>
    <ul>
        <h3>Tuesday</h3>
        <li ng-repeat="record in records | filter:TuesdayFilter">
            {{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
            <button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </li>
    </ul>
    <ul>
        <h3>Wednesday</h3>
        <li ng-repeat="record in records | filter:WednesdayFilter">
            {{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
            <button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </li>
    </ul>
    <ul>
        <h3>Thursday</h3>
        <li ng-repeat="record in records | filter:ThursdayFilter">
            {{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
            <button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </li>
    </ul>
    <ul>
        <h3>Friday</h3>
        <li ng-repeat="record in records | filter:FridayFilter">
            {{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
            <button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </li>
    </ul>
    <ul>
        <h3>Saturday</h3>
        <li ng-repeat="record in records | filter:SaturdayFilter">
            {{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
            <button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </li>
    </ul>
    <ul>
        <h3>Sunday</h3>
        <li ng-repeat="record in records | filter:SundayFilter">
            {{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
            <button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </li>
    </ul>


</div>
<button class="btn btn-default exportBtn" ng-click="export()">export to PDF</button>

pages/diet.html

<h1>DietPage</h1>

{{message}}

Do you see some wrong code? I appreciate any help.

what does your url looks like? if it does not have a / at the end you need to redirect to /, add .otherwise({redirectTo:'/'}); to the end of your route definitions. — Exlord
– Exlord, Commented May 21, 2017 at 10:53
remove the ng-controller="workoutController" the router will set the controller as needed. — Exlord
– Exlord, Commented May 21, 2017 at 11:08

user2340824 · Accepted Answer · 2017-05-21 11:03:48Z

Your Diet Controller is missing a bracket:

app.controller('dietController', function($scope) {
   $scope.message =' Diet';
});

You are also not loading in the ngRoute Library (https://docs.angularjs.org/api/ngRoute)

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript"></script>

<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>WorkoutExport</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
        <script src="js/script.js"></script>
        <link rel="stylesheet" href="css/style.min.css">
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    </head>
    <body  ng-controller="workoutController">
        <div class= "container">
            <div class="col-sm-10 col-sm-offset-1 appContent">
                <a href="#">Workout</a>
                <a href="#diet">Diet</a>

                <div id="main">
                    <div ng-view></div>
                </div>

            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

Making these two changes, and it works for me now.

I something wrong, because when i click 'diet' link it works perfect, but when I click 'workout' it doesn't display workout.html content. I don't have any idea.

ShukiB · Accepted Answer · 2017-05-24 16:48:15Z

0

to change route in Single Page Application (SPA) in AngularJS you dont use just

<a href="#diet">Diet</a>

I would change the index.html so it would contain another controller for the navigation with a banner and not assign the workoutController there.

more, for changing route in angular you need to inject ngRoute in you app creation:

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

and use it in a function like this:

app.controller('workoutController', function($scope, $location) {
    $scope.navigate = function(pageToNavigate) {
        $location.path(pageToNavigate);
    }
});

you can build navigation that will activate with ng-click and wil invoke $location.path

edited May 24, 2017 at 16:48

answered May 21, 2017 at 10:50

ShukiB

761 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS two templates routing trouble

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