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>
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 need your help with AngularStrap tabs and displaying calculated data. So, let's say I have a few inputs with ng-model. I calculate them and display in ng-bind. Everything works fine until I use tabs from AngularStrap. Then my output goes NaN - it looks like ng-model doesn't update, when I'm changing it's content.
You can take a look at what I mean here:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="tab.templateUrl" bs-pane>
</div>
</div>
</div>
</body>
</html>
main.js
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope', function($scope){
$scope.multiply = function(){
return $scope.first * $scope.second;
};
$scope.add = function(){
return $scope.first + $scope.second;
};
$scope.tabs = [
{
"title": "First",
"templateUrl": "first.html"
},
{
"title": "Second",
"templateUrl": "second.html"
}];
$scope.tabs.activeTab = "First";
}]);
first.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
second.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{add()}}
What is really weird, is that when I use it without the tabs, it's working perfectly. Where is the mistake? How can I make it work with tabs?
This example is working like a charm:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
</div>
</body>
</html>
I am new to angular.js. I am getting the following error while executing a simple controller example.
Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=Mycontroller&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
script.js
var Mycontroller = function($scope){
$scope.message = "Hello Angular";
};
Output:
{{message}}
Where am i going wrong?
You should create a module, and then attach a controller to it. This is the angular way. Your code should look like this.
<html ng-app="my-app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
In your JavaScript file, you should have this
angular.module('my-app', [])
.controller('Mycontroller', function($scope) {
$scope.message = "Hello Angular";
});
Plunker: http://plnkr.co/edit/tYIQOlNALzco9zobAIO0?p=preview
try this it works
HTML page
<!doctype html>
<html ng-app="MyApp">
<head>
<title>HTML page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
<p>{{message}}</p>
</div>
</body>
hello.js
var app = angular.module("MyApp", []);
app.controller("Hello", function($scope, $http){Helloz($scope, $http);});
function Helloz($scope, $http) {
//$http.get('http://rest-service.guides.spring.io/greeting').
$http.get('/person').
then(function(data) {
$scope.greeting =angular.fromJson(data).data;
$scope.message=angular.fromJson(data).data;
},null);
}
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'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)