How to change the routing based on url in Angular js - angularjs

I have 2 urls /dev and /app. My angular routes is as follows
$routeProvider.
when('/home', {
templateUrl: 'homeTemp',
controller: 'homeCtrl',
}).
when('/home/:pageId', {
templateUrl: 'homeTemp',
controller: 'homeCtrl'
}).
when('/apps', {
templateUrl: 'devTemp',
controller: 'devCtrl',
}).
when('/app/:appId', {
templateUrl: 'devAppTemp',
controller: 'devCtrl'
}).
otherwise({
redirectTo: '/home'
});
Now when my url is /dev#/apps it loads the dev controller and when it's /apps#/home it loads the home controller
What change do I need to add in my routes so that when the url is just /dev it loads the dev controller
Currently because of the otherwise it redirects to /dev#/home

You could create a root level controller that just checks the url and redirects you as needed.
In your $routeProvider add
when('/', {
controller: 'isDevCtrl',
template:""
})
Then in isDevCtrl look at the url and redirect accordingly
yourApp.controller("isDevCtrl", function($location){
if($location.path() == '/dev'){
$location.path("/apps")
}else{
$location.path("/home")
}
});

Related

Is it possible to start angular route with a parameter

I have two URLs in my config file like:
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/:param1', {
templateUrl: 'shop.html',
controller: 'RouteController'
}).
when('/contact', {
templateUrl: 'contact.html',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}
]);
I am using 'param1' variable to fetch data from server. But when I route to '/contact' it considers 'contact' as a variable too and route it to the upper route i.e. variable route. How can I avoid this without using any extra identifier in route1.

can i redirect to https using ng-view on a specific route?

I'm working on an angular 1.5.0-rc0 project.
I'm using angular-route with ng-view with the following configuration:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider.
when('/',{
templateUrl: 'views/index.html',
controller: 'IndexController',
}).
when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController'
}).
when('/cocktail/:cocktail_name', {
templateUrl: 'views/cocktail.html',
controller: 'CocktailController',
}).
when('/add-drink',{
templateUrl: 'views/add-drink.html',
controller: 'AddDrinkController',
}).
when('/add-cocktail',{
templateUrl: 'views/add-cocktail.html',
controller: 'AddCocktailController',
controllerAs: 'addCocktail'
}).
when('/admin-drinks',{
templateUrl: 'views/admin-drinks.html',
controller: 'AdminDrinksController',
controllerAs: 'adminDrinks'
}).
when('/login',{
templateUrl: 'views/login.html',
controller: 'LoginController',
controllerAs: 'login'
}).
otherwise({
redirectTo: '/'
});
I want to check if users are browsing using https or http. and in case they browse /login using http I want to redirect them to https.
how can i do that ?
I would do it server side before the site loads your JS. I have done this in an angular app in the past and it is more secure to do it in PHP or Apache. Here is a PHP example: Redirecting from HTTP to HTTPS with PHP

Controller not getting Initialized until user navigated to the particular url

.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.when("/user/:username",{
templateUrl: "user.html",
controller: "UserController"
})
.otherwise({redirectTo:"/main"});
In User.html i have a button which open a ng-dialog and it has some data from main.html but if the user directly navigated to /user/:username i am not able to render the data from main.html in my ng-dialog.
As per ngRoute, these routes do not have any relation between them. When you move to the route /user/:username, MainController is destroyed and UserController is activated.
If you want to have parent child relationship i.e. activate MainController on activation of /user/:username route, use UI Router.
Code in UI Router would look like:
function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/main',
templateUrl: 'main.html',
controller: 'MainController'
})
.state('home.user', {
url: 'user/:username',
templateUrl: 'user.html',
controller: 'UserController'
});
};

use diese as a character, not like comment in a yml file

I try to declare a route to use angular,in my security.yml after authentication i well be redirect to #/welcome but consider it a comment
default_target_path: #/welcome
my app.js
routeApp.config(['$routeProvider',function($routeProvider) {
// Routing system
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: 'SecurityController'
})
.when('/welcome', {
templateUrl: Routing.generate('ard_backend_test'),
controller: 'WelcomeController'
})
.otherwise({
redirectTo: '/login'
});
}]);
Just add a double quote for your string and the hash # character will be able to escape.
default_target_path: "#/welcome"
Update: Do not define the default client route in your yml configuration.
This should be part of your angular router configuration. Depending which router you are using of course.
Here is an example with angular's default routeService:
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'partials/welcome.tpl.html',
controller: 'WelcomeCtrl'
}).
when('/some-other-route', {
templateUrl: 'partials/some-other-route.tpl.html',
controller: 'SomeOtherCtrl'
}).
otherwise({
redirectTo: '/welcome'
});
}]);

Angularjs routing OTHERWISE causes 404

I have a single page application where I route to different pages based on url address, I would like to redirect to Homepage when user enters non existing page in the url, so I use otherwise statement, however it causes 404 error, here is my routing config.:
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}]);
EDIT:
Changed it as suggested below buts till the same affect, when I type non existing page it goes to Error 404 instead of /products
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: function () { return '/' } });
$locationProvider.html5Mode(true);
}]);
You don't need the when('/'... and the otherwise as they essentially do the same thing.
The otherwise is a catchall to get anything that isn't matched so you don't need to route the '/' specifically.
$routeProvider.
when('/products/:id?', ...).
when('/orders/:id?', ...).
when('/auto', ...).
otherwise({
redirectTo: '/products'
});
EDIT The problem is that redirecting to '/products' won't match '/products/:id'. You'll need to add another route like as follows:
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
})

Resources