I'm trying to create a little controller in my simple web app using angularjs but i get this error:
Error: Argument 'ContactController' is not a function, got undefined
This is what i've done so far:
angular (ContactsController.js):
var mainApp = angular.module('mainApp', []);
mainApp.ContactController = ("ContactController", ["$scope", function($scope) {
$scope.contatti = {};
$scope.contatti.contacts = ["test.one#gmail.com", "test.two#gmail.com"];
$scope.contatti.addContacts = function () {
$scope.contatti.contacts.push($scope.newcontact);
$scope.contatti.newcontact = "";
};
}]);
html:
<!DOCTYPE html>
<html data-ng-app="mainApp" data-ng-controller="ContactController">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.2.js"></script>
<script src="angular-1.3.12/angular.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular-cookies.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular-resource.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular-sanitize.js"></script>
<link type="text/css" rel="stylesheet" href="ukit-2.16.2/css/uikit.almost-flat.css" />
<script src="ContactsController.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div>
Email:<input type="text" ng-model="contatti.newcontact" />
<button ng-click="addContacts()">Add</button>
<h2>Contacts</h2>
<ul>
<li ng-repeat="contact in contatti.contacts"> {{ contact }} </li>
</ul>
</div>
</body>
</html>
It should be like :-
mainApp.controller("ContactController", ["$scope", function($scope) {
$scope.contatti = {};
$scope.contatti.contacts = ["test.one#gmail.com", "test.two#gmail.com"];
$scope.contatti.addContacts = function () {
$scope.contatti.contacts.push($scope.newcontact);
$scope.contatti.newcontact = "";
};
}]);
Replace this line:
mainApp.ContactController = ("ContactController", ["$scope", function($scope)
By:
mainApp.controller= ("ContactController", ["$scope", function($scope)
Related
I am trying to make a To-Do app using AngularJS, but it is saying an error which is related to
Error: $controller:ctrlreg,
the directed link says:
A controller with this name is not registered.
Below is my code with the script.
angular.module('todoApp', [])
.controller('todoController', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<br>
<div ng-app="todoApp" ng-controller="todoController"><br>
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
<br>
</div>
check this out : plnkr
index.html :
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
});
This is your code running fine,
angular.module('todoApp', [])
.controller('todoController', function($scope){
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
$scope.title = ''
}
})
<!DOCTYPE html>
<html ng-app="todoApp" >
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<div ng-controller="todoController">
<input ng-model="title"><button ng-click="add()">Add</button>
<li ng-repeat="t in tasks">{{t}}</li>
</div>
</body>
</html>
I get error:
NameError: name 'resp' is not defined
While rendering this html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SPA book_store</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script> src = "main.js"</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input id="filter_input" type="text" ng-model="word"/>
<br/>
<input id="btn" type="button" ng-click="get()" value="Check Level">
<br/>
<label>{{resp}}</label>
</div>
<br/>
</body>
</html>
main.js in the same directory with html file:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.resp= {};
$scope.get = function() {
$http.get("https://localhost/" + $scope.word)
.then(function (response) {
$scope.resp = response.data;
});
}
});
I defined resp in controller as scope variable. What am I doing wrong?
It's the mistake I guess. Change this
<script> src = "main.js"</script>
to
<script src="main.js"></script>
Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
Here is my code.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
console.log($scope.fburl);
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div>{{fburl}}</div>
</body>
</html>
Now my question is when I am updating the fbid why fburl is not updating automatically ?
It's because the value can't update after the fact, you need to add a watcher on the variable fbid.
AngularJS docuemntation for $watch
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "";
$scope.$watch('fbid ', function(newValue, oldValue) {
$scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
console.log($scope.fburl);
});
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div ng-bind="fburl"></div>
</body>
</html>
Alternate solution - cleaner way.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fbFn = function() {
return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
};
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
<div >{{fbFn()}}</div>
</body>
</html>
Happy Helping!
I have a a button with a ng-click that is not firing. Below is the controller and button html. Help - why is it not working?
This is my controller
angular.module('app').controller('MarvelController', MarvelController);
// use to make HTTP requests
MarvelController.$inject = [
"$http"
];
var character = 0;
function MarvelController($http){
var self = this;
console.log(self.update);
self.character = character;
self.glenn = 24;
console.log(self.glenn);
self.chris = function(){
console.log("chris");
}
this is the button that is not firing:
<button ng-click="chris()">button</button>
If you put your function on $scope it will work. Or you can use the controller as syntax. e.g.
<div ng-controller="MarvelController as ctrl">
<button ng-click="ctrl.chris()">button</button>
</div>
var app = angular.module('plunker', []);
app.controller('MainCtrl',['$scope','$http', function($scope,$http) {
$scope.name = 'World';
var self = this;
self.chris = function()
{
console.log("chris");
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<p>Hello {{name}}!</p>
<button ng-click="ctrl.chris()">button</button>
</body>
</html>
I have started working in angular js recently. I tried to show the content of the page using ng- view but it shows nothing. It shows content when I put all data in one page i.e., index.html
index.html
<html ng-app="customersApp">
<head>
<title>
Iterating over Data
</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="animate.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div ng-view></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/customersController.js"> </script>
</body>
</html>
app.js:
(function(){
var app= angular.module('customersApp',['ngRoute','ngAnimate']);
app.config(function($routeProvider)
{
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'customers.html'
})
otherwise({ redirectTo: '/' });
});
}());
customersController.js:
(function(){
var CustomersController = function ($scope){
$scope.sortBy = 'name';
$scope.reverse = 'false';
$scope.customers= [{joined:'2000-12-02',name:'Prince',city:'sitamarhi',ordertotal:9.9956},{joined:'2000-12-03',name:'Pinku',city:'kendrapara',ordertotal:9.9856},{joined:'2000-12-04',name:'Amit',city:'sambalpur',ordertotal:9.9756}];
$scope.doSort = function(propName){
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
};
CustomersController.$inject = ['$scope'];
angular.module('customersApp')
.controller('CustomersController', CustomersController);
}());
I am not getting where I am making a mistake.
missing . before otherwise in $routeProvider