For the below given code I'm not getting output
<div ng-app="myApp" ng-controller="mCtr">
<p>{{content}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('mCtr',function($scope,$http)
{
$http.get("welcome.html").then(function(response)
{
$scope.content = response.data;
});
});
</script>
I am getting output like this
<!DOCTYPE html>
<html>
<head>
<title>AJS Services HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<p>Welcome to world of AJS</p>
<h1>AJS means Angular JS</h1>
</body>
</html>
Related
Attempting to learn angularjs because I need to modify some stuff at work and that is what they are using and I can't upgrade to Angular2+ at the moment. I have the following code where I'm trying to use the $http.get method but getting $http not defined error in the console.
// js code
var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope){
var onUserComplete = function(response){
$scope.user = response.data;
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete);
$scope.message = "Hello, AngularJS";
});
// HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="HelloWorldCtrl">
<h1>{{message}}</h1>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
</body>
</html>
You need to pass $http as a dependency to your controller,
app.controller('HelloWorldCtrl', function($scope,$http){
});
DEMO
var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope,$http){
var onUserComplete = function(response){
$scope.user = response.data;
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete);
$scope.message = "Hello, AngularJS";
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="HelloWorldCtrl">
<h1>{{message}}</h1>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
</body>
</html>
Html code:
<div class="container" ng-controller="aditya"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controllers/controller.js"><script>
And calling it in controller.js file
function aditya() {
console.log("Hello World from controller")}
I think your controller name does not match with controller you have assigned in js
angular.module('aditya', function (){
function your_function_name() {
console.log('Hello world from controller')
}
});
Causes for this error can be:
Your reference to the controller has a typo. For example, in the
ngController directive attribute, in a component definition's
controller property, or in the call to $controller().
You have not
registered the controller (neither via Module.controller nor
$controllerProvider.register().
You have a typo in the registered
controller name.
<html>
<head>
<title>Angular JS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="aditya">
</div>
</body>
</html>
controller.js
var mainApp = angular.module("mainApp", []);
mainApp.controller('aditya', function($scope) {
console.log("Hello World from controller");
});
Update
<html>
<head>
<title>Angular JS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('aditya', function($scope) {
$scope.test = "Controller Testing";
console.log("Hello World from controller");
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="aditya">
{{test}}
</div>
</body>
</html>
Hi I am just learning the AngularJS, and trying to save cookies values
I have two html file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="helloCtrl">
Hello <input type="text" ng-model="helloText"/>
<input type="button" ng-click = "redirectToTest()" value="Go" />
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="testCtrl">
Hello {{cookiesText}}
</body>
</html>
test.js
var myApp = angular.module('myApp', ['ngCookies']);
var helloCtrl = myApp.controller('helloCtrl',
function ($scope, $cookies, $window) {
$scope.helloText = "Hello World!"
$scope.redirectToTest = function(){
$cookies.put('hello', $scope.helloText);
console.log("Added hello to cookies : "+ $cookies.get('hello'));
$window.location.href = "test.html";
}
});
var testCtrl = myApp.controller('testCtrl',
function ($scope,$cookies) {
$scope.cookiesText = '';
$scope.init= function(){
$scope.cookiesText = $cookies.get('hello');
}
});
I am adding some text into cookies and redirecting to test.html to display cookies value, but it lost somewhere ?
Is there $window.location.href reset cookies value ?
I am new to Angularjs so i made one example to call a controller but i am not able to call controller ...
this is my sample code
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
</head>
<body ng-app="">
<div data-ng-controller="mycontroller">
</div>
<script>
function mycontroller($scope, $http) {
alert("alert");
}
</script>
</body>
try this
<body ng-app="learning">
<div data-ng-controller="mycontroller">
</div>
<script>
angular.module("learning", [])
.controller("mycontroller", function($scope, $http) {
alert("alert");
});
</script>
</body>
You can try this, but I recommend you to read angular tutorials to understand how controllers and binds works.
http://www.w3schools.com/angular/
https://docs.angularjs.org/tutorial
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="mycontroller" ng-init="initMethod()">
<!--<input type="text" ng-model="test"></p>
<div>{{test}}</div>-->
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
alert("alert")
$scope.initMethod = function(){
alert("alert from init");
}
});
</script>
</body>
</html>
I am following a tutorial but stuck on one issue. I don't know what I am missing here.
//script.js
var MainController = function($scope)
{
$scope.message = "Hello!!!!";
};
<!-- index.html -->
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Problem is -
The message is not binding.
Create your module first, then add the controller to the module, specify both the app and controller in your HTML portion.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
var MainController1 = function($scope)
{
$scope.message = "Hello!!!!";
};
app.controller("MainController1", MainController1);
</script>
</head>
<body ng-controller="MainController1">
<h1>{{message}}</h1>
</body>
</html>