I'm learning angular js, I'm trying some examples and I'm getting unused warning from netbeans. When I run the file in browser it doesn't show anything but from the tutorial I'm watching it works, it doesn't work on my side. here is the code.
<html ng-app>
...
<div ng-controller="test">
<ul>
<li ng-repeat="cust in customers">{{ cust.name }}</li>
</ul>
</div>
<script src="js/angular.min.js" type="text/javascript"></script>
<script>
function test($scope){
$scope.customers = [
{name: 'Dave Jones', city: 'Phoenix'},
{name: 'Jamie Riley', city: 'Atlanta'},
{name: 'Heedy Wahlin', city: 'Chandler'},
{name: 'Thomas Winter', city: 'Seattle'}
];
}
</script>
example on jsfiddle
console errors.
Add no wrap in body in js fiddle
Like this
try to use angular in proper way
like this
view
<html ng-app="app">
<body>
<div ng-controller="myCtrl">
<!-- do something -->
</div>
<script src="your angular library file path"></script>
<script src="app.js path"></script>
</body>
app.js
var app=angular.module("app",[]);
app.controller("myCtrl",["$scope",function($scope){
// put your code
}]);
The same error also arise due to duplicate keys. There you can use track by $index
<ul>
<li ng-repeat="cust in customers track by $index">{{ cust}}</li>
</ul>
Related
I'm trying to go through an AngularJS tutorial on codeschool.com but as I work through it and refresh my browser to see my progress, at some point in the tutorial the browser always ends up loading a blank webpage and won't load the code anymore. I've attempted the tutorial from the start twice and it happened both times at different points.
I must keep doing something wrong in my code. Has anyone else had this issue or know how to fix it?
I've seen a couple similar questions on here but the answers haven't worked.
Here's the HTML:
<!DOCTYPE html>
<html ng-app='store'>
<head>
<html lang="en-US">
<link rel="stylesheet/css" type="text/css" href="bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<h1> {{store.product.name}} </h1>
<h2> {{store.product.price}} </h2>
<p> {{store.product.description}} </p>
<button>Add to Cart</button>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
And here's the JS file:
(function (){
const app = angular.module('store', [ ]);
app.controller("StoreController", function(){
this.product = gems;
});
const gems = [
{
name: "Dodecahedron",
price: 2.95,
description: 'Many sided gem. Would look great in a ring.',
},
{
name: "Pentagonal Gem",
price: 5.95,
description: 'A gem shaped like a pentagon. More expensive and
more shiny',
}
];
})();
Two things: you have a mismatched variable name between your controller and your view and then inside your ng-repeat you are including your controller alias instead of accessing each of the repeated elements directly.
First change this.product = gems; in your controller to this.products = gems; and then change your ng-repeat div to this:
<div ng-repeat="product in store.products">
<h1> {{product.name}} </h1>
<h2> {{product.price}} </h2>
<p> {{product.description}} </p>
<button>Add to Cart</button>
</div>
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 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 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=.
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>