I'm experiencing a weird issue with $urlRouterProvider.
In theory I should be able to see the 'here' message log every time the url changes, but I can only see that when the url typed is not in the 'state' list.
Can you telle me what's wrong with this code and why $urlRouterProvider.rule is not executed every url change?
This is my code for the stateProviderConfig:
angular.module('stateProviderConfig', [])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise( function($injector) {
var $state = $injector.get('$state');
$state.go('app.dashboard');
});
$urlRouterProvider.rule(function ($injector, $location) {
console.log('here');
});
$stateProvider
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'views/tmpl/app.html',
})
.state('app.404', {
url: '/404',
controller: 'Err404Controller',
templateUrl: 'views/tmpl/404.html'
...
...
}]);
Related
I have the problem that whenever I refresh the page, a slash is being added to the url. Im being automatically (with timeout) directed to the state 'home' from the state 'intro'.When I go to home, instead of /home, I see /home/ which leads to: Cannot GET /home/.
Ive seen a suggestion somewhere in this forum to add $urlMatcherFactoryProvider.strictMode(false); to fix that, however that doesn't work as well as nothing else I tried. Any ideas?Thanks!
app.config(function ($stateProvider) {
$stateProvider.state('intro', {
url: '/',
templateUrl: 'intro/intro.html',
controller: 'introCtrl'
});
});
app.config(function ($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home/home.html',
controller: 'homeCtrl'
});
});
my app.js file:
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);
app.config(function ($urlRouterProvider, $locationProvider,$urlMatcherFactoryProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
use this code
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app.intro', {
url: '/',
templateUrl: '/intro/intro.html',
controller: "introCtrl"
})
.state('app.home', {
url: '/home',
templateUrl: '/home/home.html',
controller: "homeCtrl"
})
$locationProvider.html5Mode(true);
});
Take the following code. I have a cookie that is created once a user successfully logs in. My API is also already authenticated. What I am looking to do is do a simple check of the cookie before serving up a route, with the only exception of the login route.
angular
.module('pizzaGiants.routes', ['ui.router'])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
// Application Routes
// -----------------------------------
// add check if cookie exists else redirect to login
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'features/login/login.html',
controller: 'loginCtrl'
})
.state('attributes', {
url: '/attributes',
templateUrl: 'features/attributes/attributes.html',
controller: 'attributesCtrl'
})
.state('users', {
url: '/users',
templateUrl: 'features/users/users.html',
controller: 'usersCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'features/signup/signup.html',
controller: 'signupCtrl'
})
.state('roles', {
url: '/roles',
templateUrl: 'features/roles/roles.html',
controller: 'rolesCtrl'
})
.state("fruits", {url: "/fruits",templateUrl: "features/fruits/fruit.html",controller: "fruitCtrl"}).state("colors", {url: "/colors",templateUrl: "features/colors/color.html",controller: "colorCtrl"}).state("contacts", {url: "/contacts",templateUrl: "features/contacts/contact.html",controller: "contactCtrl"})
}]);
Could be like following
app.run([
'$rootScope','$location', '$timeout',
function ($rootScope, $location, $timeout) {
$rootScope.$on('$stateChangeStart', function () {
if (// your condition logic) {
$timeout(function () {
$location.path("/login");
}, 1);
}
});
}
]);
I am unable to change my Url using $state.go but i am getting that page for which i have requested in $state.go , I have also used route.js
angular.module("myApp")
.controller('myController', ['$scope','$state', function ($scope, $state) {
$scope.showDetails = function(data){
if(some true condition){
$state.go("create.preemp");
}
else if(some true condition){
$state.go("create.prepolicy");
}
}
}])
angular.module("myApp")
.config(function ($stateProvider, $routeProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/',
templateUrl: 'signin/signin.html',
controller: 'signinController'
})
.state('create.preemp', {
url: '/create.preemp',
templateUrl: 'preemp.html',
controller: 'preempController'
})
.state('create.prepolicy', {
url: '/create.prepolicy',
templateUrl: 'prepolicy.html',
controller: 'prepolicyController'
})
$urlRouterProvider.otherwise('/');
})
??
I'm trying to redirect after login to a specific page in Meteor using AngularJS. But somehow it is not working. After login Meteor.user() is returning null. Because of this every time it is routing to messages page only. I have seen this example from one of the forums and developed on top of that.
angular.module("jaarvis").run(["$rootScope", "$state", "$meteor", function($rootScope, $state, $meteor) {
$meteor.autorun($rootScope, function(){
if (! Meteor.user()) {
console.log('user');
if (Meteor.loggingIn()) {
console.log('loggingIn ' + Meteor.user()); -- returning null
if(Meteor.user()) {
$state.go('onlineusers');
} else {
//On login
$state.go("messages");
}
}
else{
console.log('login');
$state.go('login');
}
}
});
}]);
Routes declared as below.
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl'
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl'
})
});
$urlRouterProvider.otherwise("/messages");
}]);
Logging using below snippet of code.
<meteor-include src="loginButtons"></meteor-include>
Michael is probably right about the root cause of the problem, but I think that a better alternative is provided by the the authentication methods of Angular-Meteor.
What you are going to want to do is to force the resolution of a promise on the route. From the Angular-Meteor docs (i.e. a general example...):
// In route config ('ui-router' in the example, but works with 'ngRoute' the same way)
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home.ng.html',
controller: 'HomeController'
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
});
Your specific code would look something like:
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
});
$urlRouterProvider.otherwise("/messages");
}]);
And then on your ChatCtrl and OnlineUsersCtrl controllers, you would add currentUser as one of the variables to inject, like:
angular.module("rootModule").controller("ChatCtrl", ["$scope", "$meteor", ...,
function($scope, $meteor, ..., "currentUser"){
console.log(currentUser) // SHOULD PRINT WHAT YOU WANT
}
]);
You might also want to consider the $meteor.requireUser() promise as well, and then send the user back to the login page if the promise gets rejected. All of this is documented very well on the angular-meteor website.
Good luck!
It could be that the user object hasn't loaded yet. You can try:
if ( Meteor.userId() ) ...
instead
My state configuration goes something like this:
.config(function ($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.facebook({
clientId: '16250xxxxxx',
scope: 'user_friends'
});
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('core', {
abstract: true,
template: '<ui-view>',
resolve: {
'authStatus' : function($auth, $q, User) {
var defer = $q.defer();
$auth.authenticate('facebook').then(function(result) {
User.update(result.data.user);
defer.resolve();
});
return defer.promise;
}
}
})
.state('home', {
parent: 'core',
url: '/home',
templateUrl: 'app/home/home.html'
})
....
.... other states
When my application loads, it enters the resolve block of 'core' state twice.
This causes the facebook authentication window to open twice..
Any clue why it would execute the core state twice ?
Found the reason for this occurence.
The satellizer $auth service would redirect to a default url upon resolving the authentication.
I simply had to reset that to '/home' in the config section of angular app
$authProvider.loginRedirect = '/home';