The first time I used angular.js, using http request to dynamically render data, I encountered such a strange problem, there is no problem with the following code alone, but if you put it in the page I want to do , it will give an error:
Error: [ng:areq] Argument 'customersCtrl' is not a function, got undefined
But I have defined customersCtrl,
<div ng-controller="customersCtrl">
This is my code:
<div ng-app="myApp" >
<div ng-controller="customersCtrl">
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
});
</script>
</div>
You must define the <script> tag outside of the ng-app element. Should you use inline js, the script tag must be defined before the ng-app element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = ["Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas"]
// $http.get("http://localhost:17900/flower/flowers?flowerName")
// .then(function (result) {
// $scope.names = result.data.body;
// });
});
</script>
<div ng-app="myApp">
<div ng-controller="customersCtrl">
<p ng-repeat="name in names">{{name}}</p>
</div>
</div>
Note
I recommend you to use version 1.7.5
The problem is you include the angular controller in html tags before you define it, So angular compiler could not find the customersCtrl as function.
Edit Your code like this :
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl',['$scope','$http' function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
}]);
</script>
<div ng-app="myApp" >
<div ng-controller="customersCtrl"></div>
Related
I try it like bellow but result is "undefined"
Please help me
Here is code :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="carname='Volvo'">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//I want to get value of $scope.carname here
alert($scope.carname);
});
</script>
That's the default behaviour because the controller gets created first and then carname='Volvo' is set.
as a work around, you should use a function as below instead,
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.init = function(carName) {
$scope.carname = carName;
alert($scope.carname);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="init('Volvo')">
<h1>{{carname}}</h1>
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
});
</script>
Comming Output:
Hi {{name}}
Desired Output:
Hi Habib
You can compile the $scope variable with a directive and hence you do not need ngSanitize
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$sce) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
$scope.trustAsHtml = function(html){
return $sce.trustAsHtml(html);
}
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.ngBindHtml);
function getStringValue() {
return (parsed(scope) || '').toString();
}
// Recompile if the template changes
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope); // The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="trustAsHtml(myMarkup)" compile-template></p>
</div>
You shoud use $interpolate like this: (Notice you must declare the interpolated value before the markup)
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope, $interpolate) {
$scope.name = "Habib";
$scope.myMarkup = $interpolate("<h1>Hi {{name}}</h1>")($scope);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>
app.controller("myCtrl", function($scope,$interpolate) {
$scope.name="Habib";
$scope.myMarkup = $interpolate('<h1>Hi {{name}}</h1>')($scope);
});
Try with above code. Might help!! $compile is an alternative of $interpolate. You can try that too.
I'm trying to create a new angularjs controller and this error just don't want to dissapear:
Argument 'AppController' is not a function, got undefined
My code:
var app = angular.module('myApp', [])
.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
app.html.twig
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{'{{ data }}' }}</h1>
</div>
I really don't understand what am I missing. I ve searched for this error, and I tried the solutions presented but I can not resolve it. Any ideas?
Here is your own code. Please go through it and for more just go to plunker
//JS code
var app = angular.module('myApp', [])
.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
//template code
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{data}}</h1>
</div>
</div>
I think you should keep it separate like this, it'll work
var app = angular.module('myApp', []);
OR
var app = angular.module('myApp');
app.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
Also this syntax is wrong but your error is not because of this
<h1> {{'{{ data }}' }}</h1>
Change
<h1> {{ data }}</h1>
Try to create like this
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
$scope.data = 'Hello';
});
<div ng-app="mainApp" ng-controller="mainCtrl">
{{ data }}
</div>
var app = angular.module('myApp', [])
app.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{data}}</h1>
</div>
</div>
{{'{{ data }}' }} =======> {{data}}
I created a snippet with your provided code and jut this part in html and it's working now. Kindly check this answer.
Thank you.
I am trying to implement a custom filter. I am getting a dependency error from angularjs.
Below is my code:
angular.module('Test', [])
.controller('TestController', ['$scope', function ($scope) {
$scope.myDate = 1456106575956;
}])
.filter('utcToDate', function(pUTCString) {
return function(pUTCString) {
return new Date(pUTCString);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Test" ng-controller="TestController">
{{myDate | utcToDate:myDate }}
</body>
Your JS should be
angular.module('Test', [])
.controller('TestController', ['$scope', function ($scope) {
$scope.myDate = 1456106575956;
}])
.filter('utcToDate', function() {
return function(pUTCString) {
return new Date(pUTCString);
}
});
HTML is fine, but can also be written as
<body ng-app="Test" ng-controller="TestController">
{{myDate | utcToDate }}
</body>
What went wrong?
You're not required to specify a parameter while defining the function for a custom filter as you have done here
.filter('utcToDate', function(pUTCString) {
More on filters from the official documentation.
Here is a Working Demo
I'm developing html 5 mobile app using visual studio cordova, angular js and ionic framework. In that, I need to save some values to localStorage. I followed some articles but there is an error throwing when saving values to the local storage.
<!doctype html>
<html ng-app="myApp">
<head> <title>Test app</title></head>
<body ng-app="myApp" ng-controller="MainCtrl">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-local-storage.js"></script>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script>
var myApp = angular.module('myApp', ['ionic', 'LocalStorageModule']);
myApp.controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
</script>
<div>
<input type="button" ng-click="test()" value="add new">
</div>
</body>
</html>
It throws ReferenceError: isUndefined is not defined at Object.addToLocalStorage
Any idea??
Here is a plunker working with your application plnkr
var myApp = angular.module('myApp', ['ionic' ,'LocalStorageModule']).config(function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('cars')
.setStorageType('localStorage')
.setNotify(false, false);
}).controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);