Develop Reference

I had created js (angular js code) file, but this js file not allowing to work other javascript components

I had created js (angular js code) file like below, but this js file not allowing to work other Javascript components.
'use strict';
// declare modules
angular.module('Authentication', []);
angular.module('Home', []);
angular.module('BasicHttpAuthExample', [
'Authentication',
'Home',
'ngRoute',
'ngCookies'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'modules/authentication/views/login.html',
hideMenus: true
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html'
})
.when('/component1', {
controller: 'ComponentsController',
templateUrl: 'modules/home/views/components/component1.html'
})
.when('/databaseconfig',{
controller: 'DatabaseConfigController',
templateUrl: 'modules/home/view/components/databaseConfig.html'
})
.otherwise({ redirectTo: '/login' });
}])
When ('/component1', { controller: 'ComponentsController', templateUrl: 'modules/home/views/components/component1.html' })
let us say in component1.html file, I am using ng-show/ng-hide is not working. If I use jquery components like hide/show the div based on the radio button is not working. When I am not importing above mentioned js file in component1.html then jquery (hide/show div based on radio button) angularjs (ng-show/ng-hide) components are working.
.run(['$rootScope','$location','$cookieStore','$http',
function ($rootScope, $location, $cookieStore, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
if ($rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
}
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in
if ($location.path() !== '/login' && !$rootScope.globals.currentUser) {
$location.path('/login');
}
});
}]);

Auth redirects to wrong path

I have this strange behaviour on my AngularFire Auth function.
The user logs in with email+password and on success it should redirect to /dash, but is redirecting to /home.
/dash is locked for unauth and work as expected, but when I log in and are being redirected to /home, if I type /dash in the browser it's accessible. So, it IS working but my redirecting behaviour is obviously wonky. Also it seems like it's trying to access /dash because it flickers by quickly before sending me to /home on successful login.
I'm using latest Angular + AngularFire + Firebase.
I've tried to set up a plunkr-view of it but it seems to be something with plunkr and firebase that doesn't work.
Anyhow, here's my auth code and my route code, all ideas are welcome!
app.controller('loginController', ['currentAuth', '$scope', '$firebaseAuth', 'Auth', '$location', '$rootScope',
function(currentAuth, $scope, $firebaseAuth, Auth, $location, $rootScope){
var ref = new Firebase('https://url.firebaseio.com');
$scope.auth = $firebaseAuth(ref);
// Login user, if true redirect to dash.html, if false, don't redirect, show error message
$scope.loginUser = function(){
$scope.auth = Auth;
$scope.auth.$authWithPassword({
email:$scope.email,
password:$scope.password
}, {
remember: 'sessionOnly'
}).then(function(authData) {
console.log('Logged in as: ', authData.uid);
$scope.auth.$onAuth(function(authData) {
$rootScope.auth = true;
$scope.auth = Auth;
$location.path('/dash.html');
})
// If error with login, catch it and prompt it
}).catch(function(error) {
$('#signBlock').text(error);
});
};
}
]);
And routes:
app.run(['$rootScope', '$location', 'Auth',
function($rootScope, $location, Auth){
$rootScope.$on('$routeChangeError',
function(event, next, previous, error){
if(error === 'AUTH_REQUIRED'){
console.log('AUTH REQ!')
$location.path('/home');
}
});
}]);
// Config for routing
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
// Route for landing page
.when('/home', {
templateUrl: '/home.html',
controller: 'homeController'
})
// Route for login page
.when('/login', {
templateUrl: '/login.html',
controller: 'loginController',
resolve: {
'currentAuth': ['Auth', function(Auth){
return Auth.$waitForAuth();
}]
}
})
// Route for user dashboard
.when('/dash', {
templateUrl: '/dash.html',
controller: 'dashController',
resolve: {
'currentAuth': ['Auth', function(Auth){
return Auth.$requireAuth();
}]
}
})
.otherwise({ redirectTo: '/home' });
}]);

Angularfire ngRoute/resolve issue, jumps to otherwise

I'm using the latest Angular + Firebase and trying to set up a login authorization system. I have home.html which contains login+signup links, going to login.html and adding credentials works just fine (logging correct UID when submittet) but it's supposed to route to dash.html but goes back to home.html.
I've figured out that it seem to be issues with my resolve functions because the problem disappears when I remove .otherwise. But I still want (need?) it there I think.
If I'm logged in (but redirected to home.html) I can still access dash.html through the URL and I cannot access it again if I use the logout function at dash.html and that's how it should be.
But I can't figure out why I'm redirected to home.html in the first place.
Here's some of the code, any help appreciated:
My .run, .config and routes.
app.run(['$rootScope', '$location',
function($rootScope, $location){
$rootScope.$on('$routeChangeError',
function(event, next, previous, error){
if(error === 'AUTH_REQUIRED'){
$location.path('/home');
}
});
}]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider,
$locationProvider){
$routeProvider
.when('/home', {
templateUrl: '/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: '/login.html',
controller: 'loginController',
resolve: {
'currentAuth': ['Auth', function(Auth){
return Auth.$waitForAuth();
}]
}
})
.when('/dash', {
templateUrl: '/dash.html',
controller: 'dashController',
resolve: {
'currentAuth': ['Auth', function(Auth){
return Auth.$requireAuth();
}]
}
})
.otherwise({ redirectTo: '/home' });
}]);
My login controller:
app.controller('loginController', ['currentAuth', '$scope', '$firebaseAuth',
'Auth', '$location', '$rootScope',
function(currentAuth, $scope, $firebaseAuth, Auth, $location, $rootScope){
var ref = new Firebase('https://url.firebaseio.com');
$scope.auth = $firebaseAuth(ref);
$scope.loginUser = function(){
$scope.auth = Auth;
$scope.auth.$authWithPassword({
email:$scope.email,
password:$scope.password
}, {
remember: 'sessionOnly'
}).then(function(authData) {
console.log('Logged in as: ', authData.uid);
$scope.auth.$onAuth(function(authData) {
$rootScope.auth = true;
$scope.auth = Auth;
$location.path('/dash.html');
})
}).catch(function(error) {
console.log('There was an error: ', error);
});
};
}]);
And my factory and module:
var app = angular.module('app', ['firebase', 'ngRoute']);
app.factory('Auth', ['$firebaseAuth',
function($firebaseAuth){
var ref = new Firebase('https://url.firebaseio.com');
return $firebaseAuth(ref);
}]);

