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

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>

Related

console.log not printing anything in Chrome

Can anyone please explain why console.log suddenly stopped to work? I'm trying to debug an exercise for an Angularjs class and at a certain point, console.log was not printing anything anymore.
I'using chrome and my cache is clear.
EDIT:
In this snippet and in Firefox console.log() works but in Chrome does not. How come?
(function () {
'use strict';
angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);
Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
var nrdown = this;
var promise = MenuCategoriesService.getMatchedMenuItems();
}
MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
var service = this;
console.log("start");
service.getMatchedMenuItems = function(searchTerm){
return $http({
method : 'GET',
url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
}).then(function(result){
var foundname = [];
angular.forEach(result.data.menu_items, function(value, key){
var name = value.name;
//console.log(typeof name);
if (name.toLowerCase().indexOf("chicken") !== -1){
foundname.push(name);
};
});
console.log("end");
return foundname;
});
}
}
})();
<!doctype html>
<html lang="en" ng-app='Ass3'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
<script type="text/javascript" src="app.js"></script>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="container" ng-controller="NarrowItDownController as nrdown">
<h1>Narrow Down</h1>
<div class="form-group">
<input type="text" placeholder="search term" class="form-control">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary">Narrow It Down For Me!</button>
</div>
<!-- found-items should be implemented as a component -->
<found-items found-items="...." on-remove="...."></found-items>
<ul>
<li ng-repeat="category in nrdown.categories">
{{categroy.name}}
</li>
</ul>
</div>
</body>
</html>
You have log placed after return statement
return foundname;
console.log("end");
Just swap this lines like so
console.log("end");
return foundname;
return foundname; should be below console.log()
(function () {
'use strict';
angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);
Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
var nrdown = this;
debugger
var promise = MenuCategoriesService.getMatchedMenuItems();
}
MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
var service = this;
console.log("start");
service.getMatchedMenuItems = function(searchTerm){
return $http({
method : 'GET',
url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
}).then(function(result){
var foundname = [];
angular.forEach(result.data.menu_items, function(value, key){
var name = value.name;
//console.log(typeof name);
if (name.toLowerCase().indexOf("chicken") !== -1){
foundname.push(name);
};
});
console.log("end");
return foundname;
});
}
}
})();
<!doctype html>
<html lang="en" ng-app='Ass3'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
<script type="text/javascript" src="app.js"></script>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="container" ng-controller="NarrowItDownController as nrdown">
<h1>Narrow Down</h1>
<div class="form-group">
<input type="text" placeholder="search term" class="form-control">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary">Narrow It Down For Me!</button>
</div>
<!-- found-items should be implemented as a component -->
<found-items found-items="...." on-remove="...."></found-items>
<ul>
<li ng-repeat="category in nrdown.categories">
{{categroy.name}}
</li>
</ul>
</div>
</body>
</html>

AngularJS ng-click stopped working suddenly

