I need to set Angularjs routing to do nothing on "otherwise" method.
var townApp = angular.module('townApp', ["ngRoute"]);
townApp.config(function($routeProvider){
$routeProvider
.when("/dashboard", {
templateUrl : "/profile/dashboard/"
})
.when("/payments", {
templateUrl : "/profile/payments/",
})
.otherwise(
/* DO NOTHING.*/
)
});
Right now, it cleans the ng-view directive upon changing url to an undefined one and that's not what I need.
How can I make it stay on the same page and do nothing?
I found this Here.
I have no idea what is happening but it works as i want.
townApp.config(function($routeProvider){
$routeProvider
.when("/dashboard", {
templateUrl : "/profile/dashboard/"
})
.when("/payments", {
templateUrl : "/profile/payments/",
})
.otherwise({redirectTo: $routeProvider});
});
Related
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'junk.html',
})
. .when('/:pageuniqueid', {
templateUrl : 'page.html',
})
// route for the about page
.when('/first', {
templateUrl : 'first.html',
})
// route for the contact page
.when('/second', {
templateUrl : 'second.html',
});
});
If i type 'example.com/first' in the URL then instead of getting first.html i am getting page.html.
I am implementing the page that user can access directly with their dynamic pageid after base URL.
I want to get page.html only if it is not matched with the other routes. Is there a way to achieve this?
The order of the route definitions matters.
If you define the '/first' route before the '/:pageuniqueid', it should work.
The angular router stops evaluating the routes after the first match.
So in order to get the page.html as a fallback, you should put it as last entry in the list.
I would like to that way, if it exists, how to do that, ng-view (or ui view) loads, when load the page. For example: I would like to seperate header files, menu files, etc. So the Webpage should stands some views. I found only tutorials when views load after a click. Please inform me about this.
Thank you.
When you build your router you specify which template to show for every route. You can also create a default one like so:
.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.otherwise({redirectTo: '/'});
});
I am trying to integrate a live site to be mobile friendly. Is there a way in AngularJS to take in a url e.g. ../15K6#colors and route it to the mobile routes which should be ../colors/15K6
I am looking into $routeProvider, but am still new to Angular. Any help would be appreciated!
Below is a snippet of my config block with $routeProvider
.config(
[ '$routeProvider', function($routeProvider) {
$routeProvider.when('/models', {
templateUrl : 'views/models/models.html'
}).when('/models/:modelCode', {
templateUrl : 'views/models/model-detail.html'
}).when('/colors/:modelCode', {
templateUrl : 'views/colors/colors.html'
}).when('/packages/:modelCode', {
templateUrl : 'views/packages/packages.html'
}).when('/packages/:modelCode/package-detail/:optionCode', {
templateUrl : 'views/packages/package-detail.html'
}).when('/options/:modelCode', {
templateUrl : 'views/options/options.html'
}).when('/accessories/:modelCode', {
templateUrl : 'views/accessories/accessories.html'
}).when('/accessories/:modelCode/accessory-options/:groupName', {
templateUrl : 'views/accessories/accessory-options.html'
}).when('/summary/:modelCode', {
templateUrl : 'views/summary/summary.html'
}).when('/disclaimer/:modelCode', {
templateUrl : 'views/disclaimer/disclaimer.html'
}).otherwise({
redirectTo : '/models'
// parse url for deep linking
// e.g. ../15K6#colors into colors/15K6
});
} ]
Better if you provide more code details what you have so far.
On top of my head i can tell that you to have pass the $location param when you define the controller.
myApp.module('MyController', function($scope, $location){
$location.path("url");
})
Or in the route path just ask for the mobile template instead of the desktop template
I'm working on a AngularJS + OnsenUI project, and I'm having problems with the navigation.
Let's say that I have a module:
angular
.module('app.home', ['ui.utils','ngRoute','ngAnimate'])
.controller('HomeCtrl', HomeCtrl)
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'path/to/home/template',
controller: 'HomeCtrl'
})
.when('/test1', {
templateUrl: 'path/to/template',
controller: 'TestOneCtrl'
})
.when('/test2', {
templateUrl: 'path/to/template',
controller: 'TestTwoCtrl'
})
.otherwise({
redirectTo: 'path/to/home/template'
});
});
In the HomeCtrl I'm supposed to (depending on the result of certain functions) navigate to either test1.html or test2.html. My problem is that I don't know how to link the routeProvider to the the ons.navigator.pushPage function.
This doesn't work:
var url = '/test1';
$scope.navigator.pushPage( url, { animation : 'slide' } );
This works:
var url = '/absolute/path/to/template';
$scope.navigator.pushPage( url, { animation : 'slide' } );
My question is what do I need to do so I don't have to write the absolute path to the template in the url variable? Apparently I'm missing out on something, but I can't figure out what.
Thanks in advance!
I think it's because the path used in $routeProvider is not the same type of that of pageUrl used in navigator.pushPage().
$routeProvider.when(path, route);
and
navigator.pushPage(pageUrl, option);
Path is like the pattern or string of your app url found in the browser address bar. For example, "http://localhost:8000/app/index.html#/test1". That's when you can refer to this in the routeProvider as "/test1". However, in the navigator.pushPage(), you will need to specify exact url to the page just like how you set ur templateUrl inside $routeProvider. In other words, pageUrl = route.
That's just from my understanding though.
I have 2 states in my app currently. Each app has multiple views. I want on state to be activated on app start up. Right now, when the app starts, I only get the links. Then I have to click on any link to activate any state. How do I make a state opened by default?
states conf
var app = angular.module('dategenie', ['ui.router', 'ui.bootstrap', 'geolocation', 'ngIdle', 'infinite-scroll']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /profile
$urlRouterProvider.otherwise('/');
// Now set up the states
$stateProvider.state('profile', {
views: {
mainModule: {
url : '/profile'
, templateUrl : 'partials/profile.html'
, controller: 'ProfileCtrl'
}
, rightPaneModule: {
templateUrl: 'partials/location.html'
, controller: 'LocationCtrl'
}
}
})
.state('profiles', {
views: {
mainModule: {
url : '/'
, templateUrl : 'partials/home.html'
, controller : 'HomeCtrl'
}
, chatModule: {
templateUrl : 'partials/chat.html'
, controller: 'ChatCtrl'
}
}
});
}]);
HTML
a(ui-sref="profile") Profile
a(ui-sref="profiles") Home
a(href="/logout") Logout
div(ui-view="mainModule")
div(ui-view="chatModule")
div(ui-view="rightPaneModule")
Thanks!
First of all, your url declaration should be outside of the views object.
So this is how your profiles state would look like:
.state('profiles', {
url : '/',
views: {
mainModule: {
templateUrl : 'partials/home.html'
, controller : 'HomeCtrl'
},
chatModule: {
templateUrl : 'partials/chat.html'
, controller: 'ChatCtrl'
}
}
});
Note: I'm not sure if this is still a valid concern, but I would put all of my view names in quotes. If memory serves me right, this had some implications earlier on with UI-router - not sure if that still applies.
Secondly, you need to make sure you have HTML5 Pushstate enabled if you wish for routing to pick up an active state on "/". Otherwise your 'root' would be "/#/".
Here's some code you can slap in say a push-state.js file;
app.config(['$locationProvider', function($locationProvider) {
return $locationProvider.html5Mode(true);
}]);
Quite useful to have in it's own file when you stumble upon errors with client side routing, I find most of my issues arise from PushState indescrepencies (so toggling it on and off is a nice little advantage when debugging).
Hope that works out for you, good luck : )