I am following the tutorial : AngularJS in 60 min and I am failed to get working a simple script where the controller is declared on the same page as the view (Indeed it is very basic).
But actually it is not working properly:
So my code is :
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>AngularJS in 60 minutes</title>
<script src="./js/angular.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container" data-ng-controller="SimpleController">
<h3>Instance of model and data binding</h3>
Name : <input type="text" data-ng-model="city"> {{ city }}
<h3>Instance of repeat directives</h3>
<ul>
<ol data-ng-repeat="person in people | filter:city | orderBy:'city'">{{ person.firstname}} {{ person.name | uppercase}} : {{ person.city}}</ol>
</ul>
</div>
<script>
function SimpleController($scope) {
$scope.people = [{firstname:'Valerie', name:'lion', city:'Paris'}, {firstname:'Fred', name:'creche', city:'Marly'}, {firstname:'Laurent', name:'larher', city:'Massy'}];
}
</script>
</body>
and the result is in the image enclosed.
Any suggestions is welcome.
Fred
I suspect you are using Angular 1.3 or higher. As of 1.3, Angular no longer looks for controllers on window. Here is the migration link:
https://docs.angularjs.org/guide/migration
Instead, you should use the app.controller() syntax:
var myApp = angular.module('myApp',[]);
myApp.controller('SimpleController',function($scope) {
$scope.people = [{firstname:'Valerie', name:'lion', city:'Paris'}, {firstname:'Fred', name:'creche', city:'Marly'}, {firstname:'Laurent', name:'larher', city:'Massy'}];
});
And change your html:
<html data-ng-app="myApp">
In your script you must define angular module and then controller:
angular.module('myApp', []).controller('SimpleController', ['$scope', function($scope) {
// to do something....
}])
and in your HTML:
<html data-ng-app="myApp">
....
</html>
Since 1.3 you can't define your controller as a global function. You have to register in on a module. For this, you'll have to have a named module (data-ng-app='app'). Then, you'll be able to write
angular.module('app', []).controller("SimpleController", function($scope) { ...
Related
Problem with ng-controller : Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
I'm beginner in AngularJS, i'm facing a problem while using ng-controller :
this is my code :
<html>
<head>
<title></title>
</head>
<body ng-app>
<div ng-controller="ListDataCtrl">
<div ng-repeat="item in listData">
<p><strong>{{item.name | uppercase}}</strong></p>
<p>{{item.country}}</p>
<p>*********************</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script>
function ListDataCtrl($scope){
$scope.listData =[
{"name":"Achraf", "country":"Tunisia"},
{"name":"Maher", "country":"UAE"},
{"name":"Ahmed", "country":"USA"},
{"name":"Issam", "country":"France"}
];
}
</script>
</body>
</html>
the error message is : angular.js:15567 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
The error indicated that controller is not registered:
The controller with the name 'ListDataCtrl' is not registered.
From AngularJS version 1.3 you have to register your controllers with modules rather than exposing them as globals:
documentation
First of all you need to declare an angularJS module for the app , and then register the controller to that module as below:
<body ng-app="myApp">
In script, app declaration:
var myApp = angular.module('myApp', []);
controller setup:
myApp.controller('ListDataCtrl', ['$scope', function($scope) {
...
}
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
I'm able to display pound successfully in the following example if I use the pound symbol directly in the JSON data. How can I tell angular that I want to display Misko got £?
(function(angular) {
'use strict';
angular.module('oneTimeBidingExampleApp', []).
controller('EventController', ['$scope', function($scope) {
var counter = 0;
var names = ['Igor got �', 'Misko got £', 'Chirayu got £'];
/*
* expose the event object to the scope
*/
$scope.clickMe = function(clickEvent) {
$scope.name = names[counter % names.length];
counter++;
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example28-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="oneTimeBidingExampleApp">
<div ng-controller="EventController">
<button ng-click="clickMe($event)">Click Me</button>
<p id="one-time-binding-example">One time binding: {{::name}}</p>
<p id="normal-binding-example">Normal binding: {{name}}</p>
</div>
</body>
</html>
Add ngSanitize as a dependency to your module. Also include the below script in your HTML.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.min.js"></script>
angular.module('oneTimeBidingExampleApp', ['ngSanitize'])
In your html use the ng-bind-html so that angular will display it as HTML instead of plain text
<p id="normal-binding-example">Normal binding: <span ng-bind-html="name"></span></p>
Angular is escaping / sanitizing by default but you can use the ng-bind-html directive with sth like this to display html:
<div ng-bind-html="'Misko got £'"></div>
or
<div ng-bind-html="name"></div>
more info: https://docs.angularjs.org/api/ngSanitize/service/$sanitize
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
i m new in angularjs. But there is problem that i cant resolve it my code is below
My index.html file is given below
<!doctype html>
<html ng-app = "myApp">
<head>
<script src=""https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js""></script>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope){
$rootScope.name = "Ari Lerner";
});
</script>
</head>
<body>
<div>
{{name}}
</div>
</body>
</html>
But still the output on Browser in
{{name}}
please help to solve my problem
I think you made this pretty complex for your self. You need to play with the scope of that moment instead of using the rootScope when their is only one level of scope involved.
However in order to make your example work created a fiddle for the same:
Fiddle
Code Snippet:
HTML:
<div ng-app>
<div ng-controller="test">
{{name}}
</div>
</div>
JS:
function test($scope){
$scope.name = "Ari Lerner";
}
Make sure your angularjs is included properly:
Put double quotes only once:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
demo: jsfiddle