Angularjs 使用 ngroute 和 ngview 的路由不适用于 me.Clicking link 无法加载预期页面

Question

index.html 文件中有 3 个链接（主页、关于、联系方式）。单击它们时，我应该能够显示脚本 js 中定义的新 messages/html(home.html、contact.html、about.html) 文件。但这并没有发生。

在 chrome 中执行“检查元素”时没有其他错误。

点击联系人的 url 是： file:///C:/Users/Sonali%20Sinha/Desktop/demo/omg/index.html#contact

代码文件如下。

index.html

<!DOCTYPE html>
<html ng-app="scotchApp">
<head>    
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a>   </li>
     </ul>
<div id="main">
 {{ message }}
<div ng-view></div>
</div>
</body>
</html>

script.js

scotchApp.config(function($routeProvider,$locationProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : '/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : '/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : '/contact.html',
                controller  : 'contactController'
            });
            $locationProvider.html5Mode({
                enabled: true,
                requireBase: false
            });
    });

    // create the controller and inject Angular's $scope
    scotchApp.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';
    });

    scotchApp.controller('aboutController', function($scope) {
        $scope.message = 'Look! I am an about page.';
    });

    scotchApp.controller('contactController', function($scope) {
        $scope.message = 'Contact us! JK. This is just a demo.';
    });

home.html

<div>
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>

contact.html

<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>

about.html

<div>
<h1>About Page</h1>
<p>{{ message }}</p>
</div>

目录结构如下

demo/omg/index.html 所有文件都在 omg.

伙计们，我现在坚持了一天。:-( 我在 angularjs 刚出生一天。请善待并帮助我。提前致谢！ :-)

Answer 1

您从文件系统提供应用程序（即使用 file:// URL），而不是从网络服务器提供服务（即使用 http:// URL).您不能在文件系统 URL 上执行 AJAX 请求。 Angular 路由需要做 AJAX 请求来加载视图。

Answer 2

您需要做两件事：

运行就像上面提到的 JB，它在 Apache 后面。
删除 locationProvider 块，它对我有用。

Angularjs 使用 ngroute 和 ngview 的路由不适用于 me.Clicking link 无法加载预期页面

Angularjs routing with ngroute and ngview does not work for me.Clicking on a link does not load the intended page

angularjs

angularjs-directive

ng-view

angularjs-ng-route