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>
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>
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>
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 have created here a working demoapp in which I have used the restangular
It is working perfectly fine but when I tired to implement the demoapp with the factory the data doesnt seem to come and I cant check out the possible bug in this
/* the file containing my json object*/
[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
},
{"id":4,
"subject":"#harish"
}
]
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.harish"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("\js");
app.controller('IndexCtrl', function( testFactory) {
var self=this;
testFactory.getFriendList.then(function (homeFriends) {
self.people=homeFriends;
console.log(self.people);
});
});
app.factory('testFactory', ['Restangular', function (Restangular) {
return {
getFriendList: Restangular.all('emp.json').getList()
}
}]);
</script>
</body>
</html>
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.harish"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("\js");
});
app.controller('IndexCtrl', function( Restangular, testFactory) {
var self=this;
Restangular.all('evm.json').getList().then(function(result) {
self.people = result;
});
testFactory.getFriendList.then(function (homeFriends) {
console.log(self.people);
self.people=homeFriends;
});
});
app.factory('testFactory', ['Restangular', function (Restangular) {
return {
getFriendList: Restangular.all('emp.json').getList()
}
}]);
</script>
Their is some syntax issue and I have corrected and now your App will run
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>