I am a beginner in Angular JS and this is the most basic program that I am stuck on. The below program I am trying to run is simply not responding. I included the angular-route.js function but I am still stuck.
<html data-ng-app="demoApp">
<body data-ng-controller = "SimpleController">
<label>Name:</label>
<input type="text" data-ng-model="name"/> {{name}}
<ul>
<li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} - {{cust.place}}</li>
</ul>
<script src="angular.min.js"></script>
<script src="angular-route.js"> </script>
</body>
<script>
var demoApp = angular.module('app', ['ngRoute']);
demoApp.controller('SimpleController', function ($scope){
$scope.customers=[
{id:1, name='John Doe', place:'San Fransisco'},
{id:2, name:'Jane Doe', place:'Seattle'},
{id:3, name:'John Mikael', place:'Las Vegas'}
];
});
</script>
This is the output
Name: {{name}}
{{cust.id}} - {{cust.name}} - {{cust.place}}
Here is the working code...
var demoApp = angular.module('myApp', []);
demoApp.controller('myController', function ($scope){
$scope.customers=[
{
id:1,
name:'John Doe',
place:'San Fransisco'
},
{
id:2,
name:'Jane Doe',
place:'Seattle'
},
{
id:3,
name:'John Mikael',
place:'Las Vegas'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<label>Name:</label>
<input type="text" data-ng-model="name"/> {{name}}
<ul>
<li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} - {{cust.place}}</li>
</ul>
<script src="angular.min.js"></script>
<script src="angular-route.js"> </script>
</div>
Your issue here is with the way you declared your module name.
var demoApp = angular.module('app', ['ngRoute']);
<html data-ng-app="demoApp">
In this case, the var demoApp is not the name of the module, it is simply a variable that can be used elsewhere in your JavaScript. The actual module name is 'app', so you should be using <html data-ng-app="app">. I highly recommend making the name of the module and the variable name the same, whenever possible, to avoid this kind of confusion.
Also, as others have stated, you have a typo in your data: {id:1, name='John Doe', place:'San Fransisco'}, should be name: not name=.
Related
Hy everybody, first question here.
I'm learning angularjs and right now i'm stuck on "Controller and Scope" chapter.
I'm trying to search trough an array of objects and show items that match my query; unfortunately my screen stays blank.
Here's my code:
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Search and print with Scope</title>
</head>
<body>
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
function Controller($scope)
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
</script>
</body>
</html>
What's wrong?
EDIT for EDIT:Just for those who might look at this question, my error was to call ng-app twice, once in the html tag and once in body tag.
EDIT: I'm here again; I modified the code using the given answers, but I still got a search box and a blank screen. I doubt is code related since I also tried to simply copy and paste it in a new file but i got the same result. What could be?
Code is down here:
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('demoApp', [])
app.controller('SimpleController', function($scope) {
$scope.cpu = [{
house: 'Intel',
model: 'I7'
},
{
house: 'AMD',
model: 'Ryzen'
},
{
house: 'Qualcomm',
model: 'Snapdragon'
}
];
});
</script>
<title>Search and print with Scope</title>
</head>
<body ng-app="demoApp">
<div ng-controller="SimpleController">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li>hi</li>
<li ng-repeat="proc in cpu">
{{proc.house}} - {{proc.model}}
</li>
<li>hi again</li>
</ul>
</div>
</body>
</html>
You need to have a angular module and ng-app mentioned as below
DEMO
var app = angular.module('myApp',[])
app.controller('Controller',function($scope){
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
<title>Search and print with Scope</title>
</head>
<body>
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
</body>
</html>
First of all you are trying to get the scope data before declaring it, you need to load the script before using ng-repeat, so move the script before the div definition.
Also you are not correctly defining the Controller, it should be defined within an app module, then bind the ng-app and the Controller in your HTML.
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Search and print with Scope</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('angularApp',[])
app.controller('Controller',function($scope){
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
});
</script>
</head>
<body ng-app="angularApp">
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
</body>
</html>
I just started learning AngularJS and facing a problem. When I run the follwing code {{ cust.name }} - {{ cust.city }} gets printed instead of the actual data that I pass.
My code:
<html data-ng-app="">
<head>
<title>Using angularJS directive and data binding </title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name:
<br/>
<input type="text" data-ng-model="name" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name"> {{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Abhijeet Singh',
city: 'New Delhi'
}, {
name: 'Dhiraj Mehta , city: New Delhi '
}];
}
</script>
</body>
</html>
A few things are missing from your code.
First it is good practice to name your app and a controller:
<body data-ng-app='myApp' data-ng-controller='myCtrl'>
Second whenever you refer to anything in Angular is has to be in scope of the controller. Currently your $scope is in scope of the "SimpleController" function and not of Angular's controller (you need an angular controller to have $scope available both within the controller and within your html e.g. the double curly brackets):
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$scope is available anywhere within this scope
}
Here is an example of your code working: https://jsfiddle.net/AKMorris/03hshn5m/
You will need to declare the app name and see the other settings.
Rest of the things are same.
var myApp = angular.module("MyApp", []);
var simpleController = angular.module("SimpleController", SimpleController);
simpleController.$inject = ['$scope'];
function SimpleController($scope){
$scope.customers = [{
name: 'Abhijeet Singh',
city: 'New Delhi'
}, {
name: 'Dhiraj Mehta , city: New Delhi '
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html data-ng-app="MyApp">
<head>
<title>Using angularJS directive and data binding </title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name:
<br/>
<input type="text" data-ng-model="name" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name"> {{cust.name }}-{{cust.city}}
</li>
</ul>
</div>
</body>
</html>
I am new to angular js
Controller is not working correctly in my code
i am trying to run following code
<!DOCTYPE html>
<html data-ng-app >
<head>
<title>Using AngularJS Directives and Data binding</title>
</head>
<body>
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name"/>{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city"> {{cust.name | uppercase}}-{{cust.city | lowercase}} </li>
</ul>
</div>
<script src= "angular/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp',[]);
demoApp.controller('SimpleController', function($scope){
$scope.customers=[
{name:'John Smith', city:'kashipur'},
{name:'John fds' , city:'san francisko'},
{ name:'shubham', city:'giarhineg'},
{name:'batra', city:'world'}];
});
</script>
</body>
</html>
</html>
but its not giving desire output .
please tell me if i am doing something wrong .
You are missing to add value in your ng-app directive that tell angular to run demoApp module on the page.
ng-app="demoApp"
You should add the name of your app.
ng-app="demoApp"
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Smith',
city: 'kashipur'
}, {
name: 'John fds',
city: 'san francisko'
}, {
name: 'shubham',
city: 'giarhineg'
}, {
name: 'batra',
city: 'world'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp">
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name" />{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{cust.name | uppercase}}-{{cust.city | lowercase}}</li>
</ul>
</div>
</div>
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title></title>
<script src="Script/angular.js"></script>
</head>
<body data-ng-controller="SimpleController">
// controller defined //
<ul>
<li data-ng-repeat="data in customers">
// data is not access controller
{{data.name}}-{{data.city}}
</li>
</ul>
</div>
/Is this way is correct to define controller/
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'alok ', city: 'azam' },
{ name: 'muku', city: 'lko' },
{ name: 'rajat', city: 'jungle' }
];}
</script>
</body>
</html>
I've rewritten your html a bit and it works now.
You have to define module called myApp and have to use controller directive to define controller in the module.
Please look at the sample I've added
http://jsfiddle.net/uv0gw4kL/2/
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
</head>
<body ng-controller="SimpleController">
<ul>
<li ng-repeat="data in customers">
{{data.name}}-{{data.city}}
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'alok ', city: 'azam' },
{ name: 'muku', city: 'lko' },
{ name: 'rajat', city: 'jungle' }
];
});
</script>
</body>
</html>
More about angular controllers here
http://www.w3schools.com/angular/angular_controllers.asp
You can also use allowGlobals feature from controller provider
https://docs.angularjs.org/api/ng/provider/$controllerProvider
but it's not recommended.
This is a simple inline controller which isn't working. I am unable to find the bug. I have tested this with ng-init and printed out with ng-repeat, works fine. With ng-controller, it doesn't.
<html data-ng-app>
<head>
<title></title>
</head>
<body data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope){
$scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}
</script>
</body>
</html>
You need to have the app initiated in javascript using
angular.module
for the app name you specifying in data-ng-app
Working Fiddle
Javascript Code:
angular.module("myApp", [])
.controller('SimpleController', function ($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'Melbourne'
}, {
name: 'Jack Daniels',
city: 'Atlanta'
}];
});
Lots of chatter in the comments so I'll sum this in an answer.
As #squiroid correctly stated, the use of global controllers (meaning define a function and then just reference it) has been removed in recent Angular versions and in 1.3 specifically.
You have to define your module and register your controller to it, so in overall you need:
var myApp = angular.module("myApp", []);
function SimpleController($scope){
$scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}
myApp.controller("SimpleController", SimpleController); //This is a must now
And in your view you need to refer to your module:
<html data-ng-app="myApp">
Your code works fine in angular 1.2 version.
but in case if you are using angular 1.3+ it will not.
With angular 1.3 you can no longer use global controller declaration on the global scope. You would need to define the controller using inline declaration.
In your HTML:
<html data-ng-app="app">
In js:
angular.module('app', []).controller('SimpleController', function($scope){
$scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
});
or with your existing controller:
angular.module('app', []).controller('SimpleController', SimpleController)
V31,
You definitely need to bootstrap your module since you are using 1.3 because using controller as a global function like you've done has been deprecated in 1.3.
See a complete working example below. Try it out and see if it helps you.
<html data-ng-app="customersApp">
<head>
<title></title>
</head>
<body data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script>
var app = angular.module('customersApp', [])
app.controller('SimpleController', ['$scope', function ($scope) {
$scope.customers = [
{ name: 'John Doe', city: 'New York' },
{ name: 'Jane Doe', city: 'Melbourne' },
{ name: 'Jack Daniels', city: 'Atlanta' }
];
}]);
</script>
</body>
</html>
SO1
For best practice in angular use module (I am not considering Angular 2.0 where module is dead):-
And for controllers use "controller as " and bind data on controller not on $scope.
<body data-ng-app="myApp" data-ng-controller="SimpleController as ctrl">Name:
<br />
<input type="text" data-ng-model="ctrl.name">
<ul>
<li ng-repeat="cust in ctrl.customers | filter:ctrl.name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
</body>
Ctrl:-
angular.module("myApp", [])
.controller('SimpleController', function () {
this.customers = [{
name: 'John Doe',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'Melbourne'
}, {
name: 'Jack Daniels',
city: 'Atlanta'
}];
});
Fiddle
I did 2 examples using Angular 1.2.26 and 1.3.12
Example using 1.3.12
<!DOCTYPE html>
<html ng-app="test">
<head>
<!--<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
</head>
<body ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
</ul>
<script>
var app = angular.module('test', []);
app.controller('SimpleController', function($scope){
$scope.customers=[{name:'John Doe', city:'New York'},
{name:'Jane Doe', city:'Melbourne'},
{name:'Jack Daniels',city:'Atlanta'}];
});
</script>
</body>
</html>
The main changes here were the use of module and controller inside script
Example using version 1.2.26
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="" data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
</ul>
<script>
function SimpleController($scope){
$scope.customers=[{name:'John Doe', city:'New York'},
{name:'Jane Doe', city:'Melbourne'},
{name:'Jack Daniels',city:'Atlanta'}];
}
</script>
</body>
</html>
here the only change I did was add ng-app="" in body