Develop Reference

$http.get() function can't identify local server's json structured template | AngularJs | Django

I'm using angularjs with Django.
Here is my angularjs script:
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope, $http){
$scope.name = 'sh';
$http.get('http://127.0.0.1:8000/json/ls/').then(function(response){
$scope.code = response.status;
$scope.text = response.statusText;
$scope.data = response.data;
},function(){
$scope.message = 'not found!';
});
});
And here's my http://127.0.0.1:8000/json/ls/ page's result:
{'record':[{'name':'your name','post':'dp'},{'name':'sdfsdfyour name','post':'sdfsfsfdp'},{'name':'your namefdsfsd','post':'dpsfdfsdf'},{'name':'your namesdfsdfs','post':'dpfsfdsfs'}]}
But $http.get('http://127.0.0.1:8000/json/ls') function showing me it's $scope.message's data as result. And you know that this result will be only shown while $http.get() will be failed to find the specific page. Have any suggestion/solution, please?

Call function in angular controller after clickin on a dynamiclly created element in DOM

Hi I want to call a function after clicking on a button which is added to dom after angular is loaded. I dont know if this is possible in the way I am trying it, but I do know that my current code doesn't call the alert function.
After sending a search request to my backend, I get a list data entrys, which I display as hrefs.
my_form.setAttribute("href", result[i].url)
my_form.setAttribute("ng-href",'#here')
my_form.setAttribute("ng-click", "alert(1)")
my_form.setAttribute("style", "display:block;")
results in
John Doe
Complete Code:
var appModule = angular.module('graph', [])
appModule.controller('graphCtrl', ['$scope', '$http', '$compile', function ($scope, $http, $compile) {
$scope.search = function () {
var data = {
}
$http.get('/api/search/?q=' + $scope.searchfield, data).success(function (data, status, headers, config) {
var result = data;
var searchResultsContainer = document.getElementById("dropdownId");
while (searchResultsContainer.firstChild) {
searchResultsContainer.removeChild(searchResultsContainer.firstChild);
}
for (i in result) {
var my_form = document.createElement("a");
my_form.setAttribute("href", result[i].url)
my_form.setAttribute("ng-href",'#here')
my_form.setAttribute("ng-click", "alert(1)")
my_form.setAttribute("style", "display:block;")
my_text = document.createTextNode(result[i].caption)
my_form.appendChild(my_text)
searchResultsContainer.appendChild(my_form)
}
})
}
$scope.alert = function(){
alert("Hello! I am an alert box!!");
}
}

how to display a loading image in angular js

Hello great Stackoverflow, am learning angular js and so am querying database records via angular js and everything works fine. now i want to display a loading image as the database content is loading and the image will fade off as soon as the content is loaded. please how do i achieve that. Thanks
below is the working code
var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);
app.controller('listdata',function($scope, $http){
$scope.users = []; //declare an empty array
$http.get("data.php").success(function(response){
$scope.users = response; //ajax request to fetch data into $scope.data
});
$scope.sort = function(keyname){
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
});

You can add smth like $scope.loading = true; before $http.get("data.php").success(function(response){ line.
And $scope.loading = false; inside success function.
In markup, smth like <table ng-hide="loading"> and <img ng-show="loading" src="loader.gif">

AngularJS call Firebase uid from controller

Im trying to verify that a user is logged in. Initially I went with $scope.use, $scope.user.uid, $scope.getCurrenUser() as described on Firebase docs but I think I simply have the dependencies wrong.
Code:
myApp.js
https://gist.github.com/sebbe605/2b9ff7d3b798a58a3886
firebase.js
https://gist.github.com/sebbe605/f9e7b9a75590b3938524
If I understand this correctly there is no way for the program to know that I'm referring to a Firebase user. To clarify I want .controller('templateCtrl',function($scope, $firebase) to have the ability to show a certain button if the user is logged in.
--UPDATE 1--
So, i have updated my files and for what i understand this should work. Previous code are as gits above to enhance the cluther.
myApp.js
angular.module('myApp', [
'ngRoute',
'firebase'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/template',
{
templateUrl:'partials/template.html', controller:'templateCtrl'
});
$routeProvider
.when('/login',
{
templateUrl:'partials/login.html', controller:'signupCtrl'
});
$routeProvider
.when('/signup',
{
templateUrl:'partials/signup.html', controller:'signupCtrl'
});
$routeProvider
.when('/user',
{
templateUrl:'partials/user.html', controller:'userCtrl'
});
$routeProvider
.otherwise('/template');
}])
controllers.js
'use strict';
angular.module('myApp').controller('signupCtrl', function($scope, $http, angularFire, angularFireAuth){
$scope.loginBusy = false;
$scope.userData = $scope.userData || {};
var ref = new Firebase('https://boostme.firebaseio.com/');
angularFireAuth.initialize(ref, {scope: $scope, name: 'user'});
/*//////////////LOGIN - LOGOUT - REGISTER////////////////////*/
$scope.loginEmailText = "Email"
$scope.loginPasswordText = "Password"
$scope.login = function() {
$scope.loginMessage = "";
if ((angular.isDefined($scope.loginEmail) && $scope.loginEmail != "") && (angular.isDefined($scope.loginPassword) && $scope.loginPassword != "")) {
$scope.loginBusy = true;
angularFireAuth.login('password', {
email: $scope.loginEmail,
password: $scope.loginPassword
});
} else {
$scope.loginPassword = ""
$scope.loginPasswordText = "Incorrect email or password"
}
};
$scope.logout = function() {
$scope.loginBusy = true;
$scope.loginMessage = "";
$scope.greeting = "";
$scope.disassociateUserData();
$scope.userData = {};
angularFireAuth.logout();
};
$scope.emailText = "Email"
$scope.passwordText = "Password"
$scope.confirmPasswordText = "Confirm Password"
$scope.register = function() {
$scope.loginMessage = "";
if ((angular.isDefined($scope.email) && $scope.email != "") && (angular.isDefined($scope.password0) && $scope.password0 != "" && $scope.password0 == $scope.password1)) {
$scope.loginBusy = true;
angularFireAuth.createUser($scope.email, $scope.password0, function(err, user) {
if (user) {
console.log('New User Registered');
}
$scope.loginBusy = false;
});
} else {
$scope.password0 =""
$scope.password1 =""
$scope.passwordText = "Password Not Matching"
$scope.confirmPasswordText = "Password Not Matching"
}
};
$scope.$on('angularFireAuth:login', function(evt, user) {
$scope.loginBusy = false;
$scope.user = user;
console.log("User is Logged In");
angularFire(ref.child('users/' + $scope.user.id), $scope, 'userData').then(function(disassociate) {
$scope.userData.name = $scope.userData.name || {};
if (!$scope.userData.name.first) {
$scope.greeting = "Hello!";
} else {
$scope.greeting = "Hello, " + $scope.userData.name.first + "!";
}
$scope.disassociateUserData = function() {
disassociate();
};
});
});
$scope.$on('angularFireAuth:logout', function(evt) {
$scope.loginBusy = false;
$scope.user = {};
console.log('User is Logged Out');
});
$scope.$on('angularFireAuth:error', function(evt, err) {
$scope.greeting = "";
$scope.loginBusy = false;
$scope.loginMessage = "";
console.log('Error: ' + err.code);
switch(err.code) {
case 'EMAIL_TAKEN':
$scope.loginMessage = "That email address is already registered!";
break;
case 'INVALID_PASSWORD':
$scope.loginMessage = "Invalid username + password";
}
});
})
Output:
Error: [$injector:unpr] Unknown provider: angularFireProvider <- angularFire
http://errors.angularjs.org/1.3.0-rc.3/$injector/unpr?p0=angularFireProvider%20%3C-%20angularFire
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:80:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3938:19
at Object.getService [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3943:45
at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4103:13)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4123:23)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7771:28
at link (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js:938:26)
at invokeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7549:9) <div ng-view="" class="ng-scope">
(anonymous function) angular.js:10683
(anonymous function) angular.js:7858
invokeLinkFn angular.js:7551
nodeLinkFn angular.js:7069
compositeLinkFn angular.js:6441
publicLinkFn angular.js:6320
boundTranscludeFn angular.js:6461
controllersBoundTransclude angular.js:7096
update angular-route.js:896
Scope.$broadcast angular.js:13751
(anonymous function) angular-route.js:579
processQueue angular.js:12234
(anonymous function) angular.js:12250
Scope.$eval angular.js:13436
Scope.$digest angular.js:13248
Scope.$apply angular.js:13540
done angular.js:8884
completeRequest angular.js:9099
xhr.onreadystatechange angular.js:9038
I cant figure out what the problem is. However i think there is something wrong with: but i can't tell. If more information is needed i'm happy to post it.

