4

私はAngularが初めてです。私は単純なAngularアプリを持っており、Angularでルーティングがどのように機能するかを確認しようとしています. 私はAngularでURL​​を変更し、同じ単一ページアプリケーションで各リンクの正しいビューを表示したい3つのリンクを持っています。これは私のコードです:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Agent Portal</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/justified-nav.css" rel="stylesheet">

  </head>

  <body ng-app="AgentApp">

    <div class="container" ng-controller="createdPackagesController">

      <div class="masthead">
        <h3 class="text-muted">Project name</h3>

        <ul class="nav nav-justified">
            <li ><a href="#/createdPackages">Created Packages</a></li>
            <li ><a href="#/reservedPackages">Reserved Packages</a></li>
            <li ><a href="#/publishedPackages">Published Packages</a></li>
        </ul>

      </div>

      <div ng-view></div>

    </div>

    <script src="js/controllers.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>

  </body>
</html>

controllers.js

var AgentApp = angular.module('AgentApp', [ngRoute]);

AgentApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
                controller: 'createdPackagesController',
                templateUrl: 'views/createdpackages.html'
            })

            .when("/reservedPackages", {
                controller: "reservedPackagesController",
                templateUrl: "views/reservedpackages.html"
            })

            .when("/publishedPackages", {
                controller: "publishedPackagesController",
                templateUrl: "views/publishedpackages.html"
            }).otherwise({ redirectTo: '/'});
    }]);


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

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

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

アプリは ng-view に対して何も表示しません。何を変更すればよいですか？オンラインの多くの例に従いましたが、何が欠けているのかわかりません。[ここで同様の質問をたくさん見ましたが、それらには固有の問題 (jquery 関連、ブラウザーの問題など) がありました。]

ありがとう、

4

2 に答える 2

2

角度の後に controller.js を呼び出す必要があります

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="controller.js"></script>

そして、このように ngRoute を宣言する必要があります

var AgentApp = angular.module('AgentApp', ['ngRoute']);

[プランカー] ( http://plnkr.co/edit/PBC3MWGbuHHn3IwH2cXw?p=preview )

于 2014-07-17T07:05:14.533 に答える