CODEWITHSUNDEEP
javascriptangularjs
Morgan
Morgan

Reputation: 140

AngularJS two templates routing trouble

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.

Upvotes: 1

Views: 76

Answers (2)

ShukiB
ShukiB

Reputation: 76

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

Upvotes: 0

user2340824
user2340824

Reputation: 2152

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.

Upvotes: 1

Related Questions