I am new in angular JS. And this is the first time I wrote a bit of code using Angular JS by watching a tutorial. But in that video tutorial the code works properly, but my code is not working. My web page is showing a blank page.
The index.html
<!DOCTYPE html>
<html ng-app xmlns="">
<head>
<title>MTG Browser</title>
<link href="index.css" rel="stylesheet" />
<script src="angular.min.js"></script>
<script src="CardsController.js"></script>
</head>
<body ng-controller="cardsListController">
<div id="cardsList">
<div ng-repeat="card in cards" class="cardItem">
Card {{card.id}}
</div>
</div>
</body>
</html>
And the CardsController.js
var cardsListController = function ($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
};
Please someone explain why the code is not working?
I am new in angular JS. And this is the first time I wrote a bit of code using Angular JS by watching a tutorial. But in that video tutorial the code works properly, but my code is not working. My web page is showing a blank page.
The index.html
<!DOCTYPE html>
<html ng-app xmlns="http://www.w3/1999/xhtml">
<head>
<title>MTG Browser</title>
<link href="index.css" rel="stylesheet" />
<script src="angular.min.js"></script>
<script src="CardsController.js"></script>
</head>
<body ng-controller="cardsListController">
<div id="cardsList">
<div ng-repeat="card in cards" class="cardItem">
Card {{card.id}}
</div>
</div>
</body>
</html>
And the CardsController.js
var cardsListController = function ($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
};
Please someone explain why the code is not working?
Share Improve this question asked Jun 29, 2015 at 12:30 Noushadur Rahman ShoukhinNoushadur Rahman Shoukhin 931 gold badge1 silver badge10 bronze badges 3- 1 Open the browser's error console. What errors do you see there? – JJJ Commented Jun 29, 2015 at 12:34
- 1 Could you provide a fiddle reproducing your issue? On jsfiddle or plnkr.co for example. – sp00m Commented Jun 29, 2015 at 12:37
- 3 Running the code. jsfiddle/jackk88888/7eBWP/3 – ooozguuur Commented Jun 29, 2015 at 12:45
4 Answers
Reset to default 2Html
<html ng-app="myApp">
<head>
<title>MTG Browser</title>
<link href="index.css" rel="stylesheet" />
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="cardsListController">
<div id="cardsList">
<div ng-repeat="card in cards" class="cardItem">
Card {{card.id}}
</div>
</div>
</body>
</html>
and .js
angular.module('myApp', []);
var cardsListController = function ($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
};
I have modified your code and its working.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis./ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="CardsController.js"></script>
<body>
<div ng-app="myApp" ng-controller="cardsListController" id="cardsList">
<div ng-repeat="card in cards" class="cardItem">
Card {{card.id}}
</div>
</div>
CardsController.js
var app = angular.module('myApp', []);
app.controller('cardsListController', function($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
});
you need to assign a name to your ng-app as it's empty and this is deprecated in newer versions example ng-app="nameofyourapp"
Firstly please provide a JSFiddle, The problem maybe within the html tag, you don't really need the xmlns within the tag but if you must define it as:
<html ng-app xmlns:ng="http://www.w3/1999/xhtml">
Also it's good practice to provide an identity for a angularjs app, for example:
<html ng-app="myapp" xmlns:ng="http://angularjs">
Also it's good practice to put JS files at the base of the
<script src="angular.min.js"></script>
<script src="CardsController.js"></script>
</body>
Within your JS you must define "myApp":
var app = angular.module('myApp', []);
Open the error window within your browser, to clearly identify the error.
Possibly the error is that angular is getting called before your JS file, you should try this:
<script src="CardsController.js"></script>
<script src="angular.min.js"></script>
</body>
Good Luck.