繁体   English   中英

主页和列表页面

[英]Home and a List page

我想做的是从家庭应用程序传递到列表。 我在不同的.js文件中有列表和我的家,但是现在,我该如何首先显示我的家,然后一键发送到列表?

接下来是我的文件。 首先查看家庭代码并查看:

home-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>

然后,我的列表文件。

Payment-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

<table class="table table-hover">
        <thead>
            <tr>
                <th>Payment Number</th>
                <th>Name</th>
                <th>Tax Id</th>
            </tr>
        </thead>
        <tbody>
            <tr id="pool" ng-repeat="info in list | filter: search">
                <th>{{info.Id}}</th>
                <th>{{info.name}}</th>
                <th>{{info.taxId}}</th>
            </tr>
        </tbody>
    </table>

最后,我的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

已编辑

这是我的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);

        }

        })();

我需要通过两件事:

  1. 主视图,因为这是我需要展示的第一件事。
  2. 列表视图,将由主视图上的按钮触发。

我怎样才能做到这一点? 我还需要在index.html上做什么? 希望您能够帮助我。

如果您正在使用angular-route ,则需要在主html文件中创建容器div。

所以代替

<pay-Invoice></pay-Invoice>

在索引html文件中放置一个容器组件:

<div ng-view></div>

这将告诉ngRoute应该将路由组件安装到此容器,并在位置更改时将其ngRoute 。有关它的更多信息: https : ngRoute

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM