I'm new to mean stack implementation. I have tried to view data from controller. But It didn't work. web brower's console gave this error message at that time.
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl
Stack trace:
M/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:6:425
wf/this.$get</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:93:395
ba#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:76:290
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:68:1
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:496
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
ca/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:119
Pc/c/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:4
Mf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:176
Mf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:400
Pc/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:469
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:44:169
Pc/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:390
Pc#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:179
ue#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:20:379
#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:332:117
b#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:38:36
Following files are server.js , index.html and controller.js files.How can Isolve this problem.
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + "/public"));
app.listen(3000);
console.log("Server is running");
index.html
<!DOCTYPE>
<html ng-app>
<head>
<!-- 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">
<title>Contact app list</title>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content 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.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
controller.js
function AppCtrl($scope){
console.log("Hello controller");
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
$scope.contactlist = contactlist;
}
This is error caused because the controller is not register in your application. The function AppCtrl is not called. Try registering the controller like this
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
for any doubts please check documentation example of controller
Please let me know if i misunderstood or missed something.
Hope this is helpful. Thank you.
var AppCtrlfn = function ($scope){
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
$scope.contactlist = contactlist;
}
angular.module('app', [])
.controller('AppCtrl',AppCtrlfn)
<html ng-app="app">
<head>
<!-- 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">
<title>Contact app list</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{content.name}}</td>
<td>{{content.email}}</td>
<td>{{content.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
extends from #yashwanth_t's comment and modify from your code
try this
your app.js
var myApp = angular.module('myApp',[]);
myApp.controller('ContactCtrl', ['$scope', function($scope) {
var person1 ={
name:'Hello',
email: '123',
number:'1'
};
var person2 ={
name:'gello',
email: '456123',
number:'31'
};
var person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
$scope.contactList = [];
$scope.contactList.push(person1);
$scope.contactList.push(person2);
$scope.contactList.push(person3);
console.log($scope.contactList)
}]);
in your index.html
<div class="container" ng-app="myApp">
<h1>Contact List</h1>
<table class="table" ng-controller="ContactCtrl">
<thead>
<tr>
<th>Name</th>
<th>Email</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>
Thank you everyone who try to help me..
I have to change index.html and controller.html files to solve that problem.
index.html
<!DOCTYPE>
<html ng-app="myapp">
<head>
<!-- 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">
<title>Contact app list</title>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{content.name}}</td>
<td>{{content.email}}</td>
<td>{{content.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
controller.js
var app = angular.module('myapp',[]);
app.controller ('AppCtrl', function($scope){
console.log("Hello controller");
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
console.log(contactlist);
$scope.contactlist = contactlist;
});
Related
I am trying to learn the new components and I have a weak understanding of bindings and the symbols.
How come I cannot get my ng-repeat to work with this code.. I have tried using controllerAs syntax, scope, changing the bindings, everything!
APP.JS
var app = angular.module('myApp', []);
/* Mock-Data */
app.constant('friends', [{
firstName: 'Conner',
lastName: 'A',
location: 'Melborne, Australia'
}, {
firstName: 'Dom',
lastName: 'M',
location: 'Los Angeles, CA'
}, {
firstName: 'Bryan',
lastName: 'A',
location: 'Seattle, WA'
}, {
firstName: 'Dan',
lastName: 'M',
location: 'Kalispell, MO'
}]);
app.controller('HomeCtrl', ['friends', function(friends) {
this.$onInit = function() {
console.log("HomeCtrl has been initialized");
this.friends = friends;
console.log(this.friends);
};
}]);
app.component('myGrid', {
templateUrl: 'grid.html',
controller: 'HomeCtrl',
bindings: {
data: '<' // I have tried: &,<,=,#
}
});
Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>My AngularJS App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<my-grid data="friends"></my-grid>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Grid.html
<div class="panel panel-primary">
<div class="panel-heading">Angular 1.X - Example Component</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in data">
<td>{{ employee.firstName }}</td>
<td>{{ employee.lastName }}</td>
<td>{{ employee.location }}</td>
</tr>
</tbody>
</table>
</div>
No matter what I try, I cannot get ng-repeat to work..
You don't have a controller scoped in index.html in order to tell angular where friends comes from. Can add an ng-controllerto solve this
In component you are using controllerAs which is set to vm alias so you need to reference that in the view also
index.html
<div class="container" ng-controller="HomeCtrl as ctrl">
<my-grid data="ctrl.friends"></my-grid>
</div>
grid.html
<tr ng-repeat="employee in vm.data">
DEMO
Your design is bit incorrect.You have not passed friends data to your directive from the parent scope.
Working Plunk inline with you e.g
angular.module("myApp",[])
.controller('ctr1', function($scope, friends){
$scope.friends=friends;
})
.constant('friends', [{
firstName: 'Conner',
lastName: 'A',
location: 'Melborne, Australia'
}, {
firstName: 'Dom',
lastName: 'M',
location: 'Los Angeles, CA'
}, {
firstName: 'Bryan',
lastName: 'A',
location: 'Seattle, WA'
}, {
firstName: 'Dan',
lastName: 'M',
location: 'Kalispell, MOO'
}])
.component('myGrid', {
templateUrl: 'grid.html',
bindings: {
friends: '<'
},
controller:function() {
this.$onInit = function() {
console.log(this.friends);
}
}
})
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctr1">
<div class="container">
<my-grid friends="friends"></my-grid>
</div>
</body>
</html>
<!--************************Grid.html****************
<div class="panel panel-primary">
<div class="panel-heading">Angular 1.X - Example Component</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in $ctrl.friends">
<td>{{ employee.firstName }}</td>
<td>{{ employee.lastName }}</td>
<td>{{ employee.location }}</td>
</tr>
</tbody>
</table>
</div>
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'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>
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.
Module and Controller Code:
Search.js
/// <reference path="angular.min.js" />
var app = angular.module("module1", []).controller("controller1", function ($scope) {
var employees = [
{ name: "Arsalan", dateOfBirthe: new Date("Nov 23,1998"), gender: "Male", salary: "99939339.2345" },
{ name: "Kamran", dateOfBirthe: new Date("Dec 01,2000"), gender: "FeMale", salary: "99939339" },
{ name: "Arshad", dateOfBirthe: new Date("May 23,1999"), gender: "Male", salary: "99939339" },
{ name: "Jrsaloon", dateOfBirthe: new Date("Jan 01,2016"), gender: "Male", salary: "99939339.2345" }
];
$scope.employees = employees;
});
Here is the View Code from Search.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/search.js"></script>
<script src="Scripts/angular.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body ng-app="module1">
<div ng-controller="controller1">
Search : <input type="text" placeholder="Search Employees" ng-model="searchText.gender"/>
<br/><br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchText">
<td>{{employee.name}}</td>
<td>{{employee.dateOfBirthe}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Out-Put Screen:
Search.png
Description: My Module+Controller data is do not bind with view ,
any one help me that how i will recorretct my code that it
do the work properly.............tnx
Include search.js AFTER angular.js. Also, for using searchText, see Shyju's answer.
<script src="Scripts/angular.js"></script>
<script src="Scripts/search.js"></script>