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>
Related
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>
I need to present the below JSON in the front end (Angular 1).
{
"test.employee.name" : "Royal"
}
Want to present both the key and the value in the front end. The json data will be stored in a .json file.
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
var vm = this;
vm.events = {
"test.employee.name" : "Royal"
};
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl as home">
<div ng-repeat="(key,value) in home.events ">
"key is:" {{key }} "value is:" {{value}}</div>
</div>
</body>
</html>
Say I've got AdamController as adam and AnujController as anuj. I want anuj.anujProp to have a j appended to it every time adam.adamProp changes.
How could this be done? What is the best way?
Here are 4 possible ways that I came up with. I ranked them in the order that I personally feel is best.
Events - http://plnkr.co/edit/4AD8e47DaOSuutrphIkN?p=preview
Method on a Factory - http://plnkr.co/edit/Vixab8LjDtow5YYfnlMV?p=preview
Factory + $watch - http://plnkr.co/edit/1zVZ9EDarCGPOMZvrJMd?p=preview
$scope inheritance - http://plnkr.co/edit/3b7tzPI5Y4CcwWYXUk25?p=preview
The $scope inheritance approach just feels "messy". I like the event driven approach over the factory approaches because I feel like there's a sort of overhead associated with the factories, and if it's only going to be used for this one purpose, the overhead isn't worth it. Plus, this just seems to be exactly what events are for. I put (2) ahead of (3) because the $watch hurts performance.
Events
angular
.module('app', [])
.controller('AdamController', AdamController)
.controller('AnujController', AnujController)
;
function AdamController($rootScope) {
var vm = this;
vm.prop = 'adam';
vm.update = function() {
$rootScope.$broadcast('propChange');
};
}
function AnujController($scope) {
var vm = this;
vm.prop = '';
$scope.$on('propChange', function(event) {
event.currentScope.anuj.prop += 'x';
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='AdamController as adam'>
<input ng-model='adam.prop' ng-change='adam.update()'>
</div>
<div ng-controller='AnujController as anuj'>
<p>{{ anuj.prop }}</p>
</div>
</body>
</html>
Method on a Factory
angular
.module('app', [])
.factory('Factory', Factory)
.controller('AdamController', AdamController)
.controller('AnujController', AnujController)
;
function Factory() {
return {
anujProp: 'anuj',
update: function() {
this.anujProp += 'j';
}
};
}
function AdamController(Factory) {
var vm = this;
vm.factory = Factory;
}
function AnujController(Factory) {
var vm = this;
vm.factory = Factory;
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='AdamController as adam'>
<input ng-model='initial' ng-change='adam.factory.update()'>
</div>
<div ng-controller='AnujController as anuj'>
<p>{{ anuj.factory.anujProp }}</p>
</div>
</body>
</html>
Factory + $watch
angular
.module('app', [])
.factory('Factory', Factory)
.controller('AdamController', AdamController)
.controller('AnujController', AnujController)
;
function Factory() {
return {
shared: 'shared',
related: 'related'
};
}
function AdamController(Factory) {
var vm = this;
vm.factory = Factory;
}
function AnujController(Factory, $scope) {
var vm = this;
vm.factory = Factory;
$scope.$watch('anuj.factory.related', function(newValue, oldValue, scope) {
scope.anuj.factory.related = newValue.toUpperCase();
});
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='AdamController as adam'>
<input ng-model='adam.factory.shared'>
<input ng-model='adam.factory.related'>
</div>
<div ng-controller='AnujController as anuj'>
<p>{{ anuj.factory.shared }}</p>
<p>{{ anuj.factory.related }}</p>
</div>
</body>
</html>
$scope inheritance
angular
.module('app', [])
.controller('AdamController', AdamController)
.controller('AnujController', AnujController)
;
function AdamController($scope) {
var vm = this;
vm.adamProp = 'adam';
vm.update = function() {
var anuj = $scope.$parent.$$childTail.anuj;
anuj.anujProp += 'j';
};
}
function AnujController() {
var vm = this;
vm.anujProp = 'anuj';
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AdamController as adam">
<input ng-model="adam.adamProp" ng-change="adam.update()" />
</div>
<div ng-controller="AnujController as anuj">
<p>{{ anuj.anujProp }}</p>
</div>
</body>
</html>
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>