Hi all I'm new to angular. My post is identical to: Inline `ng-template` not found by `ng-include`.
I have an ng-include which isn't finding my ng-template, keep getting a 404: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/display.
When I put the template in a separate html file it works fine but obviously this is not ideal.
Any ideas would be greatly appreciated.
My view:
<div class="panel panel-primary"
ng-controller="TimesheetListCtrl as vm">
<div class="panel-heading"
style="font-size:large">
Timesheet for week ending
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<td>Program</td>
<td>Category</td>
<td>Activity</td>
<td>Reference</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
<td>Total</td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="timesheet in vm.timesheets" ng-include="'display'"><!--ng-include="vm.getTemplate(timesheet)"-->
<script type="text/ng-template" id="display">
<td>{{ timesheet.program }}</td>
<td>{{ timesheet.category }}</td>
<td>{{ timesheet.activity }}</td>
<td>{{ timesheet.reference }}</td>
<td>{{ timesheet.hrsWrkMonday }}</td>
<td>{{ timesheet.hrsWrkTuesday }}</td>
<td>{{ timesheet.hrsWrkWednesday }}</td>
<td>{{ timesheet.hrsWrkThursday }}</td>
<td>{{ timesheet.hrsWrkFriday }}</td>
<td>{{ timesheet.hrsWrkSaturday }}</td>
<td>{{ timesheet.hrsWrkSunday }}</td>
<td><b>{{ timesheet.hrsWrkMonday + timesheet.hrsWrkTuesday + timesheet.hrsWrkWednesday + timesheet.hrsWrkThursday + timesheet.hrsWrkFriday + timesheet.hrsWrkSaturday + timesheet.hrsWrkSunday }}</b></td>
<td><a class="btn btn-primary">Edit</a>
<a class="btn btn-primary">Delete</a></td>
</script>
<script type="text/ng-template" id="edit">
<td>Program EDIT</td>
<td>Category EDIT</td>
<td>Activity EDIT</td>
<td>Reference EDIT</td>
<td>Monday EDIT</td>
<td>Tuesday EDIT</td>
<td>Wednesday EDIT</td>
<td>Thursday EDIT</td>
<td>Friday EDIT</td>
<td>Saturday EDIT</td>
<td>Sunday EDIT</td>
<td>Total EDIT</td>
<td><a class="btn btn-primary">Save</a>
<a class="btn btn-primary">Cancel</a>
</td>
</script>
</tr>
</tbody>
</table>
</div>
My index.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DnB Timesheet Management</title>
<!-- Style sheets -->
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="timesheetManagement">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">DnB Timesheet Management</div>
</div>
</div>
</nav>
<div class="container">
<div ui-view></div>
<!--<div ng-include="'app/timesheets/timesheetListView.html'"></div>-->
</div>
<!-- Library Scripts -->
<script src="scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<!-- Application Script -->
<script src="app/app.js"></script>
<!-- Services -->
<script src="common/common.services.js"></script>
<script src="common/timesheetResource.js"></script>
<!-- Product Controllers -->
<script src="app/timesheets/timesheetListCtrl.js"></script>
<script src="app/timesheets/timesheetEditCtrl.js"></script>
</body>
</html>
Related
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
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
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr>
<th></th>
<th>Name</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in names">
<td>{{$index+1}}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Hai Guys,
I am using ng-repeat to display the table records and $index+1 to display the serial number.
I want to display the Header Name and Country to repeat for every 2 records(if $index %2 == 0).
How will i do it?
Any idea please.
Well i found my own answer.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat-start="x in names">
</div>
<div ng-if="$index % 2==0">
<table ng-repeat="x in names | limitTo:1">
<tr>
<th>S No</th>
<th>Name</th>
<th>Country</th>
</tr>
</table>
</div>
<table ng-repeat-end="x in names">
<tr>
<td>{{$index + 1}}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
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 have made a page with 3 links. I want that as I click one of the links, the associated behaviour should showup.
Following is my code :
index.html
<html>
<head>
<title> SiteMan</title>
<link rel= "stylesheet" href="stylesheet.css">
<!--<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">-->
<!--<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 src = "tree.js"></script>
</head>
<body ng-app="myApp">
<div>
<div id = "header">
<h1>Siteman RANN 0.1</h1>
</div>
<div id ="nav">
<button> Add Attribute </button>
<button> Add User </button>
<button> Add Doccument </button>
</div>
<div id = "aside" style="padding:5px">
All Attributes</br>
All Users</br>
All Document Types</br>
</div>
<div id = "section">
<table ng-controller="mainCtrl" ng-show="attr">
<tr ng-repeat="x in attributes">
<td>{{x.name}}</td>
</tr>
</table>
<table ng-controller="mainCtrl" ng-show="user">
<tr ng-repeat="x in names">
<td>{{ x.displayName }}</td>
</tr>
</table>
<table ng-controller="mainCtrl" ng-show="docs">
<tr ng-repeat="x in extnsion">
<td>{{ x.extension }}</td>
</tr>
</table>
</div>
<div id = "article">
</div>
<div id = "footer">
Copyright © Siteman RANN
</div>
</div>
</body>
</html>
I want that if I click on "All Attributes" link, attr=1 and user and docs should be assigned value 0 . This should happen for all three links : All Attributes, All Users, All Document types .
All Attributes</br>
All Users</br>
All Document Types</br>