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
Related
I am trying to switch between routes using angular ui-router. I have two views that use exactly same functionality. My view 2 uses almost 90 % functionality from my view one eliminating some of the html code. In that case can I use same controller for two states like this?
// Routes
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('moduleone', {
url: '/moduleone',
controller: 'moduleoneCtrl',
templateUrl: path + 'views/one.html',
})
.state('module two',{
url: '/moduletwo',
controller: 'moduleoneCtrl',
templateUrl: path + 'views/two.html',
});
}]);
Rather I'd say create a single state which will be to slight tweak displaying template. You can have mapping stored somewhere to decide template name.
CodE
var ids = {"1": "one", "2": two}
.state('module',{
url: '/module/:id',
controller: 'moduleoneCtrl',
templateUrl: function($stateParams){
return path + 'views/'+ ids[$stateParams.id] +'.html';
}
});
I'm trying to configure my AngularJS app with optional route parameter.
The URLs that I need to support may have a locale at the beginning. e.g.
/fr-FR/Welcome
/Welcome
I tried the following
$routeProvider.when('/:locale?/Welcome', {
...
})
However, it seems, it satisfies the "/fr-FR/Welcome" case and not the "/Welcome" case.
Is it because I'm always prepending a "/" in the beginning.
Will the following work?
$routeProvider.when('/:locale/?Welcome', {
...
})
https://docs.angularjs.org/api/ngRoute/service/$route#example
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
Also you can use for multiple language support like this tutorials
https://scotch.io/tutorials/internationalization-of-angularjs-applications
It is not possible in Angular.
remember /:locale is not optional. it is route parameter which means its value could be different but it should be there to execute that route (controller and template).
like
/fr/Welcome
/en/Welcome
fr and en must be there which help angular to select that route.
So, the workflow with angularjs $routeProvider goes as following,
$routeProvider
.when('/main1', {
templateUrl: 'view1.html',
})
.when('/main2', {
templateUrl: 'view2.html',
})
My question is, is there any way of simplifying the following code. If when('/main1') and when('/main2') point to the same template. So,
$routeProvider
.when('/main1', {
templateUrl: 'view1.html',
})
.when('/main2', {
templateUrl: 'view1.html',
})
The question is asked because if we have multiple languages on the site, and we want to have multiple translations of the url.
Another solution would be to recognize if the site is using .com or .de for instance, and thus adjust to the correct /main1 or /main2 translation. So for instance,
var url = window.location.href;
var main;
if (url.match(/.de/) !== null){
main = "/main1";
}else{
main = "/main2";
}
$routeProvider
.when(main, {
templateUrl: 'view1.html',
})
But semantically, this doesn't seem to be the best solution as I like to keep configuration options set in the run block after the config. We also can't inject factories (only providers, I may be mistaken though) to config.
I would go for putting the language as first url segment in the route.
$routeProvider.when('/:lng/main', {
templateUrl: 'main.html',
controller: function($routeParams){
var lng = $routeParams.lng;
}
})
Though it would be really nice if the $routeProvider would provide this functionality where the an url segment can be isolated. I ain't that pretty putting :lng in each route.
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.
Using Angular I have a dozen or so routes setup similar to the following example code.
Is there a way to override which template and controller is loaded based on some other criteria while keeping the URL in tact? My goal is to display a login page when... lets say $scope.isLoggedIn = false. I don't want to change the URL to /login.
SomeApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/place', {
templateUrl: 'routes/place.html',
controller: 'PlaceCtrl'
})
.when('/test', {
templateUrl: 'routes/test.html',
controller: 'TestCtrl'
});
}]);
ngRoute is a very simple library that can basically only maps urls to controller/views. If you want more flexibility, try ui-router which has the ability to route based on state.
This isn't really doable with ngRoute, but with ui-router you can dynamically provide different templates based on just about anything you want.
$stateProvider.state('root',
url: '/'
controller: 'HomePageController'
templateProvider: [
'$rootScope'
'$templateCache'
'$http'
($rootScope, $templateCache, $http) ->
templateId = if $rootScope.isLoggedIn then "home-page-logged-in" else "home-page-not-logged-in"
templateId = "/templates/#{templateId}.html"
return $http.get(templateId, cache: $templateCache)
]
)
The catch is, as far as I know, you can't change the controller, only the template. Which kinda stinks.