I am new and started practicing Angular JS.
My output should give Hello but it is showing {{message}}
Below is HTML code:
<!DOCTYPE html>
<html ng-app="HelloWorldApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="hello_world_controller.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<p>{{message}}</p>
</div>
</div>
</body>
</html>
Below is Angular js code:
angular.module('HelloWorldApp', [])
.controller("HelloWorldController", ["$scope", function ($scope){
$scope.message = "Hello";
}]);
I do not see any error with your code, Check your angular version
DEMO
angular.module('HelloWorldApp', []) .controller("HelloWorldController", ["$scope", function ($scope) { $scope.message = "Hello"; }]);
<!DOCTYPE html>
<html ng-app="HelloWorldApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="hello_world_controller.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<p>{{message}}</p>
</div>
</div>
Related
I am fetching data from a REST API in AngularJS. The REST API returns the results after sometime by the time, the index.html is already loaded. It no longer displays the REST API results.
Here is my code:
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The content is {{greeting}}</p>
</div>
</body>
</html>
angular.module('demo', [])
.controller('Hello', function($scope, $http) {
$http.get('https://example.com/api/v1/search/searchByDesc?searchType=space_name&searchValue=MLX800').
then(function(response) {
$scope.greeting = response.data;
});
});
In the debugger, I can see the REST API returning results.
How do I display the results on the browser?
Thanks
R
your api endpoint isn't working.
angular.module('demo', [])
.controller('Hello', function($scope, $http) {
$http.get('https://jsonplaceholder.typicode.com/todos/1').then(function(response) {
$scope.greeting = response.data;
console.log(response.data)
});
})
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The content is {{greeting}}</p>
</div>
</body>
</html>
I just see a blank input box, when I should see the $scope.firstname value. Why does not this work?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp" ng-controller="MyController">
<head>
<meta charset="UTF-8">
<title>Toto App</title>
<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.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="myCtrl.js"></script>
</head>
<body>
<input ng-model="firstname">
</body>
</html>
myCtrl.js:
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.name = "John";
});
You're doing $scope.name = "John" instead of $scope.firstname = "John"
I want to load the script template for specific div tag.
In my Demo I have 3 'show' link. If I click any one of the show link it loads script for all 'show' link. But I want to load only the script for that 'show' link which I have clicked.
See the PLUNKER.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
$scope.templateURL = 'my-tmpl';
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective" data-ng-init="names=['1','2','3']">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl">
<p>Hello</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d">
<div ng-include=templateURL></div>
</div>
</div>
</div>
</body>
</html>
If you need to show same things means need to use same template then
use the following code.
Here I have defined a new scope variable.
Look at the updated plunker
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.a = 0; //Here
$scope.showdiv = function(x){
$scope.templateURL = 'my-tmpl';
$scope.a = x; //and Here
};
}]);
})(window.angular);
show <!-- pass x to remember -->
<div id="d" ng-show="a==x"> <!--and check that new variable set as x or not -->
<div ng-include="templateURL"></div>
</div>
If you need to use different template for different link
Then you could use the following code. Here is the plunker.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.names=[{name:'1', template:'tmpl-1', show:false},
{name:'2', template:'tmpl-2', show:false},
{name:'3', template:'tmpl-3', show:false}]
$scope.show = '0';
$scope.showdiv = function(x){
$scope.show = x.name;
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="tmpl-1">
<p>Template 1</p>
</script>
<script type="text/ng-template" id="tmpl-2">
<p>Template 2</p>
</script>
<script type="text/ng-template" id="tmpl-3">
<p>Template 3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="show == x.name">
<div ng-include="x.template"></div>
</div>
</div>
</div>
</body>
</html>
Have a look at below code.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile',
function($scope, $compile) {
$scope.names = [{
'name': '1',
'tmpl': 'my-tmpl1'
}, {
'name': '2',
'tmpl': 'my-tmpl2'
}, {
'name': '3',
'tmpl': 'my-tmpl3'
}];
$scope.showdiv = function(tmpl) {
$scope.templateURL = tmpl;
};
}
]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl1">
<p>Hello1</p>
</script>
<script type="text/ng-template" id="my-tmpl2">
<p>Hello2</p>
</script>
<script type="text/ng-template" id="my-tmpl3">
<p>Hello3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="x.isOpen">
<div ng-include="x.tmpl"></div>
</div>
</div>
</div>
</body>
</html>
demo
I'm new to angularjs and was wondering what's wrong with my code. I am following a tutorial but I got stuck because of this error.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<link rel="stylesheet" href="foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with foundation component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4
/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope){
$scope.data = {message: "hello"};
}
You have to create a module, like this:
var app = angular.module("MyApp",[]);
app.controller("FirstCtrl",function($scope){
$scope.data = {message: "hello"};
});
<div ng-app="MyApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with foundation component
</div>
</div>
</div>
I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<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.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source