it has with your resolve issue.
If you look at the documentation firebase doc
you will see that they use the
$waitForSignIn
or
$requireSignIn
functions. I know that because I have done the same thing. Try that instead and it should work

How to reload a controller when pressing back (angular js)

I hav a controller responsible for navigation, it checks the cookie and if the user is logged in shows and hides navigation menu.
nav.js - controller
'use strict';
//app global variable
//this is the controller that handles post requests
//declare services as dependecies $http, $location, custom service apiServiceWeb
app.controller('navigationController', function($scope, $route, $rootScope, $http, $location, $cookies, setCredentials) {
//get what is in the cookie
var cookieValue = setCredentials.getCookie('globals');
if (cookieValue == '[object Object]') {
//redirect to home
$location.path("/");
//remove cookie
//setCredentials.removeCookie('globals');
}
//hide menu in certain paths
if ($location.path() == '/' || $location.path() == 'signup' || cookieValue == '[object Object]') {
//hide menu
$scope.isConnected = true;
} else {
$rootScope.$watch('globals', function() {
//if a currentUser does NOT exist, the hide menu.
console.log('changed');
// console.log($rootScope.globals);
if (cookieValue = null) {
$scope.isConnected = true;
} else {
//show menu, user is logged in
$scope.isConnected = false;
}
});
}
});
However the problem is, if the user clicks back and they end up in the login page. The nav.js controller does not reload, meaning the menu that shows when the user is logged in, shows on the login page.
So far I have detected when the user clicks back, like this:
app.js
/* global app:true */
/* exported app */
'use strict';
/**
* #ngdoc overview
* #name WebAppApp
* #description
* # WebAppApp
*
* Main module of the application.
*/
var app = angular
.module('WebAppApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginCtrl',
// controllerAs: 'login'
})
.when('/home', {
controller: 'homeCtrl',
templateUrl: 'views/home.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'signupCtrl',
//controllerAs: 'home'
})
.otherwise({
redirectTo: '/'
});
});
//when app runs call this function.
app.run(function($rootScope, $route, $location){
//Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to
//bind in induvidual controllers.
$rootScope.$on('$locationChangeSuccess', function() {
$rootScope.actualLocation = $location.path();
});
$rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {
if($rootScope.actualLocation === newLocation) {
alert('Why did you use history back?');
alert($rootScope.actualLocation);
if($rootScope.actualLocation=='/'){
//clear cookie
}
}
});
});
I basically would like to reload the nav.js controller once I detect the user is back to the login page or other pages where the nav bar should not appear.
How can I achieve this?
Thanks

Yeoman: AngularJS & facebook SDK, page not loading

So im new with Angular and i downloaded the Yeoman scaffolding for Angular.JS to fiddle with it a bit.
I'm trying to implement Facebook Login with this library: https://github.com/pc035860/angular-easyfb
Nothing is loading and the console doesnt reflect anything. I'm almost sure the problem has something to do with the injecting of the facebook dependency on the controller.
I have this on my main.js file:
angular.module('circeApp', ['ezfb'])
.controller('MainCtrl', function($scope, ezfb, $window, $location) {
updateLoginStatus(updateApiMe);
$scope.login = function(){
ezfb.login(function(response){
if(response.authResponse){
updateLoginStatus(updateApiMe);
}
}, {scope: 'email,user_likes'});
};
$scope.logout = function(){
ezfb.logout(function(){
updateLoginStatus(updateApiMe);
});
};
function updateLoginStatus(more){
ezfb.getLoginStatus(function(response){
$scope.loginStatus = response;
(more || anular.noop)();
});
}
function updateApiMe(){
ezfb.api('/me', function(response){
$scope.apiMe = response;
});
}
});
And this on my app.js file:
'use strict';
angular.module('circeApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ezfb'
])
.config(function ($routeProvider, $locationProvider, $httpProvider, ezfbProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'partials/login',
controller: 'LoginCtrl'
})
.when('/signup', {
templateUrl: 'partials/signup',
controller: 'SignupCtrl'
})
.when('/settings', {
templateUrl: 'partials/settings',
controller: 'SettingsCtrl',
authenticate: true
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
// Intercept 401s and redirect you to login
$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
return {
'responseError': function(response) {
if(response.status === 401) {
$location.path('/login');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
};
}]);
})
.run(function ($rootScope, $location, Auth) {
// Redirect to login if route requires auth and you're not logged in
$rootScope.$on('$routeChangeStart', function (event, next) {
if (next.authenticate && !Auth.isLoggedIn()) {
$location.path('/login');
}
});
//Configure ezfb provider aqui
ezfbProvider.setInitParams({
appId: 'XXXXXXXXXXXX',
status: true,
cookie: true,
xfbml: true
});
});
Before this, the page rendered but console told me: "Argument 'MainCtrl' is not a function, got undefined". I fixed a missing parenthesis and made sure ezfb was included in angular.module. Now, the only thing i get is a blank page.