如何在Angular JS中路由？

Question

我正在尝试做Angular JS路由应用程序，它的工作正常，但是我遇到了一个错误，该错误是我单击的[View Students List]不起作用，并且页面无法导航到另一页面。

下面是我的代码.. main.js

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

app.config(['$routeProvider','$locationProvider',
    function($routeProvider,$locationProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'StudentController'
        })
        .when('/viewStudents', {
            templateUrl: 'viewStudents.html',
            controller: 'StudentController'
        })
        .otherwise({
            redirectTo: '/'
        });
        $locationProvider.hashPrefix('');
        $locationProvider.html5Mode({
            enabled:true,
            requiredBase:false
        }); 
}]);

app.controller('StudentController', function($scope) {
    $scope.students = [
        {name: 'Mark Waugh', city:'New York'},
        {name: 'Steve Jonathan', city:'London'},
        {name: 'John Marcus', city:'Paris'}
    ];

    $scope.message = "Click on the hyper link to view the students list.";
});

以下是我的home.html

<div class="container">
    <h2> Welcome </h2>
    <p>{{message}}</p>
    <a ng-href="/viewStudents"> View Students List</a>
</div>

以下是我的viewStudents.html

<div class="container">
    <h2> View Students </h2>
    Search:
    <br/>
        <input type="text" ng-model="name" />
    <br/>
    <ul>
        <li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
    </ul>
    <a ng-href="/home">Back</a>
</div>

以下是我的index.html代码

<!DOCTYPE html>
<html>
    <head>
        <base href="/" />
        <script src="js/angular.min.js"></script>
        <script src="js/angular.route.js"></script>
        <script src="js/main.js"></script>
    </head>
        <body ng-app="mainApp">
            <ng-view></ng-view>
        </body>
</html>

Answer 1

更改

<a ng-href="/viewStudents"> View Students List</a>

至

<a ng-href="#/viewStudents"> View Students List</a>

试试吧

Answer 2

您需要将Home.html更改为

<div class="container">
    <h2> Welcome </h2>
    <p>{{message}}</p>
    <a ng-href="#/viewStudents"> View Students List</a>  
</div>

DEMO

Answer 3

如果要启用html5模式，请确保在脚本加载后添加base标记。 像这样

<!DOCTYPE html>
<html>
    <head>
        <script src="js/angular.min.js"></script>
        <script src="js/angular.route.js"></script>
        <script src="js/main.js"></script>
        <base href="/" />
    </head>
        <body ng-app="mainApp">
            <ng-view></ng-view>
        </body>
</html>

它应该工作正常。

看看工作的小伙伴

如何在Angular JS中路由？

问题描述

3 个解决方案

解决方案1
1 2017-06-27 06:41:46

解决方案2
1 已采纳 2017-06-27 06:47:52

解决方案3
0 2017-06-27 06:59:06

如何在Angular JS中路由？

问题描述

3 个解决方案

解决方案1 1 2017-06-27 06:41:46

解决方案2 1 已采纳 2017-06-27 06:47:52

解决方案3 0 2017-06-27 06:59:06

解决方案1
1 2017-06-27 06:41:46

解决方案2
1 已采纳 2017-06-27 06:47:52

解决方案3
0 2017-06-27 06:59:06