1

index.html ファイルには 3 つのリンク (Home、About、Contact) があります。それらをクリックすると、スクリプト js で定義されている新しいメッセージ/html(home.html、contact.html、about.html) ファイルを表示できるはずです。しかし、そうはなりません。

それ以外の場合、クロムで「要素の検査」を実行しているときにエラーは発生しません。

連絡先をクリックしたときの 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 内にあります。

みんな、私は今これで1日立ち往生しています.:-(私はangularjsでちょうど1日前です.親切にして助けてください.前もって感謝します!:-)

4

2 に答える 2

1

あなたは2つのことをする必要があります:

  • 上記の JB のように、Apache の背後で実行します。
  • locationProvider ブロックを削除すると、うまくいきました。
于 2015-09-24T06:35:14.193 に答える
0

file://Web サーバーから (つまり URL を使用して) アプリを提供するのではなく、ファイル システムからアプリを提供しています (つまり、 http://URL を使用して)。ファイル システムの URL に対して AJAX 要求を実行することはできません。また、Angular ルーティングは、ビューをロードするために AJAX リクエストを実行する必要があります。

于 2015-09-24T06:18:22.783 に答える