ホームとリストのページ

私がしたいことは、私の家のアプリケーションからリストへのパスです。私はリストと私の家を別の.jsファイルに持っていますが、今、私はどのようにして最初に私の家を見せて、ワンクリックでリストに送ることができますか？ホームとリストのページ

マイファイル、次へまず、家庭用コードとビュー：

家庭component.js

(function(){ 
    'use strict'; 
    var home = { 
     templateUrl: './app/components/list-component/home-component/home.html', 
     controller: homeCtrl 
    }; 

    angular 
    .module('payApp') 
    .component('home', home); 

    function homeCtrl(){ 

     var home = this; 
    } 

    })();

home.html

<div class="row"> 
    <div class="col-lg-12"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-lg-7"> 
         <div class="title"> 
          <h3><strong>¡Welcome!</strong></h3> 
         </div> 
         <br> 
         <div class="col-md-6 .col-md-offset-3"> 
          <button class="btn btn-success" ng-click="">Start</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

その後、私のリストファイル。

支払い-component.js

(function(){ 
    'use strict'; 
    var pays = { 
     templateUrl: './app/components/list-component/paymentcompo.html', 
     controller: payCtrl 
    }; 

    angular 
    .module('payApp') 
    .component('payInvoice', pays); 
    payCtrl.$inject = ["$scope"]; 
    function payCtrl($scope){ 

} 
})();

それは、HTMLビューです：

paymentcompo.html

そして、最後に、私のindex.html：

<!DOCTYPE html> 
<html lang="en" ng-app="payApp"> 

    <meta charset="UTF-8"> 
    <title>Pay This</title> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 
    <link type="text/css" href="app/componentes/css/pay-style.css" rel="stylesheet" /> 
    <link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/> 

<head> 


</head> 

<body> 

<pay-Invoice></pay-Invoice> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<script src="bootstrap/js/bootstrap-popover.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script> 
<script src="app/payapp.js"></script> 
<script src="app/components/list-component/payment-component.js"></script> 
<script src="app/components/list-component/home-component/home-component.js"></script> 
<script src="app/factory/pay-factories.js"></script> 
<script src="app/routes/routes.js"> 

</body> 
</html>

また、ngRouteを使用してください、私は追加し、私のroutes.jsを作成します。

EDITED

これは私のroutes.jsコードです：

(function(){ 
    'use strict'; 

    angular 
     .module('payApp') 
     .config(config); 


    config.$inject = ["$routeProvider","$locationProvider"]; 
     function config($routeProvider, $locationProvider){ 

      $routeProvider 
       .when('/home',{ 
        template: '<home></home>', 
       }) 

       .when('/listado',{ 
        template: '<pay-invoice></pay-invoice>', 
       }) 

       .otherwise({ 
        redirectTo: '/home', 
       }); 

       $locationProvider.html5Mode(true); 

     } 

     })();

私は二つのことを渡す必要があります。

ホームビュー、私は非常に最初のものですので、表示する必要があります。
ホームビューのボタンによってトリガーされるリストビュー。

どうすればいいですか？私はindex.htmlで何をする必要がありますか？あなたが私を助けてくれることを願います。

出典

2017-11-24 Chuck Villavicencio

angular-routeを使用している場合、メインのhtmlファイルにコンテナdivを作成する必要があります。

だからではなく、あなたのインデックスHTMLファイルの代わりに

<pay-Invoice></pay-Invoice>

コンテナコンポーネント：

<div ng-view></div>

これは、それがこのコンテナへのルートコンポーネントをマウントしたときの位置の変更、それをswichする必要があることngRoute教えてくれます詳細：https://docs.angularjs.org/api/ngRoute/directive/ngView

出典

2017-11-24 20:55:16 Morishiri

私はちょうどやったことがあり、今、すべてが空白になります...私はng-viewが必要ですか？ –

これを正しく行う方法の例を次に示します。https://jsfiddle.net/danielclasen/m729ru7w/ – Morishiri

ホームとリストのページ

答えて

関連する問題