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'
}];
});
Related
The title may be a bit confusing. Please take a look at the code below,
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | filter:test"> {{ x }}</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
</body>
</html>
with these codes i can search for a name from scope.names. But the problem is, i don't want to hide other results while searching for a particular name. Which means, when i search "Gustav", it should be on top of the list without hiding other names. It would be more great if names were sorted by the matching of supplied keyword. Please help in this.
OrderBy is one of the options for the desired effect:
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | orderBy:customOrdering"> {{ x }}</div>
{{ log }}
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.test = "";
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.customOrdering = function(a) {
return a.indexOf($scope.test) == -1;
//return a.toUpperCase().indexOf($scope.test.toUpperCase()) == -1;
// use that for case insensitive search
}
});
</script>
</body>
</html>
Here is simple HTML with Angular js controller
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
}
</script>
</body>
</html>
Here result is not displayed. Error in debugger The controller with the name 'SimpleController' is not registered.
What is wrong here?
It is because you need to wrap the entire thing into a module as below
HTML
<!DOCTYPE html>
<html ng-app="sampleMod">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
</body>
</html>
Javascript Controller
var app = angular.module('sampleMod', []);
app.controller('SimpleController', function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
LIVE DEMO
As #charlietfl has already given you the point that you need to register angular module first.
See an updated example here
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="SimpleController" >
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script>
angular.module("myapp", [])
.controller("SimpleController", function($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
</script>
</body>
</html>
This code registers a controller function named "SimpleController" in the angular module named "myapp".
You cannot bind a controller to an angular application as what you did. You need to create an app module and add that you your code. Only inside that app you can specify your controller. I have corrected the code here.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body ng-app="TestApp">
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("TestApp", []);
angular.module("TestApp").controller('SimpleController', function ($scope) {
$scope.customers = [{ name: 'John Smith', city: 'Pheonix' },
{ name: 'Alan David', city: 'England' },
{ name: 'John Hello', city: 'Arizona' },
{ name: 'John Fosay', city: 'Lester' }];
})
</script>
</body>
</html>
As you are using angular version 1.4.8 you can't use global functions as controllers without registering them as part of the module as already suggested by charlietfl to you in the comment.
working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('SimpleController',function($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
<li ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('app', []);
app.controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
}
</script>
</body>
</html>
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>
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/