I'm trying to pass form data between html pages without using services.
Here is my code link --> http://plnkr.co/edit/E6LM5Oq67XRcvVuMIv9i?p=preview
Below is my contacts.html page.
<html>
<head>
<title>Contacts Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" >
<table>
<tr>
<th>User ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.uid}}</td>
<td>{{contact.fname}}</td>
<td>{{contact.lname}}</td>
<td>{{contact.pphone}}</td>
</tr>
</table>
</body>
</html>
The data is not getting passed to contacts.html.How to do this ?
Using rootScope we can archive this.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.carname = "Volvo";
$rootScope.car=$scope.carname;
});
app.controller('controllerTwo', function($scope, $rootScope) {
$scope.getcarname = $rootScope.car;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
<div ng-controller="controllerTwo">
<h1>Using rootscope: {{getcarname}}</h1>
</div>
</div>
Related
i created a custom key-value pair in $routeProvider and when i tried this key to access in my controller it is not working and showing as undefined. Below is my code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="AngularCtrl">
<h2>Routes with params</h2>
<table class="table table-striped">
<thead>
<th>
<td>#</td>
<td>Topic</td>
<td>Desc</td>
</th>
</thead>
<tr>
<td>1</td>
<td>Controller</td>
<td>Topic Details</td>
</tr>
<tr>
<td>2</td>
<td>Models</td>
<td>Topic Details</td>
</tr>
<tr>
<td>3</td>
<td>Views</td>
<td>Topic Details</td>
</tr>
</table>
<div ng-view></div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/Angular/:topicId', {
mytext: "This is Angular",
templateUrl: 'Angular2.html',
controller: 'AngularCtrl'
});
});
app.controller('AngularCtrl', function($scope, $routeParams, $route){
$scope.tutorialid = $routeParams.topicId;
$scope.text = $route.current.mytext;
});
</script>
</html>
and my Angular2.html is
<h2>Angular</h2>
<br>
{{text}}
<br/>
{{tutorialid}}
Why it is showing mytext in controller as undefined when i tried to access this.?
You could use the resolve funtion of when:
app.config(function($routeProvider){
$routeProvider
.when('/Angular/:topicId', {
templateUrl: 'Angular2.html',
controller: 'AngularCtrl',
resolve: {
mytext: function($route){$route.current.params.mytext= 'This is Angular'}
}
});
});
app.controller('AngularCtrl', function($scope, $routeParams, $route){
$scope.tutorialid = $routeParams.topicId;
$scope.text = $routeParams.mytext;
});
enter image description here
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ContactApp</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Not so long time ago i started to learn MEAN stack and stuck in this problem.
As you can see on picture controller receive data from server but don't display it. What should I do to fix it? Thanks for any help. Sorry for poor English =D
controller code:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
}]);[enter image description here][1]
server code:
var express = require("express");
var app =express();
app.use (express.static(__dirname + "/public"));
app.get ('/contactlist',function(req,res){
console.log ('waitnig for my lovely request');
person1 = {
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
}
person2 = {
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
person3 = {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}
var contactlist = [person1,person2,person3];
res.json(contactlist);
})
app.listen(3000);
console.log ('server runing on port 3000');
Make sure your rest api returns a json array.
DEMO
var app = angular.module('todoApp', []);
app.controller("AppCtrl", ["$scope",
function($scope) {
$scope.contactlist = [{
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
},
{
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
, {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<div class="container">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Change:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
To:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; // note the .data part
});
The response object properties can be found at : https://docs.angularjs.org/api/ng/service/$http
I cant comment because my reputation is too low but what do you see if you console.log(response) in your controller?
if the data is coming through intact, it your page is likely loading before the data arrives, hence displaying as empty. If that is the case the following will work.
<div class="container" ng-controller="AppCtrl" ng-show='isLoaded'> // add this ng-show
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$scope.isLoaded = false // add this
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; //make response.data as Daniel said above
$scope.isLoaded = true; // add this
});
}]);[enter image description here][1]
I am creating an application related to cricket match information in angular. Am getting problem in fetching api response. you can check api response here.
Console is showing error, please check
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="cricApp" ng-controller="cricCtrl">
<div class="form-group">
<h2>Your result</h2>
<table class="table table-striped">
<thead>
<tr><th colspan="4"><h4>Cricket Match Info</h4></th></tr>
<tr>
<th>Sno</th>
<th>unique_id</th>
<th>description</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matchList | filter: nameFilter">
<td>{{$index + 1}}</td>
<td>
{{match.unique_id}}
</td>
<td>{{match.description}}</td>
<td>{{match.title}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('cricApp', []).
controller('cricCtrl', function($scope, $http) {
$scope.matchList = [];
$http.get("http://cricapi.com/api/cricket").then(function (response) {
console.log(response);
$scope.matchList = response.data;
});
}
);
</script>
</body>
</html>
your code is fine just replace
$scope.matchList = response.data;
with
$scope.matchList = response.data.data;
because actual data is coming in data inside response.data.
The header 'Speedruns' keeps getting repeated. How can I fix this?
Also, if there is a better way to do this please let me know.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script>
var app = angular.module('player2', []);
app.controller('MainController', function($scope, $http) {
$scope.data0 = null;
$scope.urls = [ // List of REST api calls with with all the streams we want.
'http://api.speedrunslive.com/test/teamK',
];
$http.get($scope.urls[0]).success(function(data) {
$scope.data0 = angular.fromJson(data);
console.log(angular.fromJson(data))
});
});
</script>
</head>
<body ng-app='player2'>
<div ng-controller="MainController">
<table class="table-size" ng-repeat="chan in data0.channels">
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr>
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
</div>
</body>
</html>
Attached a plunker with the code in it.
Plunker
The thing you want to repeat is the tr, so put your repeat on there. At the moment you are repeating whole the table. The following should work:
<table class="table-size" >
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr ng-repeat="chan in data0.channels">
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
I can't for the life of me figure out what I'm doing wrong. I'm going off a John Linquist video doing some basic AngularJS routing. When I don't have my table in a partials folder and in my index.html page (and not using ng-view so I don't have to configure routing, it works fine. However, I try to inject my a partial view of my table with <ng-view></ng-view> then I get the error: http://goo.gl/nZAgrj (from the angular docs)
app.js
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
//this is the that iterated over in the partial view's ng-repeat
function AppController($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Routing</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
<h2>Enterprise Crew</h2>
<ng-view></ng-view>
//list.html should be injected here
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
list.html
<table class="table table-striped" style="width: 250px">
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td><i class="glyphicon glyphicon-plus-sign"></i> </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in crew">
<td>{{person.name}}</td>
<td>{{person.description}}</td>
<td><i class="glyphicon glyphicon-edit"></i></td>
</tr>
</tbody>
</table>
You need to include ng-route.
angular.module('myApp', ['ngRoute']).
cdn:
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js
And is it working like that?
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
.controller("AppController", ['$scope',
function ($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
];
}
]);
Ok, response is here : AngularJS 1.2 $injector:modulerr