2016-08-16 6 views
0

本といくつかの例で角度を覚えようとしていますが、ルーティングシステムに基づいて表示するビューをng-viewがどのように知っているかを理解しようとすると、だからここルーティングがページにどのように接続するか

は一例です:

<!DOCTYPE html> 
<html ng-app="maintenance"> 
<head> 
    <title>Dive Sites</title> 
    <link href="./lib/bootstrap/bootstrap.min.css" rel="stylesheet" /> 
    <link href="./site.css" rel="stylesheet" /> 
</head> 
<body ng-controller="adminCtrl"> 
    <!-- Navigation header --> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <button type="button" class="navbar-toggle collapsed" 
       data-toggle="collapse" 
       data-target="#adminMenu"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
     Younderwater Admin 
     </a> 
     <div class="collapse navbar-collapse" id="adminMenu"> 
     <ul class="nav navbar-nav"> 
      <li ng-class="{active: isActive('Locations')}"> 
      <a href="#/locations">Locations</a> 
      </li> 
      <li ng-class="{active: isActive('Sites')}"> 
      <a href="#/sites"> 
       Dive Sites 
      </a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

    <!-- Optional title bar --> 
<div class="current-spot"> 
    <div class="container-fluid" > 
     <div class="container"> 
     <div ng-show="view=='locations'"> 
      <h3>Manage the list of diving locations</h3> 
     </div> 
     <div ng-show="view=='diveSites'"> 
      <h3>Manage the list of dive sites</h3> 
     </div> 
     </div> 
    </div> 
    </div> 

    <!-- View content --> 
    <div class="main-content"> 
    <div class="container-fluid"> 
     <div class="container"> 
     <div ng-view></div> 
     </div> 
    </div> 
    </div> 

    <script src="./lib/jquery/jquery.min.js"></script> 
    <script src="./lib/bootstrap/bootstrap.min.js"></script> 
    <script src="./lib/angular/angular.min.js"></script> 
    <script src="./lib/angular/angular-route.min.js"></script> 
    <script src="maintenance.js"></script> 
</body> 
</html> 

SCRIPT

angular.module('maintenance', ['ngRoute']) 
.controller('adminCtrl', AdminCtrl) 
    .config(function ($routeProvider) { 
    $routeProvider.when('/locations', { 
     templateUrl: 'views/locations.html' 
    }); 
    $routeProvider.when('/sites', { 
     templateUrl: 'views/sites.html' 
    }); 
    $routeProvider.otherwise({ 
     templateUrl: 'views/main.html' 
    }); 
    }); 

function AdminCtrl($scope) { 
} 

私はこの例を見て、私は思考の正しい方法を持っているかどうかを知る必要があるが、私はと言うでしょう " # 'は、ルーティングシステムを使用するように言います。スクリプトでは、URLに基​​づいてアプリケーションがロードするビューとルートを設定します。ルーティングシステムに基づいて検索し、ビューをngに渡します-view、私は処理がわからない私は、私は非常によく説明していない場合は申し訳ありませんが、それがどのように動作するかをよりよく理解する必要がある理由を正しくthatsのです:/

シモンズ:私の悪い英語

答えて

0

まず第一に、そしてangular.moduleのため申し訳ありません( 'メンテナンス'、 ....) 一致している必要があります。私は識別子 '保守'を参照しています。これがなければ、あなたのJSファイルはあなたのHTMLファイルを見つけられません。

JSファイルからは、angular.module( 'maintenance'、['ngRoute'])があり、ngRouteはルーティングのための角度指令です。

https://docs.angularjs.org/api/ngRoute

$ routeProviderに行くために何ページ言います。

http://www.w3schools.com/angular/angular_routing.asp

そしてtemplateUrlは、ページのURLを示しています。

https://docs.angularjs.org/guide/directive

http://techfunda.com/howto/505/function-with-templateurl

私はあなたのプロジェクトに次のhtmlファイルを持っている非常に確信しています。

locations.html

sites.html

main.htmlを

関連する問題