I want to refresh the API every 100 milli seconds ,can anyone help.
code takes data from api and displays in the table. Backend is updated from different sources ,so we are supposed to refresh the data every 100ms.
<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Cycle count application</h2>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr>
<th>Item Number </th>
<th>UPC Number</th>
<th>Count Qnty</th>
</tr>
<tr ng-repeat="x in names">
<td>{{ x.ITEM }}</td>
<td>{{ x.UPC}}</td>
<td>{{ x.QNTY}}</td>
</tr>
</table>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://54.244.108.186:4000/api/cc_detail")
.then(function (response) {
$scope.names = response.data.item_upc;
});
});
</script>
</body>
</html>
If you want to refresh your screen based on back end updates then ideally you should try to use HTML5 Server Sent Events rather then hitting a particular API every 100 milliseconds. Hitting the api every 100 milliseconds would create a new thread on the server to handle the request causing a bottleneck for other requests.....you would kind of be simulating a DOS attack.
HTML5 event source will create one connection with the server and would allow the server to push updates to the client whenever required instead of making multiple requests.
Refer to link http://www.w3schools.com/html/html5_serversentevents.asp for more on HTML5 Server Sent Events
Related
This is my dashboard.html where all the user data will display from controller file. Now what I want is that when I click the button of each user it will display the information of user in a separate page.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="newcontroller.js"></script>
<script src="controller.js"></script>
<link rel="stylesheet" href="stylingpage.css">
</head>
<body ng-app="myModule">
<div ng-controller="myCtrl">
<h2 align="center">Welcome</h2>
<table width="20%">
<thead>
<tr>
<th>ID</th>
<th>UserName</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.password}}</td>
<td><button type="button" ng-click="view()">View</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
When I click the View button it will display that person info in separate page. How can I do it? Please help. Thanks in advance.
This is my controller.js file:
var app=angular.module('mainApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'login.html'
})
.when('/newdashboard',{
resolve:{
"check":function($location,$rootScope){
if(!$rootScope.loggedIn){
$location.path('/');
}
}
},
templateUrl:'newdashboard.html'
})
.when('/userdetails',{
templateUrl:'userdetails.html'
})
.otherwise({
redirectTo:'/'
});
});
app.controller('loginCtrl',function($scope,$location,$rootScope){
$scope.submit=function(){
if($scope.username=='admin' && $scope.password =='admin'){
$rootScope.loggedIn=true;
$location.path('/newdashboard');
}else{
alert('wrong Username or password. Try Again');
}
};
});
app.controller('myCtrl',function($scope){
$scope.employees=[
{id:"101",name:"User 1",password:"User1#123"},
{id:"102",name:"User 2",password:"User2#123"},
{id:"103",name:"User 3",password:"User3#123"},
{id:"104",name:"User 4",password:"User4#123"},
{id:"105",name:"User 5",password:"User5#123"},
{id:"106",name:"User 6",password:"User6#123"}
];
});
i believe there's more than enough ways to do this just search "passing objects between controllers angularjs" google can get you more than enough results.. it's either done by passing the object in URL, a service ,or using local storage.
common things are
you'll need a controller for the details page
you'll probably need to pass the employee object in the view() function --> view(employee)
You can do it, in following way.
Step 1 - Update your HTML to pass, employee Id as parameter in "view" method
<td><button type="button" ng-click="view(employee.id)">View</button></td>
Step 2 - Update routing state to send the ID as parameter for detail page.
.when('/userdetails/:id',{
templateUrl:'userdetails.html'
})
Step 3 - Write the "view" function to change state from listing page to detail page. Add it in your "myCtrl" method
$scope.view= function(userId) {
$location.path('/userdetails/').search({id: userId});
}
Step 4 - To get parameter on detail page(In controller method) in following way.
var urlParams = $location.search();
urlParams.id will return Empolyee Id
So now you have selected employee Id on detail page controller, so you can bind the details of that employee to view.
This is an index file I had made to display the json data though angular.js
<!DOCTYPE html>
<html>
<head>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
<div ng-app=”” ng-controller=”blogController”>
<table>
<tr><td>Manger Id</td><td>Manger Name</td></tr>
<tr ng-repeat=”x in name”>
<td>{{ x.m_id }}</td>
<td>{{ x.name }}</td>
</tr>
</table>
</div>
<script>
function blogController($scope,$http) {
$http.get('http://localhost:3000/techgeek/v1/getEmployeeDetails')
.success(function(response) {
$scope.names = response;
console.log($scope.names);
});
}
</script>
</body>
</html>
I am unable to get the json data from nodejs server. I aslo attacted a secreen shout my json data genereated though nodejs sever .. The main problem with url. Thanks for your help in advance
Here is the live for your problem. I have solved it using the local Json.
You have made the following mistakes as below
ng-repeat names should be there as you have $scope.names in your controller.
x.name in the second column which is wrong as your json is having the x.m_name as the field.
Also, I have a doubt if the node.js server and the angular application is running in the same port, else you might get CORS(Cross Origin Resource Sharing) error in the console which you have to fix it.
Plunker
<tr><td>Manger Id</td><td>Manger Name</td></tr>
<tr ng-repeat="x in names track by $index">
<td>{{ x.m_id }}</td>
<td>{{ x.m_name }}</td>
</tr>
Update 1
You have a problem with the module as you have used ng-app="" in your code please fix it by using a module as below
var app = angular.module('plunker', []);
app.controller("",function(){
.....................
});
Hi I am learning WebApi in VS2015. I have some experience in MVC4 so i know concepts of Routing in MVC$. I am following http://www.c-sharpcorner.com/uploadfile/65794e/web-api-with-angular-js/ website. I am trying to display some data from database as below.
public class TestController : ApiController
{
// GET: api/Test
public WebAPI db = new WebAPI();
public IEnumerable<LoginTbl> Get()
{
return db.LoginTbls.AsEnumerable();
}
}
WebApiConfig.cs as below.
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{Test}/{id}",
defaults: new { id = RouteParameter.Optional }
);
Service.Js code.
app.service("APIService", function ($http) {
this.getSubs = function () {
return $http.Get("")
}
}
);
I am not sure what to pass in $http.Get("")
This is my index.cshtml
#{
}
<style>
table, tr, td, th {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
</style>
<h2>Welcome to Sibeesh Passion's Email List</h2>
<body data-ng-app="APIModule">
<div id="tblSubs" ng-controller="APIController">
<table>
<tr>
<th>UserName</th>
<th>Password</th>
</tr>
<tbody data-ng-repeat="sub in subscriber">
<tr>
<td>{{sub.UserName}}</td>
<td>{{sub.Password}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/APIScripts/Module.js"></script>
<script src="~/Scripts/APIScripts/Service.js"></script>
<script src="~/Scripts/APIScripts/Controller.js"></script>
I am using AngularJs as clientscript. I am not sure how to run the above application as i can see two RouteConfig.cs and WebAPiconfig.cs. Someone tell me which file i should change in order to run the application? Thank you...
In the tutorial you're following, they don't actually say what they named the API controller, but it is called SubscriberController. The route matches up with api/ and then the word before the word Controller - so, api/Subscriber in the tutorial, and api/Test in your case.
In your angular routing configuration, your code would become $http.get("api/Test");
In order to return JSON from Web API, we'll need this line of code in your WebApiConfig.cs :
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
Ok. This one really has me stumped. Here is what I am trying to build.
I have a table. In the first <tr> I have it repeating data, and the last <td> has a button. When I click this button, I want to show a set of hidden rows underneath each repeated <td> tag. In those hidden rows, I want to call more data.
I'm using mysqli and php to encode the data on the DB into json, which I then populate into the cells. I can do all of this with 1 controller. However, if I want to pull data from another source, to populate into the hidden cells, I have to make another controller.
Here is the base code: (pardon the inline css, its easier for me to format it into external css after its functional)
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('tableCtrl_1', function($scope, $http){
getdata();
function getdata(){
$http.post("angular_data.php").success(function(data){
$scope.getdata = data;
});
};
});
app.controller('tableCtrl_2', function($scope, $http){
getdata();
function getdata(){
$http.post("angular_data_2.php").success(function(data){
$scope.getdata = data;
});
}
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="padding:0px;">
<table class="table table-bordered" ng-controller="tableCtrl_1">
<tr style="height:70px;background-color:#0C4791;">
<th style="text-align:center;color:white;vertical-align:middle;">Flexi Floor/Low Wall</th>
<th style="text-align:center;color:white;vertical-align:middle;">Cooling</th>
<th style="text-align:center;color:white;vertical-align:middle;">Heating</th>
<th style="text-align:center;color:white;vertical-align:middle;">Nominal Capacities(cooling/heating)</th>
<th style="text-align:center;color:white;vertical-align:middle;">Pipe Length</th>
<th style="text-align:center;color:white;vertical-align:middle;">List Price</th>
<th style="text-align:center;color:white;vertical-align:middle;">Quantity</th>
</tr>
<tr ng-repeat = "getdata in getdata | filter:'Flexi Floor/Low Wall':true">
<td style="vertical-align:middle;text-align:center;">{{getdata.model_no_from}} + {{getdata.model_no_to}}</td>
<td style="vertical-align:middle;text-align:center;">{{getdata.cooling}}</td>
<td style="vertical-align:middle;text-align:center;">{{getdata.heating}}</td>
<td style="vertical-align:middle;text-align:center;"><span style="color:blue">{{getdata.nominal_cooling}}</span><span style="color:red;">{{getdata.nominal_heating}}</span></td>
<td style="vertical-align:middle;text-align:center;">{{getdata.pipe_length}}</td>
<td style="vertical-align:middle;text-align:center;"><span style="font-weight:bold;">{{getdata.system_listPrice | currency: "£"}}</span></td>
<td style="vertical-align:middle;text-align:center;"><button class="btn btn-default btn-large btn-block">Select</button></td>
</tr>
</table>
<table class="table table-bordered" ng-controller="tableCtrl_2">
<tr ng-repeat ="getdata in getdata">
<td style="vertical-align:middle;text-align:center;" colspan="7">{{getdata.sales_description}}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
The second table is just so that I could test and make sure it's pulling in data properly. (turns out it wasn't, as I had to encode in utf-8)
SO TLDR:
controller 1 pulls in main data, populates cells. Click the button in a cell, and it will show hidden cells underneath with controller 2 data.
Problems I am having: matching the secondary data to the ng-repeat of the primary data, using both data sources in one controller area.
image for visual aid:
Image link
This is my technique working with relational data from MySql. Using the angular build in filter to march the main view. In MS access it is a main form and subform. for me I use slim framework to build easy API Slim
Here is the $scope handle the related key.
$scope.showDetail = function(saleId,saleDetails){
$scope.dataDetails = $filter('filter')(saleDetails,{main_id:saleId},true);
}
look at the Plunker
Good luck!
Hello I want to create simple search table of data.
I want to highlight if data matched user type input. I done it by doc below since I'm starting using angular i wonder is there any better way? Some custom filter maybe ?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<style type="text/css">
table td{
padding: 5px;
}
.true{
color: green;
background-color: blue;
}
</style>
</head>
<body>
<div ng-controller="filtrController">
<div>{{search}}<hr/></div>
<input type="text" ng-model="search"/>
<table>
<thead>
<tr>
<td>Name:</td>
<td>Param1:</td>
<td>Param2:</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="foo in data | filter:search">
<!--<td ng-class="{true:'true',false:''}[search === foo.Name]">{{foo.Name}}</td>-->
<td ng-class="customFilter(search,foo.Name)">{{foo.Name}}</td>
<td ng-class="customFilter(search,foo.param1)">{{foo.param1}}</td>
<td ng-class="customFilter(search,foo.param2)">{{foo.param2}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('filtrController',function ($scope)
{
$scope.customFilter = function(search,searchTo)
{
if(search != '')
{
if(searchTo.indexOf(search) > -1) return 'true';
return '';
}
};
$scope.data =
[
{
Name:'name foo1',
param1:'param of foo1',
param2:'param 2 of foo1'
},
{
Name:'name foo2',
param1:'param of foo2',
param2:'param 2 of foo2'
},
{
Name:'name sfoo3',
param1:'param of foo3',
param2:'param 2 of foo3'
},
]
});
</script>
</body>
You just need to custom filter like this:
$scope.customFilter = function(data, searchFor) {
if (angular.isUndefined(data) || angular.isUndefined(searchFor)) return data;
angular.forEach(data, function(item) {
if(angular.equals(item, searchFor)) item.highlighted = true;
});
return data;
}
and html like this
<tr ng-repeat="foo in data | customFilter:{something:1}" ng-class="{highlighted: foo.highlighted}">
Update:
So, I just need to explain my approach in more details. You have data some of which is needed to be highlighted. So you need to set new property in your data and highlight it (using css and ng-class) if property set to true.
For setting this property you can create custom filter that takes your data array, changes it internal state by setting this property and return this array as result. This is what I implemented for you.
Update#2
Same behaviour as ng-filter needed. So here it is.