I am learning Angular. The following code works:
.controller('abc', function ($scope, $http)
{
$http.get("/Handlers/Authentication.ashx")
.success(function (data)
{
alert(data);
})
This function however does not:
.controller('abc', function ($scope, $http)
{
$scope.run = function ($scope, $http)
{
$http.get('/Handlers/Authentication.ashx');
// .success(function (data)
//{
// alert(data);
//});
};
}
I know that I should use a service here. But for learning purposes I would like to know why it does not work to call this function inside:
<body ng-app="MainModule">
<div ng-controller="abc">
<div>
<button type="button" class="btn btn-info" ng-click="run();">{{xx}}</button>
Thank you for help in advance
You're overriding controller injected $http service here :
$scope.run = function ($scope, $http)
{
$http.get('/Handlers/Authentication.ashx');
// .success(function (data)
//{
// alert(data);
//});
};
Just remove all arguments on your scope function and it should work :
.controller('abc', function ($scope, $http) {
$scope.run = function () {
$http.get('/Handlers/Authentication.ashx')
.success(function (data){
alert(data);
});
};
}
Because you are getting data, but don't doing with it something.
$http.get('/Handlers/Authentication.ashx').then(function(data){
console.log(data);
}, function(err){
console.log(err);
})
Related
I have this form and the data is not appear they do not pass to my back end :
<div ng-controller="searchController">
<form ng-submit="submit()">
<input type="text" name="name" ng-model="namegirl" />
<input type="text" name="namewod" ng-model="namewod" />
<input type="submit"/>
</form>
Now in my controller in script.js is this:
myApp.controller('searchController', ['$scope', '$filter', '$http', function ($scope, $filter, $http) {
let data = {
namegirl :$scope.namegirl,
name :$scope.namewod
};
console.log(data);
$http.post('/wodsearch',data)
.success(function (response) {
console.log(response.data);
})
.error(function (response, status) {
console.log(response);
});
}]);
Now i wand to pass my data from my form to the nodejs in my server i have this code:
app.post('/wodsearch',function(req, res ,next){
// how to get here the data from my angular
});
You call ng-submit="submit()" when you post the form but there is no submit() method in the searchControllers scope. Add it like this
myApp.controller('searchController', ['$scope', '$filter', '$http'
, function ($scope, $filter, $http) {
$scope.submit = function (){
let data = {
namegirl :$scope.namegirl,
name :$scope.namewod
};
console.log(data);
$http.post('/wodsearch',data)
.success(function (response) {
console.log(response.data);
})
.error(function (response, status) {
console.log(response);
});
};
}]);
Assuming you're using Express.
Then the data should be in req.body.
Using angular, I wrote a test to get current user information. This is my code:
var app = angular.module('gzmu', ["ngRoute",'chart.js']);
app.run(function ($rootScope, $http) {
$http({
method: 'GET',
url: 'datacon/user_info.php',
}).success(function (response) {
//response is ready
$rootScope.$broadcast("userinfo", response[0]);
})
});
app.controller('data', function ($scope, $http, $rootScope) {
$scope.username='';
$scope.$on("userinfo",
function (event, msg) {
//this function not work every time,when i reload the page,no alert is pop out
if(msg){
$scope.username = msg.user;
console.log($scope.username)
alert($scope.usernamea)
}
else{
alert(msg);
}
});
}）;
If I want to ask if I want the $scope.username to be setup in $on, what should I do?
I am new to Angular. I have created an app that, given the click of a button, should trigger a call that gets a set of json objects and populate a specific table. In the following controller code I have managed to populate the table directly without the click of a button (via the this.tableParams), but what I want is to trigger this data fetching process and populate the table only when the populateTable() function is called.How do I do it?
(function() {
'use strict';
angular
.module('anomalies')
.controller('controller', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {
$scope.populateTable = function () {
//
}
this.tableParams = new NgTableParams({}, {
filterDelay: 300,
getData: function (params) {
return $http({
method: 'GET',
url: '/server/data.json'
}).then(function (response) {
return response.data;
}, function (response) {
$log.log(response);
return [];
});
}
});
}]);
})();
Why not creating the NgTableParams-object inside the populateTable-function?
angular
.module('anomalies')
.controller('controller', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {
$scope.populateTable = function () {
this.tableParams = new NgTableParams({}, {
filterDelay: 300,
getData: function (params) {
return $http({
method: 'GET',
url: '/server/data.json'
}).then(function (response) {
return response.data;
}, function (response) {
$log.log(response);
return [];
});
}
});
}.bind(this);
}]);
Not the .bind(this). This ensures the this keyword means the same inside the populateTable-function as in the controller.
Move this.tableParams into the $scope.populateTable function. Bind this function to a button in the view e.g <button ng-click="populateTable()">Click Me!</button>
I am binding translation.
The issue is , some object convert to translated value, while some like mentioned below didn't work. This issue happened only first time when I build project. On refresh it gets fine.
This is not happening to all html objects.
angular.module('App').factory('APILoader', ['localStorageService', '$http', '$q', function (localStorageService, $http, $q) {
var translationAPIUrl = "Translation/Get";
return function (options) {
var deferred = $q.defer();
$http.get(translationAPIUrl, { params: { id: culture } }).success(function (response) {
data = JSON.parse(response.data);
deferred.resolve(data);
}).error(function (data) {
deferred.reject(options.key);
});
return deferred.promise;
};
}]);
Html:
<b> {{('Heading' |translate)}}</b>
I got it.
The issue is with deferred,
It did not resolve properly and get return.
The Key line is:
deferred.promise.then(function () {});
Here is the fixed code:
angular.module('App').factory('APILoader', ['localStorageService', '$http', '$q', function (localStorageService, $http, $q) {
var translationAPIUrl = "Translation/Get";
return function (options) {
var deferred = $q.defer();
$http.get(translationAPIUrl, { params: { id: culture } }).success(function (response) {
data = JSON.parse(response.data);
deferred.resolve(data);
deferred.promise.then(function () {});
});
}).error(function (data) {
deferred.reject(options.key);
});
return deferred.promise;
};
}]);
I'm trying to pass data from one controller to another using a factory and for some reason my factory isn't getting recognized in angular seed. Here is my app.js file which I'm declaring my factory
var myApp = angular.module('myApp', ['myApp.controllers','angularFileUpload', 'ngRoute']);
//
//
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/' ,{templateUrl:"/syncproto/partials/videoSlides.html"}, "sync").
when('/scenarios', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl").
when('/scenarios/:id', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl")
}]);
myApp.factory('Data', function() {
var Data;
return {
getData: function () {
return Data;
},
setData: function(value) {
Data = value;
}
};
});
Here is the controller which I'm using the factory Data
.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data) {
$scope.scenarios = [];
$scope.thumbnails = [];
$scope.init = function(){
console.log('init hit');
$http({ method: 'GET', url: 'http://localhost:3000/scenarios' }).
success(function (data, status, headers, config) {
angular.forEach(data, function(scenario) {
if (scenario.video.length != 0 && scenario.video[0].thumbnailLocation != undefined){
$scope.thumbnails.push(scenario.video[0].thumbnailLocation);
//console.log('thumbnail is' + scenario.video.thumbnailLocation);
$scope.scenarios.push(scenario);
console.log(scenario.video[0].thumbnailLocation);
}
});
//console.log($scope.scenarios);
console.log('success');
}).
error(function (data, status, headers, config) {
console.log('error');
});
console.log($scope.thumbnails);
}
$scope.showVideo = function(scenario){
Data.setData(scenario);
$location.path('/');
//Data.setData($scope.scenarios[$scope.thumbnail.indexOf(thumbnail)]);
}
}])
The problem is that in $scope.showVideo = function(scenario) when i call Data.setData(scenario); I get the error TypeError: Object #<Object> has no method 'setData'
.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data)
You're missing one argument for the $location service here. It should be
.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, $location, Data)