Right now when i hit below URL ,
angularproj.localhost.com
it will open login page and above url will be changed to
angularproj.localhost.com/#/login . This is the admin login
Now as per my project requirement , i will have multiple customers and all those will have their logins.
So i need create seperate URLs for them.
Say first customer is C1.So my url will be angularproj.localhost.com/c1.
And when i hit angularproj.localhost.com/c1 in browser it should open c1 customer login page.
I have tried below but no luck.
$stateProvider
.state('/:customer', {
url: "/",
templateUrl: "app/views/login/Customer/login.html",
data: { pageTitle: 'Example view' }
})
Trying this way. It should work.
var app = angular.module('tutorialWebApp', [
' ngRoute'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
// Pages
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);
You can use Dynamic templateUrl in your router
example:
.state('login', {
url: '/{customerID}',
views: {
'menu': {
templateUrl:
function (stateParams){
return '/partials/login' + stateParams.customerID+ '.html';
}
}
}
})
Related
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
When user go to either localhost:8888 or localhost:8888/, my angular application change to url to http://localhost:8888/#!/
This is my angular app in home page:
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
})
.when("/signin", {
templateUrl: "/public/user/signin.html",
controller: "signinController"
})
.when('/signup', {
templateUrl: "/public/user/signup.html",
controller: "signupController"
})
.otherwise({
redirectTo: '/'
});
}
])
if user go to http://localhost:8888/auth, angular redirects to http://localhost:8888/auth#!/signin,
only if user go to http://localhost:8888/auth/, angular redirects to http://localhost:8888/auth/#!/signin
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
})
.when("/signin", {
templateUrl: "/public/user/signin.html",
controller: "signinController"
})
.when('/signup', {
templateUrl: "/public/user/signup.html",
controller: "signupController"
})
.otherwise({
redirectTo: '/'
});
}
])
the angular official website and most of the books recommend using xxx/#!/xxx format. How can I do that?
Edit: I understand that I can add the trailing slash from the server side. but user can directly type xxx.com/auth.
Why is xxx.com working but not xxx.com/auth?
Edit2: the tutorial sample project works for all urls. we have pretty much the same implementation
http://angular.github.io/angular-phonecat/step-8/app/#/phones
try to enter http://angular.github.io/angular-phonecat/step-8/app (without the trailing slash
Tutorial link: https://docs.angularjs.org/tutorial/step_07
This is something you should fix on your back-end by adding a 301 redirect from /auth to /auth/.
Nginx:
rewrite ^/auth$ /auth/ permanent;
Apache:
Redirect "/auth" "/auth/" [R=301]
I'm trying to make a routing , it's working when I just clicking on links , but when I refresh the page , browser says not found ! I'm using html5mode , also when I set the # on url and search page manually it just works! what's the problem ?
this is app.js :
app = angular.module("app", [ "ngRoute" ]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider.when("/", {
templateUrl: "partials/index.html",
controller: "mainCtrl"
}).when("/index", {
templateUrl: "partials/index.html"
}).when("/person", {
templateUrl: "partials/person.html",
controller: "personCtrl"
}).when("/person/:id", {
templateUrl: "partials/personShow.html",
controller: "personShowCtrl"
}).when("/about", {
templateUrl: "/partials/about.html"
}).when("/contact", {
templateUrl: "/partials/contact.html"
}).when("/coworking", {
templateUrl: "/partials/coworking.html"
}).otherwise({
redirectTo: "/partials/person.html"
});
$locationProvider.html5Mode(true);
});
Here is excatly same question, anwsered by me:
tl;dr
You need a webserver, like Apache, Nginx or something based on Node.js and you need to redirect all your http calls to index.html
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
In my angular app i have two links
signup
signin
When i click on signup link, the url in address bar becomes localhost/signup.
if i click the same link again, the url in address bar becomes localhost/signup/#signup
I could n't find any solution.
Can anyone help me please.
Route config:
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode(true);
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/home/views/home.html',
controller: 'HomeController'
})
.when('/signup', {
templateUrl: 'app/signup/views/signup.html',
controller: 'SignUpController'
})
.otherwise({
redirectTo: '/'
});
}]);
You do not need the hashtag for routing. Jus use href="signup.