How To Navigate To Another Page With ngRoute

Issue

My Index.html

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="client/delljson.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<body ng-app="myApp" ng-controller="myCtrl" style="background-color:orange;">

<h1><marquee width="40%" direction="right" >Resume</marquee></h1>

<a href='#!/main'>Press</a>

<div ng-view>

</div>

</body>
</html>

My Main.html

<div class="row">
   <div class="col-md-4">
        <h2><u>Personal Information</u></h2>
        <p>{{deljson.personalInformation.name}}</p>
        <p>{{deljson.personalInformation.dob}}</p>
        <p>{{deljson.personalInformation.fatherName}}</p> 
        <p>{{deljson.personalInformation.gender}}</p>
        <p>{{deljson.personalInformation.nationality}}</p>
        <p>{{deljson.personalInformation.maritalStatus}}</p>
   </div>
<div class="col-md-4">
    <h3><u>Educational Information</u></h3>
    <h4><u>SSLC</u></h4>
    <p>{{deljson.educationInformation.sslc.institueName}}</p>
    <p>{{deljson.educationInformation.sslc.studyBoard}}</p>
    <p>{{deljson.educationInformation.sslc.percentage}}</p>
    <p>{{deljson.educationInformation.sslc.yearOfPassedout}}</p>
    <h4><u>HSC</u></h4>
    <p>{{deljson.educationInformation.hsc.institueName}}</p>
    <p>{{deljson.educationInformation.hsc.studyBoard}}</p>
    <p>{{deljson.educationInformation.hsc.percentage}}</p>
    <p>{{deljson.educationInformation.hsc.yearOfPassedout}}</p>
    <h4><u>UG</u></h4>
    <p>{{deljson.educationInformation.ug.institueName}}</p>
    <p>{{deljson.educationInformation.ug.studyBoard}}</p>
    <p>{{deljson.educationInformation.ug.percentage}}</p>
    <p>{{deljson.educationInformation.ug.yearOfPassedout}}</p>
</div>
<div class="col-md-4">
    <h3><u>Work Experience</u></h3>
    <p>{{deljson.experience.previousExperience.companyName}}</p>
    <p>{{deljson.experience.previousExperience.Position}}</p>
    <p>{{deljson.experience.previousExperience.period}}</p>
    <p>{{deljson.experience.previousExperience.responsibility}}</p>
</div>
</div>

My Js and Json File

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

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/main', {
        templateUrl : 'main.html',
        controller : 'first'
    })
   }]);

app.controller('first', ['$scope', '$locationProvider', function($scope){
    $location.path("/main.html" );
}]);

app.controller('myCtrl', function($scope) {
$scope.deljson = {
    "personalInformation": {
        "name": "Raaj Kumar",
        "dob": "13/5/1994",
        "fatherName": "Suresh",
        "gender": "Male",
        "nationality": "Indian",
        "maritalStatus": "Single"
    },
    "educationInformation": {
        "sslc": {
            "institueName": "G.K.S.V.V.J.C",
            "studyBoard": "CBSE",
            "percentage": "45%",
            "yearOfPassedout": "2009"
        },
        "hsc": {
            "institueName": "S.V.M.H.S.S",
            "studyBoard": "Matriculation",
            "percentage": "55%",
            "yearOfPassedout": "2011"
        },
        "ug": {
            "institueName": "S.T. Peter'S Engineering College",
            "course": "B.Tech (It)",
            "percentage": "59%",
            "yearOfPassedout": "2016"
        }
    },
    "experience": {
        "previousExperience": {
            "companyName": "Purple Soft Technology",
            "Position": "SEO Analyst",
            "period": "2018-19",
            "responsibility": "SEO"
        }
    },
    "personalSkills": [
        "Gaming"
    ],
    "technicalSkills": [
        "Digital Marketing",
        "HTML",
        "CSS",
        "JS"
    ]
}
});

The Objective is to make a anchor text and link the main ,html to it and when clicked it should display the main.html in my ng-view.

I tried many methods watching the you tube but its not working out. the ng-view is displaying a template but its not displaying an template url.

Solution

I have solved the problem, but there was numerous errors in the code (missing doctype, divs without end tags and so on), so I have recoded a lot of it. I have taken out the $locationprovider, IMO its not so great a feature, people cant bookmark the page,(unless you make a lot of changes in ie. HTACCESS). So I dont like it.
I have also updated angularjs to 1.7.8.

If you want to use locationprovider, please note that there was some changes to it when upgrading to 1.7.8.

INDEX.HTML

<!DOCTYPE html>
<html ng-app="myApp">
  <meta charset="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js"></script>
  <script src="/client/delljson.js"></script>
  <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
  />
  <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
  />

  <body ng-controller="myCtrl" style="background-color:orange;">
    <h1><marquee width="40%" direction="right">Resume</marquee></h1>
    <a href="#!/main">Press</a>
    <ng-view></ng-view>
  </body>
</html>

AngularJS

var app = angular.module('myApp', ['ngRoute']);
app.controller('first', function($scope){
 });
app.config(function($routeProvider) {
    $routeProvider.when('/main', {
        templateUrl : 'main.html',
        controller:'first'
    }).
    otherwise({
        redirectTo: '/'
     });    
   });
app.controller('myCtrl', function($scope) {
$scope.deljson = {
    "personalInformation": {
        "name": "Raaj Kumar",
        "dob": "13/5/1994",
        "fatherName": "Suresh",
        "gender": "Male",
        "nationality": "Indian",
        "maritalStatus": "Single"
    },
    "educationInformation": {
        "sslc": {
            "institueName": "G.K.S.V.V.J.C",
            "studyBoard": "CBSE",
            "percentage": "45%",
            "yearOfPassedout": "2009"
        },
        "hsc": {
            "institueName": "S.V.M.H.S.S",
            "studyBoard": "Matriculation",
            "percentage": "55%",
            "yearOfPassedout": "2011"
        },
        "ug": {
            "institueName": "S.T. Peter'S Engineering College",
            "course": "B.Tech (It)",
            "percentage": "59%",
            "yearOfPassedout": "2016"
        }
    },
    "experience": {
        "previousExperience": {
            "companyName": "Purple Soft Technology",
            "Position": "SEO Analyst",
            "period": "2018-19",
            "responsibility": "SEO"
        }
    },
    "personalSkills": [
        "Gaming"
    ],
    "technicalSkills": [
        "Digital Marketing",
        "HTML",
        "CSS",
        "JS"
    ]
}
});

Answered By – pbl_dk

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.