I can't able to find out the issue for the following code. I never written controller in html file. I did this for a testing purpose.
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>
<body ng-controller="sampleController">
<div>
<h2>Adding a sample controller</h2>
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function sampleController($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
</script>
</body>
</html>
Thanks in advance.
You should create an application and define your controller through that app:
<html ng-app="sampleApp">
...
<script type="text/javascript">
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller("sampleController", function($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
});
</script>
...
The support for global controls is removed from angular 1.3, if you are using version till 1.2, it should work, see this working Fiddle
var myApp = angular.module('myApp',[]);
function sampleController($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
If you are using angular 1.3, global controller should not work, see this fiddle with angular 1.3
Use following code if you need to use angular version 1.3:
var myApp = angular.module('myApp',[]);
myApp.controller('sampleController',function($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
})
See this Fiddle
It's better to declare the app and controller declaratively.
The next code works:
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>
<body ng-controller="SampleController">
<div>
<h2>Adding a sample controller</h2>
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app= angular.module('MyApp',[]);
app.controller('SampleController', function ($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
);
</script>
</body>
</html>
Both the answers posted can be used.
In both usages, the recommended approach is to inject $scope and use that (rather than using this, which you can do in the second approach as well).
The difference between approach one and two is in how to support minification. In the former, you can supply an array of injected arguments, whereas in the latter you modify $inject. This is of course a bit technical but it is highly recommended to support minification. See A note on minification in the documentation.
The former also does not name the function in the global scope, which is generally a good thing!
Related
index.html
test.json
I want to be able to dynamically filter by the user clicking the button repersenting who's specific phone number they would like to see instead of using "filter: {Name: 'Bob'}" only showing Bobs info but I have not been able to find a way to use a variable in place of 'Bob'. I have provided the code in images.
Plunker was right in how I use a variable in my filter, I just did what Shb said in the comments as well so my buttons were out of scope and I just adjusted the tags ng-app and ng-controller to the body and Punkers solution to the filter works. Thanks guys something I should have easily seen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Try following code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Plunker
I am looking at this tutorial. And I have such code:
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>SPA book_store</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://localhost:8080/book_store/rest/books_json/get")
.then(function(response) {
$scope.books = response.data;
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<input id="filter_input" type="text" ng-model="nameText"/>
<ul>
<li ng-repeat="book in books | filter:nameText | orderBy:'name'">
{{book.name}} - {{book.price}}
</li>
</ul>
</div>
</body>
</html>
http://localhost:8080/book_store/rest/books_json/get is returning following json:
[
{
"book_id":1,
"name":"Book1",
"bought":false,
"genre":"MR",
"price":20,
"users":[
],
"author":{
"author_id":1,
"name":"Gogol",
"books":[
]
}
},
//...
]
But I see in a browser networking that request wasn't fire. What have I done wrong?
Remove the ng-app="" from the html tag or provide the module name ng-app="MyApp".
Also remove one of the ng-app directives either from the the body tag or the html tag.
It is good practice to user the ng-app directive on the HTML tag if you are using just one angular app.
I am expecting the below code to print the numbers.I tried but I am not sure what I am missing here. I am new to AngularJs
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Welcome</title>
</head>
<body>
<div ng-controller="MyController">
<ul>
<li ng-repeat="number in Numbers">{{ number }}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
function MyController($scope) {
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
}
</script>
</body>
</html>
this completely should work. check console (F12, developer tools) to see if you have any error message, especially if your angular.min.js is included correctly.
The following little js fiddle show you the little piece of code does work, as long as your angular js is included correctly.
function MyController($scope) {
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
}
http://jsfiddle.net/dshun/o1yg3kvp/
Edited
From Angular 1.2 onwards, you can't declare your controller globally the way you are doing right now . You have to declare it with the module.
var app = angular.module('myApp',[]);
app.controller('MyController',function($scope){
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
})
See the working changes: http://plnkr.co/edit/Rp87qEQ5albeCQPYVh48?p=preview
If you insist on doing the way you are doing right now, you can actually allow globals in your config. Try to run the snippets below.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs_1_3_15#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MyController">
<ul>
<li ng-repeat="number in Numbers">{{ number }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
function MyController($scope) {
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
}
angular.module('myApp').config(['$controllerProvider',
function($controllerProvider) {
$controllerProvider.allowGlobals();
}
]);
</script>
</body>
</html>
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
Trying to follow a tutorial, I can't get the "Hello, world" example working. Instead it displays: "{{greeting.text}}, world". Using Chrome and AngularJS 1.3.1.
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />-->
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
app.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
My folder structure
root/
angular.js
app.js
index.html
Thank you
I hope this helps.
index.html
<!DOCTYPE html>
<html ng-app="appname">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="appCtrl">
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
script.js
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview
Answering the question of what is wrong and if they changed something.
AngularJs Version 1.2 or older: The controller could be a function not defined into a module. Like in the question.
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Angular Version 1.3 or newer: The controller must be defined into a module. Like in the answer.
Controller
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
Enter text:
<br />
<input type="text" ng-model="hellomodel" />
<br />
<br />
<h1>
{{hellomodel}}</h1>
<script language="javascript">
var myapp = angular.module("myApp", []);
myapp.controller("myCntrl", function ($scope) {
$scope.hellomodel = "Hello World!";
});
</script>
</div>
</body>
</html>
http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx
The accepted answer is good but I thought I'd chip in with some resources I've found helpful if you're looking for a better understanding of how things work in Angular
Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
Shaping up with Angular www.codeschool.com/courses/shaping-up-with-angular-js
Both are completely free courses and because the egghead.io playlist is split into videos for separate concepts it's also really good reference material.
The angular.js developer guide is also really helpful!