I am very novice learning Angular js . I am following a video tutorials and made the following example. This doesn't show any output. can annyone let me know what am I missing.
<!DOCTYPE html>
<html >
<head>
<title>Directives with Databinding</title>
<meta charset="utf-8" />
<script src="scripts/angular.min.js"></script>
</head>
<body ng-app="ngcontrollereg">
<div ng-controller="SimpleController">
Name: <input type="text" ng-model="name" />
<br />
<ol>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
</ol>
</div>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'John Does', city: 'Phoenix' },
{ name: 'Lake Oswere', city: 'Phoenix' },
{ name: 'Raman', city: 'Kanchira' },
{ name: 'Alvaro', city: 'Kanchira' }
];
}
</script>
</body>
</html>
You need to create the angular module and register the controller with the module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ngcontrollereg">
<div ng-controller="SimpleController">
Name:
<input type="text" ng-model="name" />
<br />
<ol>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
</ol>
</div>
<script>
var app = angular.module('ngcontrollereg', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Does',
city: 'Phoenix'
}, {
name: 'Lake Oswere',
city: 'Phoenix'
}, {
name: 'Raman',
city: 'Kanchira'
}, {
name: 'Alvaro',
city: 'Kanchira'
}];
});
</script>
</body>
Or you can create it like this :
angular.module('ngcontrollereg',[]).controller('SimpleController' ,function_Controller)
function function_Controller($scope) {
$scope.customers = [
{ name: 'John Does', city: 'Phoenix' },
{ name: 'Lake Oswere', city: 'Phoenix' },
{ name: 'Raman', city: 'Kanchira' },
{ name: 'Alvaro', city: 'Kanchira' }
];
}
Related
I am getting following error while trying to list contents from controller function in angular JS. I am pretty new to Angular JS. I checked one the video
tutorial and tried code by my own. I written the same code as it was there in the tutorial but though it is showing this error. Unable to understand what cause this to happen.
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=simpleController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at file:///F:/Study/angular/angular.min.js:6:417
at Rb (file:///F:/Study/angular/angular.min.js:19:510)
at sb (file:///F:/Study/angular/angular.min.js:20:78)
at $get (file:///F:/Study/angular/angular.min.js:75:396)
at file:///F:/Study/angular/angular.min.js:57:100
at r (file:///F:/Study/angular/angular.min.js:7:408)
at B (file:///F:/Study/angular/angular.min.js:56:471)
at g (file:///F:/Study/angular/angular.min.js:51:335)
at g (file:///F:/Study/angular/angular.min.js:51:352)
My code is as below -
<head>
<title>Angular ng-controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div data-ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
}
</script>
</body>
You must inject your controller into application module.
Give your app a name:
<html ng-app='myApp'>
Inject controller:
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [
{ name:'John Doe',city : 'Pheonix'},
{ name : 'John Smith',city: 'New York'},
{ name : 'Jane Doe',city : 'San Fransisco'}
];
}
Controller simpleController should be registered under angular app.
see the working code below.
var app = angular.module('app', []);
app.controller('simpleController', function($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div data-ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
</div>
Your code is absolute correct for the angular version less than 1.3 except the function name spelling. It should be data-ng-controller="SimpleController" while calling as you have declared.
You can try after including following cdn
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js
jsfiddle: http://jsfiddle.net/samirkumardas/3tt3p09h/
You are not defined angular.module in your script.
<head>
<title>Angular ng-controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app='filterApp'>
<div ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module('filterApp', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
}
</script>
</body>
I am learning Angularjs. I have started with http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
Most of the tutorial examples worked fined until I dashed into the following code:
<html>
<head>
</head>
<body data-ng-app=''>
<div data-ng-controller="simpleController" >
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
<script src='angular.min.js'></script>
<script>
function simpleController($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
</script>
</div>
</body>
</html>
You are using a controller with out creating a module. You have to create a module before handling the controller.
In older versions of Angular JS(<1.3) you can create a controller with out a module. But in later versions it is not possible.
Please have a look at the below code
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"> </script>
</head>
<body data-ng-app='myapp'>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="x in names">{{ x.name}}</li>
</ul>
</div>
<script>
var app = angular.module('myapp', [])
app.controller('simpleController', function($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
});
</script>
</body>
</html>
OR
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
</head>
<body ng-app='myapp'>
<ul ng-controller='simpleController'>
<li ng-repeat='x in names'>{{x}}</li>
</ul>
<script>
function simpleController($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
}
simpleController.$inject = ['$scope'];
angular.module('myapp', []).controller('simpleController', simpleController)
</script>
You problem is you are using Angular 1.3+
Your code will work with Lower Version of angular (lesser than 1.3), because you are using global function declaration, & the global function declaration is disabled by default in angular 1.3.
If you want to get your code Working you need to enable global controller function declaration while initializing angular.
Config
app.config($controllerProvider) {
// Don't do this unless you *have* to
$controllerProvider.allowGlobals();
});
But this is not good practice to use global functions, you should us modular approach as angular do use it separate out code. Then do mention you module name in you ng-app directive like ng-app="app"
Code
angular.module('app', [])
.controller('simpleController',simpleController)
function simpleController($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
}
HTML
<body data-ng-app=''>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
</body>
The better way to do is creating controllers.js for controller
<html ng-app='myapp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div data-ng-controller="simpleController" >
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
</body>
</html>
The logic in controllers.js should be with module:
var app = angular.module('myapp', [])
app.controller('simpleController', function($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
});
I'm new with AngularJS. I have a simple simple code segment using ng-controller. But it does not works for me. How can I fix this code?
<!DOCTYPE html>
<html ng-app="">
<head>
<title>AngularJS Demo App </title>
</head>
<body ng-controller="simpleController">
<br />
Tags:
<br />
<input type="text" ng-model="tags" />{{tags}}
<ul>
<li ng-repeat="FriendName in friends|filter:tags | orderBy:'-age'">{{tag.FriendName}}--{{tag.age}}</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<!--<script src="Scripts/angular.min.js"></script>-->
<script>
function simpleController($scope) {
$scope.friends =
[{ name: 'John', phone: '555-1212', age: 10 },
{ name: 'Mary', phone: '555-9876', age: 19 },
{ name: 'Mike', phone: '555-4321', age: 21 },
{ name: 'Adam', phone: '555-5678', age: 35 },
{ name: 'Julie', phone: '555-8765', age: 29 }];
}
</script>
</body>
</html>
Angular team just removed the global controller on window. so you have to define you angular module
And also do what #tymeJV told you
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Demo App </title>
</head>
<body ng-controller="simpleController">
<br />
Tags:
<br />
<input type="text" ng-model="tags" />{{tags}}
<ul>
<li ng-repeat="FriendName in friends|filter:tags | orderBy:'-age'">{{FriendName.name}}--{{FriendName.age}}</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("simpleController", function($scope) {
$scope.friends =
[{ name: 'John', phone: '555-1212', age: 10 },
{ name: 'Mary', phone: '555-9876', age: 19 },
{ name: 'Mike', phone: '555-4321', age: 21 },
{ name: 'Adam', phone: '555-5678', age: 35 },
{ name: 'Julie', phone: '555-8765', age: 29 }];
});
</script>
</body>
</html>
What is wrong with my code? It has to show all the NAME, but it doesn't work well
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
DemoApp = angular.module("DemoApp", []);
DemoApp.controller('SimpleController', function ($scope) {
$scope.Customer = [{ Fname: 'Alireza', City: 'Tehran' }, { Fname: 'Ali', City: 'Tabriz' }, { Fname: 'Ehsan', City: 'Abadan'}];
});
DemoApp.controller();
</script>
</head>
<body data-ng-app="DemoApp">
<div data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cust in Customer">{{cust.Fname}}</li>
</ul>
</div>
</body>
</html>
Capitalization mismatch Fname != FName
http://jsfiddle.net/cdCqu/
HTML
<body data-ng-app="DemoApp">
<div data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cust in Customer">{{cust.Fname}}</li>
</ul>
</div>
</body>
JS
angular.module("DemoApp", []).controller('SimpleController', function ($scope) {
$scope.Customer = [{ Fname: 'Alireza', City: 'Tehran' }, { Fname: 'Ali', City: 'Tabriz' }, { Fname: 'Ehsan', City: 'Abadan'}];
});
try this jsFiddle , also you do not need data attribute as well as FName must be Fname , you donot need to append data with ng attributes
just remove data attribute
http://jsfiddle.net/imsaurabh/K6qwQ/
I'm trying to find a problem for over an hour. I got an error:
Error: Argument 'SimpleController' is not a function, got undefined
Does anyone know why SimpleController is undefined? Thanks!
<!DOCTYPE html>
<html ng-app>
<body>
<div ng-controller="SimpleController">
<ul>
<li ng-repeat="customer in customers">
{{ customer.name }}
</li>
</ul>
</div>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Kentucky' },
{ name: 'Mister X', :city: 'SF' }
];
}
</script>
</body>
</html>
You have a typo in your array. Delete this colon and it'll work
$scope.customers = [
{ name: 'Dave Jones', city: 'Kentucky' },
{ name: 'Mister X', **:** city: 'SF' }
];
Remove the : in front of :city:.
Working example:
http://jsfiddle.net/colllin/aQHpb/