Using Random User generator to create profiles with angular.js - javascript

I'm trying to get this done using the RUG (Random User Generator) API but I can't get this to work. I should be calling the http request after a click event but it doesn't seems to work. Here is what I've done (and sorry for my amateur code):
index.html
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div>
{{"Hello world"}}
<div ng-controller="firstController">
{{ store.email}}
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('people', []);
app.controller('firsController', ["http",function (http) {
var store = this;
store.products = [];
$http.get('http://api.randomuser.me').success(function(data){
store.products = data.results[0].user;
})
}]);
OR
var boton = document.getElementById('clk');
boton.addEventListener('click', function () {
$.ajax({
url: 'http://api.randomuser.me/',
dataType: 'json',
success: function(data){
console.log(data.results[0].user);
}
});
});
Neither of this can work. Could I get this to work, to click a button and loading a new user from the api and use it with angular?

This is the correct way to use $http service and scope variables.
<html ng-app="people">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('people', []);
app.controller('firstController', ["$scope", "$http", function ($scope, $http) {
$scope.store = {};
$scope.store.products = [];
$http.get('http://api.randomuser.me').success(function(data){
$scope.user = data.results[0].user;
})
}]);
</script>
</head>
<body>
<div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div>
<div ng-controller="firstController">
{{ user.email}}
</div>
</body>
</html>

Related

Why parseInt on a variable using expression does not display $scope variable?

Here is my code,
WORKING CODE
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!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>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{value}}</h1>
</div>
</body>
</html>
NOT WORKING CODE:
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!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>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>
Normally using parseInt on an expression should work, what is the issue here?
You have to parse the value in the controller since angular is not able to parseInt into an Angular expression:
In the other hand if you really want to make this in the DOM one of the best options is to use an angular filter like:
var app = angular.module("app", []);
app.filter('parseInt', function() {
return function(value) {
return parseInt(value);
};
});
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!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>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1>{{(value | parseInt) + 44}}</h1>
</div>
</body>
</html>
As per the doc
https://docs.angularjs.org/guide/expression
Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.
For the question about why it does not display check this
https://docs.angularjs.org/guide/interpolation
if the interpolated value is not a String, it is computed as follows:
undefined and null are converted to ''
Since ParseInt in not available inside interpolation, it is undefined and so is the displayed value.
you will have to create your own function in the controller $scope.
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",function($scope) {
$scope.value = '20';
$scope.parseInt = function(value)
{
return parseInt(value);
}
}
]);
<!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>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>

Bind dynamic loaded content to Angular

I want to bind some dynamic content, loaded by jQuery, to Angular but i couldn't get it work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript">
var module = angular.module('ctrl', []);
module.directive('helpMe', function() {
return {
restrict: 'E',
template: '<div><button ng-click="clicker()">Click 1</button><button ng-click="create()">Create</button><div ng-hide="true">FooBar</div></div>',
controller: ['$scope', function($scope) {
$scope.clicker = function () {
console.log('Clicked...');
};
$scope.create = function () {
$('#foo').contents().clone().appendTo('#bar');
}
}]
}
});
</script>
</head>
<body ng-app="ctrl">
<div id="foo">
<help-me></help-me>
</div>
<div id="bar">
</div>
</body>
If i click the "Click 1" button, the console logs it. If i click the "create" button, a new set of buttons appears. But the new buttons don't work. I could not find out how to get this work. Any ideas?
You need to call $compile on the HTML string before inserting it into the DOM so that angular gets a chance to perform the binding.
$scope.create = function() {
var clone = $('#foo').contents().clone();
$compile(clone)($scope);
$('#bar').append(clone);
}
check this plnkr
Try this it will work:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript">
var module = angular.module('ctrl', []);
module.directive('helpMe', function() {
return {
restrict: 'E',
template: '<div><button ng-click="clicker()">Click 1</button><button ng-click="create()">Create</button><div ng-hide="true">FooBar</div></div>',
controller: ['$scope','$compile' function($scope,$compile) {
$scope.clicker = function () {
console.log('Clicked...');
};
$scope.create = function () {
$('#foo').contents().clone().appendTo('#bar');
$compile($('#bar'))($scope);
}
}]
}
});
</script>
</head>
<body ng-app="ctrl">
<div id="foo">
<help-me></help-me>
</div>
<div id="bar">
</div>
</body>

AngularJS tutorial not binding data

I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller

AngularJS UI router redirect

I am trying to redirect to another page using angular redirect. But I am getting a couldn't resolve from state error. I followed the How to pass parameter when I redirect the page in angularjs using ui router? link.
Please find below my route.js code:
var helloWorldApp = angular.module('helloWorldApp', ['ui.router']);
helloWorldApp.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'first.html'
})
.state('second', {
url: '/second',
templateUrl: 'second.html'
});
});
My first.html code
<html lang="en" ng-app="helloWorldApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script type="text/javascript" src="./app/routes.js"></script>
</head>
<script type="text/javascript">
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('firstCtrl',function($scope,$state){
$scope.userInput='Hello world from first page';
$scope.getNewPage=function() {
$state.go("second", { id: $scope.userInput });
}
});
</script>
<body>
<div ng-controller="firstCtrl">
<h4>{{userInput}}</h4>
<button ng-click="getNewPage()">New Page</button>
</div>
</body>
</html>
My second.html code
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script type="text/javascript" src="./app/routes.js"></script>
</head>
<script type="text/javascript">
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('secondCtrl' , function($scope, $state){
$scope.id = $stateParams.id;
});
</script>
<body>
<div ng-controller="secondCtrl">
<h4>{{id}}</h4>
<button ng-click="getNewPage()">New Page</button>
</div>
</body>
</html>
I am using springboot and my project structure snapshot is attached here:
I am able to access both first.html and second.html pages on my browser. But when I click on the New Page button on first.html, I get the
Error: Could not resolve 'second' from state ''
at Object.t.transitionTo (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js:7:8834)
at Object.t.go (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js:7:8182)
at Scope.$scope.getNewPage (http://localhost:8080/first.html:18:16)
at fn (eval at (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:13322:15), :4:221)
at callback (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:23549:17)
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:15989:28)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:16089:25)
at HTMLButtonElement. (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:23554:23)
at HTMLButtonElement.eventHandler (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:3298:21)
Please help. Thanks in advance.
In your second html code you inject $state wrongly instead of $stateParams. So that your code didn't work
Inject with $stateParams
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('secondCtrl' , function($scope, $stateParams){
$scope.id = $stateParams.id;
});
or use $state.params.id
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('secondCtrl' , function($scope, $state){
$scope.id = $state.params.id;
});

Why isn't my Angular.js GET request working?

My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>

Categories