1

index.html 文件中有一些 3 个链接（主页、关于、联系人）。单击它们时，我应该能够显示脚本 js 中定义的新消息/html（home.html，contact.html，about.html）文件。但这不会发生。

在 chrome 中执行“检查元素”时不会出现其他错误。

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

代码文件如下。

索引.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>

脚本.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.';
    });

主页.html

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

联系人.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 中只有一天大。请善待并帮助我。提前谢谢！:-)

4

2 回答 2

1

你需要做两件事：

  • 像上面提到的 JB 一样在 Apache 后面运行它。
  • 删除 locationProvider 块，它对我有用。
于 2015-09-24T06:35:14.193 回答
0

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

于 2015-09-24T06:18:22.783 回答