如何使用 ngRoute 导航到另一个页面

Question

我的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>

我的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>

我的 Js 和 Json 文件

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

Objective 是制作锚文本，link 是它的主要内容，html 并且单击它时应该在我的 ng-view 中显示 main.html .

我试了很多方法看你管，但都不管用。 ng-view 正在显示模板，但未显示模板 url.

Answer 1

我已经解决了这个问题，但是代码中有很多错误（缺少doctype，没有结束标记的div等等），所以我重新编码了很多。我已经删除了 $locationprovider，IMO 它不是一个很好的功能，人们不能为该页面添加书签（除非您在 ie.HTACCESS 中进行大量更改）。所以我不喜欢它。我还更新了 angularjs 到 1.7.8.

如果您想使用 locationprovider，请注意升级到 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"
    ]
}
});

如何使用 ngRoute 导航到另一个页面

How To Navigate To Another Page With ngRoute

routing

angularjs

ngroute