2

アプリで Angular のルーティング メカニズムを使用しようとしていますが、ルーティングを引き起こす要素をクリックすると、viewName を取得できません。ここで、viewName は任意のビューです。

これは私の app.js スクリプト ファイルです。

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

//Define Routing for app
app.config(['$routeProvider',
   function($routeProvider) {
      $routeProvider
      .when('/', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/Students', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
            templateUrl: 'views/register_student.html',
            controller: 'StudentRegistrationController'
       });
  }]);

 app.controller('StudentListController', function($scope) {    
    $scope.message = 'This is student list screen';
 });


app.controller('StudentRegistrationController', function($scope) {
    $scope.message = 'This is student registration screen'; 
});

これは私のindex.htmlです：

<!DOCTYPE html>
<html ng-app="actsapp">

<head>
    <title></title>
    <link href="style/style.css" rel="stylesheet" />
    <link href="style/bootstrap.css" rel="stylesheet" />

    <script src="scripts/jquery-1.js"></script>
    <script src="scripts/angular/angular.js"></script>
    <script src="scripts/angular/angular-route.js"></script>
    <script src="scripts/angular/app.js"></script>
</head>

<body>
<div class="header">
    <div class="heading_wrap">
        <h1>Student Registration Form</h1>
    </div>
</div>
<div class="nav-wrap">
    <ul class="nav nav-acts-pills nav-stacked ">
        <li class="active">
            <a href="/Students">Student List</a>
        </li>
        <li>
            <a href="/RegisterStudent">Add Student</a>
        </li>
        <li>
            <a>Add Students (By School)</a>
        </li>
    </ul>
</div>

<div ng-view="" class="content-wrap" style="float:left;">
</div>
</body>

</html>

これを修正する方法についての提案は大歓迎です。ngRoute ドキュメントの最新バージョンに基づいて作業を行いました。ありがとうございました。

4

2 に答える 2

9

#ルーティングを機能させるには、以下のようなものを追加する必要があります。

<li class="active">
    <a href="#/Students">Student List</a>    // add #
</li>
<li>
    <a href="#/RegisterStudent">Add Student</a>    // add #
</li>

.js ファイルでtemplateUrlは、次のようになります/views/student_list.html。

ただし、なしのルートが必要な場合#は、追加する必要があります$locationProvider.html5Mode(true);。の使用を避ける方法については、こちらの例を確認してください#。こちらもご覧ください。デモでは次のように述べています。

app.config(['$routeProvider',
   function($routeProvider,$locationProvider) {
  $routeProvider
      .when('/', {
        templateUrl: '/views/student_list.html',   // urls should be like this
        controller: 'StudentListController'
      })
      .when('/Students', {
        templateUrl: '/views/student_list.html',  // urls should be like this
        controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
        templateUrl: '/views/register_student.html',     // urls should be like this
        controller: 'StudentRegistrationController'
       });
       $locationProvider.html5Mode(true);
  }]);    ]

ビューで：

    <li class="active">
        <a href="/Students">Student List</a>
    </li>
    <li>
        <a href="/RegisterStudent">Add Student</a>
    </li>
于 2014-10-17T08:10:24.153 に答える
2

私も同じ問題を抱えています。何時間もかけて、やっと完成しました。

AngularJS は、SPA (シングル ページ アプリ) の概念に基づいて設計されています。したがって、すべてのビューは、ng-app に関連付けられたメインの index.html を中心に構築する必要があります。注: ng-app の 2 つの異なる名前を作成して回避しようとしました。B.html に href すると、ng-app="B" をロードできますが、index.html には ng-app= を残します。後ろに「あ」。それは機能しませんでした-Angularはまだ「A」を探しています-例外があります。

したがって、index.html を設計する方法は、「共通」のコア部分を上または下に保持することです。

<ng-view></ng-view>

ルーティング サービスの「そうでない場合」の部分は、デフォルトの html ビュー、つまり index.html の開始コンテンツを配置します。または、次のコードのように、コンテンツ全体を別のビュー ファイルに配置して、index.html にロードします。

<body ng-app="YouTiming">
    <div ng-controller="Main">
        <ng-view></ng-view>
    </div>
</body>

デフォルトのビューである main_view.html には、「メイン」コントローラーからのコンテンツが含まれます。ルーターは次のとおりです。

angular.module("YouTiming", ["customFilter", "ngRoute"])
.config(function ($routeProvider) {
    $routeProvider
    .when("/archive", {
        templateUrl: "/view/archive.html"
    })
    .when("/edit-portfolio", {
        templateUrl: "/view/edit-portfolio.html"
    })
    .otherwise({
        templateUrl: "/view/main_view.html"
    });
});

次に、main_view.html に href があります。

<a ng-href="#/archive">Archive</a>

「#」は、「/view/archive.html」を元の SPA に戻したいことを AngularJS に伝えるためのものであることに注意してください (ng-app が 1 つしかないため)。「#」がないと、同じエラーが発生します。Cannot GET /archive

archive.html で:

<div>
    <div class="col-sm-6">
        123
    </div>
    <div class="col-sm-6">
        456
    </div>
</div>

最終結果:

123                456

次の質問は、同じ SPA 内の複数のビュー間でフォーカス ビューをどのように切り替えるかということです。これは私が取り組む次の問題ですが、ng-show または ng-hide を使用してビューを切り替えるために $scope で何かをセットアップできると思います。誰かがより良い提案を持っている場合は、アドバイスしてください、ありがとう!

于 2014-10-25T19:17:41.277 に答える