I initially was taking the same if-then-else approach as you do for handling privileged actions. But it turns out this is not the best approach when using Angular. Instead of having this if-then-else approach, try to reframe the problem to a solution that isolates the privileged code.
show a certain button if the user is logged in
So your original question was about showing an HTML element only when the user if logged in, which is easy with something like this in your controller:
$scope.auth = $firebaseSimpleLogin(new Firebase(FBURL));
This line binds the Firebase login status to the current scope, which makes it available to the view. No if-then-else is needed, since there is always a login status. AngularFire ensure that the view gets notified when that status changes, so all we have to do is ensure that we have the HTML markup to handle both presence and absence of authenticated users:
<div ng-controller="TrenchesCtrl" class='auth'>
<div ng-show="auth.user">
<p>You are logged in as <i class='fa fa-{{auth.user.provider}}'></i> {{auth.user.displayName}}</p>
<button ng-click="auth.$logout()">Logout</button>
</div>
<div ng-hide="auth.user">
<p>Welcome, please log in.</p>
<button ng-click="auth.$login('twitter')">Login with <i class='fa fa-twitter'> Twitter</i></button>
<button ng-click="auth.$login('github')">Login with <i class='fa fa-github'> GitHub</i></button>
</div>
</div>
See how it almost reads like an if-then-else? But then one without me writing code that tries to detect if the user is logged in. It is all declaratively handled by AngularJS and AngularFire.
perform actions only when a user is logged in
When you actually need to perform a privileged action, I've found it easiest to isolate the code like this:
function updateCard(id, update) {
var auth = $firebaseSimpleLogin(new Firebase(FBURL));
auth.$getCurrentUser().then(function(user) {
update.owned_by = user.username;
var sync = $firebase(ref.child('cards').child(id));
sync.$update(update);
});
};
Note that these are (simplified) fragments from my Trenches app (demo), which I wrote to learn more about Angular and AngularFire.

