[英]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);
}
})();
我需要通过两件事:
我怎样才能做到这一点? 我还需要在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.