This question already has answers here:
Controller not a function, got undefined, while defining controllers globally
(14 answers)
Getting an error when using ng-controller in angularjs ver 1.3.0 [duplicate]
(1 answer)
Closed 7 years ago.
I am a newbie to angular js and found a strange problem.I was not able to run the following code :
hello.html
<html ng-app>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Angular 1.3+ no longer supports controller declaration on the global scope. Modify your code as
angular.module('app', [])
.controller('HelloController', function ($scope) {
$scope.greeting = {
text: 'hello'
}
});
You need to create a module for your controller, for example :
angular.module('myApp.controllers')
.controller('HelloController', function ($scope) {
$scope.greeting = { text: 'Hello' };
}
});
Related
I cannot use Angular inside Django. Here is my code:
angularapp.js
var APP = angular.module('APP', []);
APP.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]')};
APP.ApplicationCtrl = function ($scope) {
$scope.name = 'World';
};
angular.html
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="angularapp.js" type="text/javascript"></script>
<body>
<div ng-app="APP" ng-controller="APP.ApplicationCtrl">
<h1>Hello [[ name ]]!</h1>
</div>
</body>
</html>
Both files are in the same folder. When the project starts, the terminal shows:
[02/Jun/2016 17:30:35] "GET /django-sb-admin/angularapp.js HTTP/1.1" 200 297"
In the browser I see only:
Hello [[ name ]]!
What is wrong?
The code has a typo as you forgot to close the function brace ).
APP.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]')
};
Correct code:
APP.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Plunker
Try to see at verbatim for change brackets in django, not in angular
This question already has answers here:
AngularJS ng-bind-html 2way data binding
(2 answers)
Closed 7 years ago.
AngularJS v1.3.14: Currently, I'm successfully using the 'ngSanitize' module in my angular app with "ng-bind-html" to bind some HTML to the output of an area on the page. That works and doesn't require the older $sce 'trust HTML' stuff.
But, I'd like to embed child bindings within that HTML.
So... something like this works...
angular.module('myApp', ['ngSanitize'...)
.controller('SomeCtrl', ['$scope', function($scope) {
$scope.myHTML = '<p>hello world</p>';
}]);
...
<div ng-app="myApp" ng-controller="SomeCtrl" ng-bind-html="myHTML"></div>
Something like this doesn't...
angular.module('myApp', ['ngSanitize'...)
.controller('SomeCtrl', ['$scope', function($scope) {
$scope.myContent = 'hello world';
$scope.myHTML = '<p>{{myContent}}</p>';
}]);
...
<div ng-app="myApp" ng-controller="SomeCtrl" ng-bind-html="myHTML"></div>
Thoughts?
A simple directive like this would do it:
<div bindy="myHTML"></div>
.directive('bindy', function($compile) {
return {
link: function($scope, $element, $attrs) {
var html = $scope.$eval($attrs.bindy);
$element.html(html);
$compile($element.contents())($scope);
}
};
});
Searched far and wide, most of the answers were "you forgot to include your controller".
"Error: [ng:areq] Argument 'AdamState' is not a function, got undefined"
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="">
<div ng-controller="AdamState">
</div>
</body>
</html>
JS:
function AdamState($scope, $http) {
$scope.test = 1;
}
Also, when calling that function from the console it will be called.
Angular 1.3+ global controller functions are turned off.
So you need to bind your controller to module,
Controller
var app = angular.module('app',[])
app.controller('AdamState',[`$scope`, `$http`, AdamState])
function AdamState($scope, $http) {
$scope.test = 1;
}
Or you need to declare controller as global controller then do allow global controller function manually form app.config() that is in angular config phase, the below code will make your code working.
CODE
app.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Thanks.
You miss lots of code there, this should eventually help you get started:
var myApp = angular.module("myApp", []);
myApp.controller("AdamStateCtrl", function($scope) {
$scope.test = 1;
});
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="AdamStateCtrl">
{{test}}
</div>
</body>
</html>
This question already has answers here:
Controller not a function, got undefined, while defining controllers globally
(14 answers)
Closed 8 years ago.
I'm learning AngularJS and have come across this error while implementing a controller.
Can someone point out what's wrong? (followed this exactly as it's shown in a tutorial unless some of the functions are deprecated?)
I get the following error:
Argument 'Ctrl' is not a function, got undefined
HTML
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"> </script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="name">
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
var Ctrl = function($scope) {
$scope.name = "Noob";
$scope.age = "21";
};
</script>
As I know you need to define controller using module.controller method. For example, name your app as myApp
<html ng-app="myApp">
and the js part will be:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.name = "Noob";
$scope.age = "21";
}]);
You need to define your app
var myApp = angular.module('myApp',[]);
and pass $scope into your controller
var Ctrl = function($scope) {
Here's a fiddle link with those changes: http://jsfiddle.net/fxk7mtb7/
I have a controller with such:
$scope.myVar = 0;
$scope.back = function () {
$scope.myVar--;
};
$scope.next = function () {
$scope.myVar++;
};
If next() (with ngClick) is called 3 times, we get:
//1
//2
//3
but if back() (with ngSwipeLeft) is called it returns
//-1
when I'm obviously expecting
//2
What am I missing here?
update: including ngTouch details - this seems to be the problem.. ngTouch is included.
When I watch the myVar value - its like it exists twice - one with the ngSwipeLeft call, and one with the ngClick call
Your snippet looks fine to me. You need to provide more code, error might be somewhere else. Look at the code below.
<!doctype html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-touch.min.js"></script>
<script>
var app = angular.module('myapp',['ngTouch']);
var controller = app.controller('mycontroller', ['$scope',function($scope){
$scope.myVar = 0;
$scope.back = function () {
$scope.myVar--;
};
$scope.next = function () {
$scope.myVar++;
};
}]);
</script>
</head>
<body ng-controller="mycontroller">
<div>
<h1>MyVar: {{myVar}}!</h1>
<input type="button" value="back" ng-click="back()"/>
<input type="button" value="next" ng-click="next()"/>
</div>
</body>
</html>
Ok, so I've figured out my problem - I wasn't providing enough detail in the question - but if someone runs into something similar in the future, heres what was going on:
I was declaring my controller with ng-controller="myCtrl" in the templates, but also using routing, where I declared my controller like:
$routeProvider.when('/', {
templateUrl: 'myUrl.html',
controller: 'myCtrl'
});
This was instantiating the controller twice, and obviously causing problems (although that seemed to the only one to surface for now).
Removing the controller definition from the routing or the view did the trick.
need to see your html not sure about your problem, here is a sample working code,
<div ng-app="myapp">
<div ng-controller="IncDecController">
<span>current value is {{myVar}}</span>
<img src="https://angularjs.org/img/AngularJS-large.png" ng-swipe-left="back()"></img>
<button ng-click="next()">next</button>
</div>
</div>
script:
angular.module('myapp', ['ngTouch'])
.controller('IncDecController', ['$scope', function ($scope) {
$scope.myVar = 0;
$scope.back = function () {
$scope.myVar--;
};
$scope.next = function () {
$scope.myVar++;
};
}])