I am learning AngularJS. I am trying to list out the variable in controller. I have this in the script.
var demoController = angular.module('sampleController',[]);
demoController.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
And I have this in the HTML.
<html ng-app="demoController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div ng-controller="sampleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
</div>
</body>
</html>
It is not listing out the variable. What is wrong with this script. Thanks!!
You need to define your module in the right way
var app = angular.module('app',[]);
Then, use it in your HTML file
<html ng-app="app">
See it working on jsbin
Note that, the angular module's name is the one defined within the quotes
angular.module('app',[]);
So, if you wrote var xModule = angular.module('app2',[]); your module name is app2 not xModule
Here is the code I am using :
<meta name="robots" content="noindex">
<html data-ng-app="app">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div data-ng-controller="sampleController">
<ul><li data-ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li></ul>
</div>
<script id="jsbin-javascript">var app = angular.module('app',[]);
app.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
</script>
</body></html>
And the output is :
Applying filters
{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}
Let me know what is missing here.
Related
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 trying to learn AngularJS, and going through an older tutorial I have built out a simple app. It has an index.html and two partial views which are loaded via ui-router. I know it's not separated into different files -- this is a learning project only.
The problem is that $scope does not seem to be available in View1 or in its called JS function , so ng-repeat doesn't seem to find anything to display, and addCustomer cannot see $scope.newCustomer.name. I am sure that I am missing something simple.
index.html:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="js/angular/angular.js"></script>
<script src="js/angular-ui-router/angular-ui-router.js"></script>
<!-- your app's js -->
<script>
var demoApp = angular.module('demoApp', ['ui.router']); // [] is for dependencies
// routes
demoApp.config(function($stateProvider, $urlRouterProvider) {
var nameState = {
name: 'name',
url: '/view1',
controller: 'SimpleController',
templateUrl: 'partials/View1.html'
}
var cityState = {
name: 'city',
url: '/view2',
controller: 'SimpleController',
templateUrl: 'partials/View2.html'
}
$stateProvider.state(nameState);
$stateProvider.state(cityState);
$urlRouterProvider.otherwise('/view1');
});
// controller
demoApp.controller("SimpleController", function ( $scope, $log ) {
$scope.log = $log;
$scope.customers = [{name: 'John Doe', city:'New York'},
{name: 'Jake Smith', city:'Atlanta'},
{ name: 'Jane Doe', city:'San Francisco'}];
$scope.addCustomer = function () {
$log.log("Add customer");
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
});
</script>
</head>
<body>
<div>
<!-- placeholder for views inserted by ui-router -->
<ui-view></ui-view>
</div>
</body>
</html>
View1.html:
<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" /> You entered: {{filter.name}}
<div class="container">
<h3> Loop </h3>
<ul>
<li ng-repeat="cust in $scope.customers | filter:filter.name">{{ cust.name }} - {{ cust.city }}</li>
</ul>
<br /> Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br /> Customer City:
<input type="text" ng-model="newCustomer.city" />
<br />
<br />
<button ng-click="addCustomer()">Add Customer</button>
</div>
Switch to View 2
</div>
Use only
ng-repeat="cust in customers"
You don't have to specify $scope in the html:
ng-repeat="cust in customers"
try this :
<li ng-repeat="cust in customers">
you dont need to mention $scope.customers
try this (remove "$scope.") :
ng-repeat="cust in customers | filter:filter.name"
instead of :
ng-repeat="cust in $scope.customers | filter:filter.name"
I have a small ngRoute example I am trying that to use multiple applications and controllers with. The first app/controller is for the main page, while the second set of app/controller is for the html that ngRoute loads up after pressing a button. However, it doesn't seem to be working. Code below:
Main Module
var app = angular.module("MainModule", ["ngRoute"]);
Main Controller
app.controller("MainController", function ($scope) {
});
app.config(function ($routeProvider) {
$routeProvider
.when('/customers', {
templateUrl: "customers.html",
controller: "CustomerController"
})
});
Customer Module
var CustomerModule = angular.module("CustomerModule", []);
Customer Controller
CustomerModule.controller("CustomerController", function ($scope) {
$scope.Test = "Hey";
$scope.CustomerArray = [
{ "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman" },
{ "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
]
});
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>
<div ng-app="MainModule">
<div id="TopDiv">Main Module</div>
<input type="button" value="Load Customers" />
<div ng-view></div>
</div>
</body>
</html>
customers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
</head>
<body>
<div ng-app="CustomerModule" ng-controller="CustomerController">
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
</ul>
</div>
</body>
</html>
Long bits of code there, but hopefully simple code. The output when I press the "Load Customer" button is literally {{Test}} with no array data to follow.
I am just now learning angular, so any help with this issue I would appreciate. I am just doing this for fun, to try to learn. So I suppose the issue is not pressing. :) Thanks!
I wrote out a working example using the code from the question as a base. There are quite a few adjustments that were made, so I will list each piece with a bit of explanation.
It is not necessary for each "page" to have it's own module. However, it is not a bad practice. To support the design you have here of one module for each view, I made the following changes:
Include the CustomerModule as a dependency in the MainModule (MainModule.js):
var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);
Load ALL scripts in the index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
With these changes, the $routeProvider is able to locate the CustomerController and instantiate it during a route change. The customers.html now does not have to create a controller, and can be stripped down to a complete partial. Also, the expression used in customers.html needed to be changed, and broken down into individual expressions for each property.
The final customers.html:
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li>
</ul>
Complete working sample on plnkr.co: http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview
I'm not sure, but the problem is in your MainModule. It should be like this or so:
var app = angular.module("MainModule", ["ngRoute"]);
When you calling angular.module with only one parameter - it's only trying get module, not create.
And customers.html should only contains parts of you html, not full:
Full customers.html
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li>
</ul>
And add move customer js files to index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
Hope, it helps.
I've searched and read all possible explanations, but none have helped so far.
The problem is that the data binding with the curly brackets doesn't work (it only works if I define the module and controller in the index.html).
index.html :
<html lang="en" data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
<script src="controllers/listcontroller.js"></script>
<script src="js/app.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<div class="main">
<body data-ng-controller="ListController">
<ul>
<li data-ng-repeat="test in tests">
<span>{{ test.name }}</span>
<p>{{ test.type }}</p>
</li>
</ul>
There are currently {{test.length}} tests available.
You have currently selected 0 tests.
<button class="animatedbutton"> Proceed </button>
</div>
</body>
</html>
app.js (in folder js):
(function () {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();
listcontroller.js (in folder controllers):
(function () {
'use strict';
var app = angular.module('myApp.controller');
app.controller('ListController', ['$scope', function ($scope) {
$scope.tests = [
{'name': 'A',
'type': '1'},
{'name': 'B',
'type': '2'},];
}]);
})();
The view shows me something like this:
{{ test.name }}
{{ test.type }}
There are currently {{test.length}} tests available.
You have currently selected 0 tests.
I've followed a couple of tutorials, such as the Angular in 60 Minutes, AngularJS.org, and some on YT, but I always encounter the same problem. Any ideas?
there are several issues look at the plunker:
https://plnkr.co/edit/bnYAsGk273kO5znMnAJh
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="listcontroller.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ListController">
<div class="main">
<ul>
<li ng-repeat="test in tests">
<span>{{ test.name }}</span>
<p>{{ test.type }}</p>
</li>
</ul>
There are currently {{test.length}} tests available. You have currently selected 0 tests.
<button class="animatedbutton"> Proceed </button>
</div>
</body>
</html>
app.js
(function() {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();
listcontroller.js
(function() {
var ctr = angular.module('myApp.controller', []);
ctr.controller('ListController', ['$scope',
function($scope) {
$scope.tests = [{'name': 'A','type': '1'}, {'name': 'B','type': '2' }];
}
]);
})();
You created a second module so you need to have the [] again:
var app = angular.module('myApp.controller', []);
Can you also include the console to see if there are any errors?
I just began to learn AngularJS by following this youtube video. First part is okay except when it comes to the controller part.
My code is as below (it's the same as in the video)
<html data-ng-app="">
<head>
<script src="angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Kamal',
city: 'York'
}, {
name: 'Sunil',
city: 'DC'
}, {
name: 'Malith',
city: 'Gotham'
}];
}
</script>
</head>
<body>
<div data-ng-controller="SimpleController">Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
when I add data-ng-controller="SimpleController" it will not working and give the following error in the console.
Then when I try to post the question in the SO , I tried it in JSfiddle. I added Angular.js and selected onLoad and not working. But when I selected no wrap - in <head> it works fine.
But I can't do that in my local machine so the problem remains as it is.
Can anybody point me to the correct path ?
You need to initialize app:
var app = angular.module("myApp", []);
<div ng-app="myApp" ng-controller="SimpleController">
<!-- ^^^^^ -->
Demo: http://jsfiddle.net/xy23ybzp/2/
Docs: https://docs.angularjs.org/guide/bootstrap
Check Manual Initialization Section in Docs
After getting help from the answers listed here for this question. I got it working. Below is the working code.
<html >
<head>
<script src = "angular.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("SimpleController",function($scope){
$scope.customers = [
{name :'Kamal',city : 'York'},
{name : 'Sunil',city:'DC'},
{name : 'Malith',city:'Gotham'}
];
});
</script>
</head>
<body >
<div ng-app="myApp" data-ng-controller="SimpleController">
Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>