I am in the midst of troubleshooting a webpage that is able to open up a specific title from index.html to titleDetails.html.
However, ng-click in my index.html stopped working all of a sudden. I did not make any changes that could affect the link. It has been working fine all along (redirection of page from index.html to titleDetails.html) .
Original post here
Below are my codes:
app.js
(function () {
angular
.module("BlogApp", [])
.controller("BlogController", BlogController);
function BlogController($scope, $http) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post){
$scope.postDetail = post;
window.location = "/titleDetails.html";
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
You are missing $scope.titleDetails = titleDetails; in your controller.
Furthermore, I would recommend using controller as syntax.
So it would be something like this:
index.html
<div class="container" ng-controller="BlogController as blogCtrl">
...
<a ng-click="blogCtrl.titleDetails(post)">{{ blogCtrl.post.title }} </a>
your controller
function BlogController($scope, $http) {
var vm = this;
vm.titleDetails = titleDetails;
//rest of your code using 'vm' instead of '$scope'
This way, you can stop using $scope.
You can find more details here.

How to call a function inside an Angular component triggered by jQuery events?

I have a third-party component that using jQuery (FineUploader). When a document gets uploaded, it fires an event in javascript/jquery and I need to, at that point, call a function that is inside my Angular component from the jquery code that is outside my Angular component.
The angular button works as expected but I can't get the jQuery button to call the function successfully.
Here's my plunker example code
HTML Page
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
function widgetController() {
var model = this;
model.addWidget = function(text) {
alert(text);
}
}
var app = angular.module("app", []);
app.component("widget", {
templateUrl: "template.html",
controllerAs: "model",
controller: [widgetController]
});
</script>
</head>
<body>
<div ng-app="app">
<widget></widget>
</div>
</body>
</html>
Template Page
<center>
<p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>
<button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button>
<button id="addJquery">Add widget using jQuery</button>
</center>
<script>
$(function() {
//This is mocking up an event from the third-party component.
$("#addJquery").on("click", function(){
model.addWidget("JQUERY WORKED!!"); //I need to be able to call the Angular function from jQuery
});
});
</script>
I think this may have done the trick but I'm not sure if there is a better answer. Please post an alternate solution if there is a better one.
Here's the working Plunker
HTML Page
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var externalWidget;
function widgetController($scope, WidgetFactory) {
var model = this;
model.factory = WidgetFactory;
model.addWidget = function(text, isUpdatedExternally) {
model.isUpdated = text;
var newWidget = text;
model.factory.widgets.push(newWidget);
if(isUpdatedExternally)
{
$scope.$apply();
}
console.log("updated!");
}
model.checkWidget = function() {
console.log(model.isUpdated);
}
model.isUpdated = "NOT UPDATED";
model.addWidget("Controller initialized Widget");
externalWidget = model;
console.log(externalWidget);
}
var app = angular.module("app", []);
app.factory('WidgetFactory', function () {
var widgetList = [];
var initialWidget = "Factory Initialized Widget";
widgetList.push(initialWidget);
return {
widgets: widgetList
};
});
app.component("widget", {
templateUrl: "template.html",
controllerAs: "model",
controller: ["$scope", "WidgetFactory", widgetController]
});
</script>
</head>
<body>
<div ng-app="app" id="ngApp">
<widget></widget>
<br />
<center><button id="addJquery">Add widget using jQuery</button></center>
</div>
<script>
$(function() {
//This is mocking up an event from the third-party component.
$("#addJquery").on("click", function(){
externalWidget.addWidget("JQUERY WORKED!!!", true);
});
});
</script>
</body>
</html>
Template Page
<center>
<p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>
<button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button>
<button id="checkAngular" ng-click='model.checkWidget()'>Check widget using Angular</button>
</center>
<ul>
<li ng-repeat="w in model.factory.widgets">
{{w}}
</li>
</ul>

ngDialog not showing modal when clicked and no errors shown on the browser console

I am trying to implement a modal popup in angularjs using ngmodal. The code runs ,there is no error returned on the browser console but nothing happens when the modal is clicked. Below is my attempt and code
Index.html file
<html ng-appp="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
<script src="ngDialog.js"></script>
<link src="ngDialog.css"></link>
<script src="ngDialog.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
</div>
</script>
</div>
</body>
</html>
app.js file
var myApp = angular.module('myApp',['ngDialog']);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'templateId' });
};
}
function tt($scope)
{
$scope.test = function()
{
console.log("AaA");
}
}
Source of tutorial http://jsfiddle.net/mb6o4yd1/6/
Kindly assist
HTML Page.
You didnt put ng-app
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ngDialog.js"></script>
<script src="Scripts/app.js"></script>
<link href="Content/ngDialog.css" rel="stylesheet" />
<link href="Content/ngDialog-theme-default.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
</div>
<script type="text/ng-template" id="templateId">
<div ng-controller="tt" class="ngdialog-message">
<button ng-click="test()">Click here </button>
</div>
</script>
</div>
Here is your app.js
var myApp = angular.module('myApp', ['ngDialog']);
myApp.controller('MyCtrl', function ($scope,ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId'
});
};
});
myApp.controller('tt', function ($scope) {
$scope.test = function () {
alert('It works');
}
});
Let me know still you find any problem.(I have added ngDialog-theme-default.css )

Using Random User generator to create profiles with angular.js

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>

Categories