I have been using AngularJS for some time now and this particular code block is not difficult by any means, but it's not working and there must be something extremely simple that I am missing here:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with 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 | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
As of now, this code produces a blank page. There should be an unordered list with four records and for example, typing 'Bob' in the input box should filter the records down to the only one that contains the name 'Bob'.
This demo was already working when the AngularJS code was inline and there was no controller. I had used ngInit in order to supply the customer array. When I attempted to place the customers in their own controller, I started receive a blank page.
I'm sure I just need a second pair of eyes to look over this very simple example.
Thanks for any help you may be able to provide.
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</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 | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
angular.module('app', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>
Multiple things you could change in the demo.
You should create a new angular module
var module = angular.module(name, [dependencies])
That module should be bootstrapped using ng-app
ng-app="nameOfApp"
Controller should be added to the defined module
module.controller('SimpleController', SimpleController);
EDIT: Same outcome without specifying a module
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</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 | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>
Related
New to AngularJS and no idea wats happening here and nothing is getting populated in when I run this....
Using version - 1.6
please have a look, might be very silly problem but not getting through ;)
<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
<script src="js/angular.min.js"></script>
<script>
function simpleController($scope){
$scope.customers = [
{name:'anil', city:'bengaluru'},
{name:'rahul', city:'pune'},
{name:'abc', city:'hyd'},
{name:'xyz', city:'mysore'}
];
}
Create controller from angular then use it
code is:
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
<script src="js/angular.min.js"></script>
<script>
angular.module("app").controller('simpleController', simpleController);
function simpleController($scope) {
$scope.customers = [{
name: 'anil',
city: 'bengaluru'
}, {
name: 'rahul',
city: 'pune'
}, {
name: 'abc',
city: 'hyd'
}, {
name: 'xyz',
city: 'mysore'
}];
}
</script>
</body>
</html>
You have to create a controller before using it.
Create Controller by:
angular.Module("ModuleName",[]).Controller("ControllerName",function($scope){
});
According to your code:
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script>
angular.module("app",[]).controller('simpleController',
function simpleController($scope) {
$scope.customers = [{
name: 'anil',
city: 'bengaluru'
}, {
name: 'rahul',
city: 'pune'
}, {
name: 'abc',
city: 'hyd'
}, {
name: 'xyz',
city: 'mysore'
}];
});
</script>
</head>
<body>
<div data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
</body>
1st you need to have a module defined to start your project .Try this blog to learn more . For a simpler example try this.
To make your app work you need to enclose your view with ng-app in your case you have that . Then you need to create a module in your case its missing . Then add services and controller according to your need.
angular.module("app",[])
.controller("ctrl",simpleController);
function simpleController($scope){
$scope.customers = [
{name:'anil', city:'bengaluru'},
{name:'rahul', city:'pune'},
{name:'abc', city:'hyd'},
{name:'xyz', city:'mysore'}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
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'd like to supply a filter value via a variable. What is wrong with the ng-repeat line below where I attempted to include the model reference {{fil}}?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : {{fil}}">
{{ x }}
</li>
</ul>
<p>This example displays only the names containing the letter {{ fil }}.</p>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.fil = "a";
});
</script>
</body>
</html>
You should pass it without interpolation{{}}, so it will apply filter fil which is there in scope.
<li ng-repeat="x in names | filter : fil">
{{ x }}
</li>
I am trying to create a shopping list in Angular - and I cannot get my ng-repeat to work. {{food}} is all that will show up when I am trying to add something to my list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping List Angular</title>
</head>
<body ng-app="myModule" ng-controller="myController">
<div ng-controller="myController">
<ul>
<li ng-repeat="item in foods">{{ item.name }}</li>
<li> {{foods}}</li>
</ul>
<input type="text" placeholder="Item" ng-model=""></input>
<input type="text" placeholder="Item Name" ng-model=""></input>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
var app = angular.module('myModule', []);
app.controller('myController', function($scope) {
$scope.foods = [
{name: 'Kale', cost: $2.00},
{name: 'Tofu', cost: $3.00},
{name: 'Spinach', cost: $6.00},
{name: 'Onion', cost: $1.00}
];
});
In your JavaScript code, you're missing quotes to represent cost as a string. Try this:
$scope.foods = [
{name: 'Kale', cost: '$2.00'},
{name: 'Tofu', cost: '$3.00'},
{name: 'Spinach', cost: '$6.00'},
{name: 'Onion', cost: '$1.00'}
];
this is my first time asking a question on stackoverflow because so far I was able to find all the answers that I needed. This time, I couldn't though. My problem is every time I try to use ngRoute I get an error in the console saying "Error:
[$injector:modulerr] Failed to instantiate module demoApp due to:
$routeProvider.$ is undefined".
Here is my html code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body>
<article>
<div ng-view>
</div>
</article>
</body>
</html>
And this is my Angular code:
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.controller('Ctrl', ['$scope', function($scope){
$scope.customers = [
{firstName: 'Fostata', lastName: 'Boklik'},
{firstName: 'John', lastName: 'Hoe'},
{firstName: 'Jane', lastName: 'Doe'}
];
$scope.addCustomer = function(){
$scope.customers.push({firstName: $scope.newCustFirstName, lastName: $scope.newCustLastName});
};
}]);
demoApp.config(function($routeProvider) {
$routeProvider
.$.when('/', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/View1.html',
controller: 'Ctrl'
})
.$.when('.view2', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/view2.html',
controller: 'Ctrl'
})
.otherwise({
redirectTo: '/'
});
});
View1.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
<input type="text" data-ng-model='newCustFirstName'>
<br>
<input type="text" data-ng-model='newCustLastName'>
<br>
<button data-ng-click="addCustomer()">AddCustomer</button>
</article>
View2
</body>
</html>
view2.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script type="text/javascript" src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
First of all fix your templates
remove head scripts
remote ng-app
remove controller
Example view:
<!DOCTYPE html>
<html>
<body>
<article>
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
Views are defining only the part which should be changed, not the whole app.
Replace $routeProvider.$.when with $routeProvider.when