Ajax Post between angularjs and symfony2 (Notice: Undefined index)

I'm very new to symfony2 php framework but I know that its MVC for backend. I'm trying to create a form which get stored in the database and then an email is sent to the user with the same info that he/she typed in the form. To do that, I used doctrine, swiftmailer and entity in the symfony2 framework.
When I use < form method='post' action='saveIndex' >< /form >, it works just fine but when I'm trying to implement angularjs's AJAX to post my data, I'm getting Notice: Undefined index error.
Html (in twig template):
<form class="productForm">
<div class="inputs" style="float: left">
<input type="text" name="productId" data-ng-model="signup.user.productId"/>
<input type="text" name="firstName" data-ng-model="signup.user.firstName"/>
<input type="text" name="lastName" data-ng-model="signup.user.lastName"/>
<input type="email" name="email" data-ng-model="signup.user.email"/>
<input type="text" name="price" data-ng-model="signup.user.price"/>
<input type="text" name="timeStamp" data-ng-model="signup.user.time"/>
<textarea name="comments" data-ng-model="signup.user.comments"></textarea>
<button type="submit" name="submit" class="btn btn-primary" ng- click="submit(signup.user)">Submit Request</button>
</div>
</div>
</form>
app.js:
myApp.controller('mainController',[
'$scope',
'$location',
'$http',
'$window',
'$rootScope',
function($scope, $location, $http, $window, $rootScope){
$scope.submit = function (user) {
$http({
method: 'POST',
url: 'saveIndex',
data: $scope.signup
})
.success(function(data, status){
$log.warn(data, status); //remove for production
$location.path('success');
})
.error(function(data, status){
$log.warn(data, status); //remove for production
});
}
}
]);
symfony2 controller:
// Save Information
public function saveIndexAction(){
$post = new Post(); // Call to entity named Post
$request = $this->get('request');
$params = $request->request->all();
$session = $this->get('session');
$this->saveIndex(
$params['productId'], <- GETTING UNDEFINED INDEX ERROR
$params['firstName'],
$params['lastName'],
$params['email'],
$params['price'],
$params['timeStamp'],
$params['comments'],
$session
);
$post->setProductId($params['productId']);
$post->setFirstName($params['firstName']);
$post->setLastName($params['lastName']);
$post->setEmail($params['email']);
$post->setPrice($params['price']);
$post->setTimeStamp($params['timeStamp']);
$post->setComments($params['comments']);
// Store information in the database
$em = $this->getDoctrine()->getManager();
$em->persist($post);
$em->flush();
// Send the email
$this->mailAction
(
$post->getId(),
$params['productId'],
$params['firstName'],
$params['lastName'],
$params['email'],
$params['price'],
$params['timeStamp'],
$params['comments']
);
// Return the response
//return new Response('Info Submitted'.$post->getId());
$return=json_encode($post);//json encode the array
return new Response($return,200,array('Content-Type'=>'application/json'));//make sure it has the correct content type
}
I don't know how to make AJAX POST with with symfony 2 controller and get the response back to Angularjs to perform client side routing. Please any help is appreciated. Thank you.

So, upon var_dump($params), I found the output to be array (size = 0) undefined.
So, I included the following code:
protected function getRequestJson(){
$params = null;
$content = $this->get("request")->getContent();
if (!empty($content))
{
$params = json_decode($content, true);
}
return $params;
}
public function saveIndexAction(){
$post = new Post();
$signup_params = $this->getRequestJson();
//flatten signup parameters
$params = array();
foreach ($signup_params as $p) {
if (is_array($p)) {
foreach($p as $key=>$val) {
$params[$key]=$val;
}
}
}
}
And it worked.