I am trying to transition from my home application to a list. Both the list and my home are in different .js files. How can I display my home first, and then with one click, navigate to the list?
First, here is the code and view for the home:
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>
Now, here are my list files.
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 view for payment:
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>
Lastly, here is my 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>
I have added ngRoute as recommended and created the routes.js.
EDITED
This is my 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);
}
})();
To make this work, I need to display the home view first and then navigate to the list view when the button on the home view is clicked. Any suggestions on how to achieve this seamlessly? Thank you for your assistance.