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: '/'});
});
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 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});
});
I want to be able to have users goto www.myurl.com/#/login and be taken to the specified view. Same for if they are on a specific view, if they refresh I would want them to be taken to the same view again. However currently no matter what the extension it will always take you to the home page on start up. Is there likely to be an error in my code or does angular routing not behave like that?
fcApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
templateUrl: 'html/frontPage.html'
})
.when('/login',
{
templateUrl: 'html/frontPage.html'
})
.when('/home',
{
templateUrl: 'html/home.html'
})
.otherwise({redirectTo: '/home'});
});
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 want to know if it's possible to make some hidden routes with angularjs, for example I have a category and sub category, in my application I have
.when('/category/new' ,{
controller : 'newCategoryCtrl',
templateUrl : '/category.html'
})
.when('/category/:id/sub/new' ,
{ controller : 'newSubCategoryCtrl',
templateUrl : '/subCategory.html'
})....
in my case , if you want to add new subcategories you have to search by category, and after that you have the access to subcategory view. but the problem with configuration, you can access this url if you know it without any restriction
What you can do is have a route that will handle the incorrect sub-route before the correct sub-route. You can actually leverage the same sub-route controller, evaluate the $routeParams and bounce back to whatever route you like.
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/page/new', { templateUrl: 'page.html', controller: 'pageCtrl'})
.when('/page/:id/:substuff', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.when('/page/:id/sub/new', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.otherwise({ redirectTo: '/page/new' });
}]);
Here's a plunk