how to set routing in angularjs controller and laravel routing to show html page under the angularjs component ---ng-view---.
can any one know how to display html file under ng-view in laravel-8
joblist.html file
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Job</h3>
</div>
<div class="card-body">
<a class="btn btn-success mb-2 float-right" href="/jobform" role="button"><i class="fas fa-plus"></i>
Add Job</a>
<table class="table table-bordered table-striped table-hover">
<thead class="text-center dark-primary">
<tr>
<th scope="col">Id</th>
<th scope="col">Job Title</th>
<th scope="col" style="width:50%">Description</th>
<th scope="col">Vacancies</th>
<th scope="col">UPDATE</th>
<th scope="col">DELETE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in jobs">
<td>#{{ x.Job_id }}</td>
<td>#{{ x.Title }}</td>
<td>#{{ x.Description }}</td>
<td>#{{ x.No_of_vacancies }}</td>
<td class="text-center"><a ng-click="edit(x)" class="btn btn-outline-primary" role="button"><i
class="fas fa-edit text-center"></i></a></td>
<td class="text-center"><a ng-click="delete(x)" class="btn btn-outline-danger" role="button"><i
class="fas fa-trash text-center"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
web.php
Route::get('/jobangular',function(){
return view('jobpagedisplay');
});
jobpagedisplay.blade.php file
#extends('app')
#section('content')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>add</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini" ng-app="job" ng-controller="jobController">
<div ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script>
var job = angular.module('job', ['ngRoute']);
job.controller("jobController", function($scope, $http) {
$scope.init = function() {
$http.get('/joblist').then(function(data) {
$scope.jobs = data.data[0];
});
}
$scope.init()
$scope.delete = function(x) {
if (!confirm('Are yuo sure?')) return;
$http.post('job/delete', x).then(function(response) {
$scope.init()
})
}
job.config(function($routeProvider) {
$routeProvider
.when("/jobangular", {
templateUrl: "joblist.html",
controller: "jobController"
});
});
});
</script>
</body>
</html>
#endsection
.html file is not showing in the ng-view div.
using laravel-8,
angular with cdn,
i write the script tag under the blade file.
how can i solve this
Related
What is the best way to configure a search field on a table that was loaded from MongoDB using a Controller (MEAN architecture: MongoDB | Express | Angular | NodeJS)
I have a main page:
<section class="content">
<div class="nav-tabs-custom" ng-controller="SoftwareInventoryCtrl as swInventoryCtrl">
<ul class="nav nav-tabs">
<li>
<a href data-target="#tabSummary" data-toggle="tab">
<i class="fa fa-bar-chart"></i> Software Summary
</a>
</li>
<li>
<a href data-target="#tabList" data-toggle="tab">
<i class="fa fa-bars"></i> Software List
</a>
</li>
<li>
<a href data-target="#tabOSList" data-toggle="tab">
<i class="fa fa-windows"></i> Operating Systems
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tabSummary" ng-include="'myapp/softwareInventorySummary.html'"></div>
<div class="tab-pane" id="tabList" ng-include="'myapp/softwareInventoryList.html'"></div>
<div class="tab-pane" id="tabOSList" ng-include="'myapp/softwareInventoryOSList.html'"></div>
</div>
</div>
Informations come from a Controller:
(function() {
angular.module('primeiraApp').controller('SoftwareInventoryCtrl', [
'$http',
'consts',
SoftwareInventoryController
])
function SoftwareInventoryController($http, consts) {
const vm = this
const urlSoftwareList = `${consts.apiUrl}/softwareInventory`
vm.refresh = function() {
$http.get(urlSoftwareList).then(function(response) {
vm.softwareInventory = { machine_name: [{}],
display_name: [{}],
company: [{}],
version: [{}] }
vm.softwareInventorys = response.data
})
}
vm.refresh()
} })()
and the following page is loaded with all data:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/deps.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="box-body">
<div class="row">
<div class="col-sm-12">
<table id="tableSoftwareInventory" class="table table-bordered table-striped dataTable" role="grid">
<thead>
<th>Machine</th>
<th>Software</th>
<th>Company</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr role="row" ng-repeat="softwareInventory in swInventoryCtrl.softwareInventorys">
<td class="sorting_1">{{ softwareInventory.machine_name }}</td>
<td>{{ softwareInventory.display_name }}</td>
<td>{{ softwareInventory.company }}</td>
<td>{{ softwareInventory.version }}</td>
</tr>
</tbody>
<tfoot>
<th>Machine</th>
<th>Software</th>
<th>Company</th>
<th>Version</th>
</tfoot>
</table>
</div>
</div>
</div>
<script src="/assets/js/deps.min.js"></script>
<script src="/plugins/datatables.net/js/jquery.dataTables.js"></script>
<script src="/plugins/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>
</body>
</html>
My ideia is put a input box to search on tableSoftwareInventory table
Any ideias?
P.S. I using AdminLTE template.
Thank you very much!!
Finally I found the method necessary: Just implemented dir-paginate function on page where the table is loaded using parameter "search" (bult in the function). More details about how to implement, access here
Since I am new to AngularJS I have come across an issue when it comes to presenting my database data which has been mapped using Rest and manipulated using JPA. So it is as ready as it can be. No need for further manipulation. Now using the $http.get I have been able to present the first table just calling the url but when it comes to getting data presented from a different table by sending a parameter something doens't work out.
In the module.js it looks like this
(function () {
'use strict';
angular.module('app',[]);
})();
The controller.js like this:
(function () {
'use strict';
angular
.module('app')
.controller('MyController', MyController);
MyController.$inject = ['$http'];
function MyController($http) {
var vm = this;
vm.players = [];
vm.historia = [];
vm.getAll = getAll;
vm.getHistory = getHistory;
init();
function init(){
getAll();
getHistory(name);
}
function getAll(){
var url = "/all/players";
var playersPromise = $http.get(url);
playersPromise.then(function(response){
vm.players = response.data;
});
}
function getHistory(name){
var url = "/all/allplayergames/" + name;
var historiaPromise = $http.get(url);
console.log([url]);
historiaPromise.then(function(response){
vm.historia = response.data;
console.log([response.data]);
});
}
}
})();
and last but not least html
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link th:if="${mode=='development'}" rel="stylesheet" href="../static/bootstrap.css" th:href="#{/bootstrap.css}"/>
<link th:if="${mode=='production'}" rel="stylesheet" href="../static/bootstrap.min.css" th:href="#{/bootstrap.min.css}"/>
<script type="text/javascript" src="/static/angular.min.js" th:src="#{/angular.min.js}" ></script>
<script type="text/javascript" src="/static/app/app.module.js" th:src="#{/app/app.module.js}" ></script>
<script type="text/javascript" src="/static/app/yatzy.controller.js" th:src="#{/app/yatzy.controller.js}" ></script>
</head>
<body ng-app="app" >
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Game Results</a>
</div>
</div>
</nav>
</header>
<div>
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div ng-controller="MyController as vm">
<div class="btn-group" role="group">
<button ng-click="vm.getAll()" type="button" class="btn btn-default">Player Game History</button>
</div>
<table class="table">
<thead>
<tr>
<th>PlayerID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in vm.players">
<td> {{player.playerid}}</td>
<td> {{player.name}}</td>
<td>
<button class="btn btn-danger" ng-click="vm.getHistory(player.name);
">View History</button>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Score</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in vm.historia">
<td> {{p.score}}</td>
<td> {{p.player.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer" style="position: absolute; bottom: 0;background-color: #f5f5f5;" >
<div class="container">
<p th:text="${#dates.format(datetime,'dd MMM yyyy HH:mm')}" class="text-muted">Todays date: </p>
</div>
</footer>
</body>
</html>
And the console log does show the right player url when the "View History" is clicked, but it doesnt get the data from the table that is the score or the name.
I have two controller file of anglularjs and two different service file for each.how i can call two different controller on same html page so i can display my user and data of user on same page.and service file is taking data from java file.two controller file:
1.usernamectrl.js service:frontendservice.js angularjs:java user.java
2.userexamctrl.js service:userfrontendservice.js angularjs userexam.java
3.html page:myexam.html
I want two display username and userdata on myexam page.
console image when i run code
<!-- language: userexamapp-js -->
angular.module('userexamApp',[ 'editableTableWidgets', 'userfrontendservices',
'spring-security-csrf-token-interceptor' ])
.filter('excludeDeleted', function() {
return function(input) {
return _.filter(input, function(item) {
return item.deleted == undefined || !item.deleted;
});
}
})
.controller('userexamCtrl',['$scope','userexamservice','$timeout',
function($scope, userexamservice, $timeout) {
loaduserexamData();
function loaduserexamData() {
userexamservice.searchUserExambyId().then(
function(userExams) {
$scope.userexams = userExams.userExams;
console.log($scope.userexams);
})};
} ]);
<--service:userexamservice.js>
angular.module('userfrontendservices', [])
.service('userexamservice',
[ '$http', '$q', function($http, $q) {
return {
searchUserExambyId : function() {
var deferred = $q.defer();
$http.get('/userexam/')
.then(function(response) {
if (response.status == 200) {
deferred.resolve(response.data);
} else {
deferred.reject('Error retrieving exam');
}
});
return deferred.promise;
},
};
} ]);
<!-- language: myexam-html -->
<b>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- BOOTSTRAP STYLES-->
<script src="/resources/js/ui/angular-route.min.js"></script>
<link rel="stylesheet" href="/resources/css/bootstrap.min.css">
<script src="/resources/js/ui/angular.js"></script>
<script src="/resources/js/ui/angular.min.js"></script>
<script type="text/javascript" src="/resources/js/ui/jquery-2.1.3.js"></script>
<script src="/resources/js/ui/jquery-1.11.3.min.js"></script>
</head>
<div id="myexam"></div>
<body>
<header class="page-header pure-g not-ready"
ng-class="{'app-ready': vm.appReady}">
<div id="caloriesCounterApp" ng-controller="CaloriesTrackerCtrl">
<div class="pure-u-lg-1-2 pure-u-1">
<a class="pure-menu-heading" href="#"> <img class="logo"
src="/resources/img/logo.png">
</a> <span class="header-element page-title"><h2></h2></span>
</div>
<div class="pure-u-lg-1-2 pure-u-1 utilities ">
<div class="header-element username">
<div class="username-placeholder" ng-hide="vm.userName"></div>
<span ng-cloak> welcome{{vm.userName}}</span>
</div>
<div class="header-element">
<a class="logout" href="#" ng-click="logout()">Logout</a>
</div>
</div>
</div>
</header>
<main class="container not-ready" ng-class="{'app-ready': vm.appReady}">
<div class="row" style="margin: 5px;">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">Userexams</div>
<div class="panel-body"></div>
<div id="userexamApp" ng-controller="userexamCtrl">
<table cellpadding="0" cellspacing="0" border="0"
class="table table-striped table-bordered" id="exampleone">
<thead>
<tr>
<th>examname</th>
<th>examtype</th>
<th>outof</th>
<th>Markobtain</th>
<th>date</th>
<th>time</th>
<th>Result</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in userexams">
<td>{{ x.examName }}</td>
<td>{{ x.examType }}</td>
<td>{{ x.outof }}</td>
<td>{{ x.marksObtain }}</td>
<td>{{ x.date }}</td>
<td>{{ x.time }}</td>
<td>{{ x.result }}</td>
<td>{{ x.percentage }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<script type="text/javascript" data-main="/resources/js/userexam"
src="/resources/bower_components/requirejs/require.js"></script>
<script type="text/javascript" data-main="/resources/js/run-calories-tracker"
src="/resources/bower_components/requirejs/require.js"></script>
</body>
</html>
</b>
It is pretty straightforward, in order to use multiple controllers, just use multiple ngController directives, provided you have the controllers available in your application module:
<div class="one" ng-controller="firstController">
<!-- -->
</div>
<div class="two" ng-controller="secondController">
<!-- -->
</div>
I am getting the data from database via http post call and rendering the table. Well the implementation code looks fine however, the pagination doesn't seem to work.
I implemented it according to my requirement and I get the response which I can see in chrome console. What could be wrong with the pagination as I am not able to see any pagination buttons.
Here's the code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/module.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" />
<script>
//Get table from Server and do pagination
app.controller("tableController", function ($scope, $http) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 10
, $scope.maxSize = 5;
$scope.getTable = function () {
$scope.customerTable = [];
$http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data)
{
$scope.customerTable = data;
});
};
$scope.getTable();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.customerTable.slice(begin, end);
});
});
</script>
</head>
<body>
<div class="container" id="main"><br/><br/>
Search: <input type="text" ng-model="search" placeholder="Search">
<div ng-controller="tableController">
<table class="table table-striped table-hover table-bordered">
<tr>
<th style="font-size: 13.3px">Card number</th>
<th style="font-size: 13.3px">First name</th>
<th style="font-size: 13.3px">Opening balance</th>
<th style="font-size: 13.3px">Withdrawal</th>
<th style="font-size: 13.3px">Deposit</th>
<th style="font-size: 13.3px">Closing balance</th>
<th style="font-size: 13.3px">Tx date</th>
<th style="font-size: 13.3px">Usage type</th>
</tr>
<tr ng-repeat="data in customerTable| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
</table>
<pagination
ng-model="currentPage"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<br/><br/><br>
</form>
</div>
</div>
</body>
</html>
Here's the plunker: http://plnkr.co/edit/eNgT4bVroGIla4EOdkNZ?p=preview
Module:
var app = angular.module('myApp', ['ui.bootstrap']);
Try this,
<tr ng-repeat="data in filteredTodos| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
You should be iterating filteredTodos instead of customerTable
I am writing a basic angular routing code ,in which if user clicks on show details the corresponding order id will be displayed.I am getting the error.Where am i going wrong ? I have added a sample HTML file.
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td>show details</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
You need the ngRoute module
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js
After you have this script in your html add it as a dependency
var sample=angular.module("sample",['ngRoute']);