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.
Related
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 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 try to combine angularjs with fullpage.js on the index.page. Also, there are still some pages just rendered normally by route.
Here is my route in app.js
app.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
// Below are all sections at index page
.when('/#index', {
controller: 'WelcomeCtrl',
templateUrl: 'views/welcome/index.html'
})
.when('/#products', {
})
.when('/#learn', {
})
.when('/#help', {
})
.when('/#contact', {
})
// Other pages not using fullpage.js
.when('/cases', {
controller: 'CasesCtrl',
templateUrl: 'views/welcome/cases/index.html'
})
.when('/users', {
controller: 'UsersCtrl',
templateUrl: 'views/users/login.html'
})
.otherwise({
redirectTo: '/'
});
});
However, when I scroll the sections at the index, each calls my first routes rule, then renders the index page though the section is been correctly scrolled to.
Besides, the route rules with hash tags seems not working when setting the html5Mode true, I got urls become http://xxx/%23products, how to resolve this problem?
Thanks.
OK, I solved it by some hack.
First, I set the flag 'lockAnchors' to be 'true' in fullpage.js.
Second, I set a controller to the navbar directive, which provides a $scope.scrollTo(anchor), then after click and call scrollTo(anchor), I use ngSilent to silently change the url.
Finally, I check which page where I click the navbar.
If not the index page with fullpage.js, I use $location.path("/") to back to the index, then silently add the anchor to the url, with using fullpage.js method to scroll to the anchor(after a timeout about 1200~1500).
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'm working on a file editing application in AngularJS. My urls look like this:
#/fileName.md
or
#/folder/fileName.md
or
#/folder/nested-folder/another-folder/itgoesonforever/filename.MD
I don't want to have to do a route for every single depth and it could be ~15 routes deep. Are there any ways to have conditional routes? Crudely:
/:fileorfolder?/:fileorfolder?/:fileorfolder?/:fileorfolder?
I think the best you can do with Angular is *, which is new as of v1.1.5 of $routeProvider:
path can contain named groups starting with a star (*name). All characters are eagerly stored in $routeParams under the given name when the route matches.
For example, routes like /color/:color/largecode/*largecode/edit will match /color/brown/largecode/code/with/slashes/edit and extract:
- color: brown
- largecode: code/with/slashes
You'd have to parse the largecode param yourself though.
I think I got it! The trick is to set the template to a simple , then modify the scope to include the dynamic path to your template.
So now I can place a file at /foo/bar/baz.html and see the template rendered by going to server.com/foo/bar/baz.
// Routes
app.config( function($routeProvider) {
$routeProvider
// Home
.when( '/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
// Catch All
.when( '/:templatePath*', {
template: '<ng-include src="templatePath"></ng-include>',
controller: 'CatchAllCtrl'
})
});
// Catch All Controller
app.controller("CatchAllCtrl", function($scope, $routeParams) {
$scope.templatePath = $routeParams.templatePath + '.html';
});
You could look at using the routeProvider#otherwise functionality
$routeProvider
.otherwise({controller: 'FileEditor',...});
http://docs.angularjs.org/api/ng.$routeProvider