DRY routing in AngularJS

Setting up a routing in Angular JS is not the most difficult thing. Therefore, I only propose one of the possible solutions that will help you adhere to the principle of “ don't repeat yourself ” when working with routes.




')
First, I want to encourage you to create URLs a la REST. Such an agreement within the team will come in handy when the project grows significantly.

Let's say our site sells pet food.
Then the URLs will look like this:
Feed List - / #! / Dogfoods
The “feed” page - / #! / Dogfood /: id
Some additional feed information - / #! / Dogfood /: id / details

If you do not know why you need / #! / - you are here . In short - such links are considered seo-friends for Ajax sites.

Now let's talk about what I consider to be “dry” routing. Everything is simple - this is when the url'y lie in constants. That's the whole idea.

To do this, simply put a list of urls in. Constant . Let's call it ROUTES .

.constant('ROUTES', (function () { return { DOGFOODS: '/dogfoods', DOGFOOD: '/dogfood/:id', DOGFOOD_DETAILS: '/dogfood/:id/details' } })()) 

Now we configure routing:

 .config(['$routeProvider', 'ROUTES', function ($routeProvider, ROUTES) { var pathToIncs = '/pages/'; //,     $routeProvider.when(ROUTES.DOGFOODS, {templateUrl: pathToIncs + 'dogfoods.html', controller: 'dogfoodsCtrl'}); $routeProvider.when(ROUTES.DOGFOOD, {templateUrl: pathToIncs + 'dogfood.html', controller: 'dogfoodCtrl'}); $routeProvider.when(ROUTES.DOGFOOD_DETAILS, {templateUrl: pathToIncs + 'dogfood_details.html', controller: 'dogfoodsDetailsCtrl'}); }]) 

Okay, it should work. Perhaps now it looks unnecessary, but now we will reuse our constants.
For example, the main menu of our site. In a html template, we simply write:

 <a href="ROUTES.DOGFOODS">Dogfoods list</a> 

Well, does it make all the sense? Now all URLs in one place, less work with hands in if you need to rename something. Yes, and there is support from the IDE.

Oh yeah, a little moment. Since we do not know in which scope we need url constants, we need to put them in the rootScope . To me personally, this does not seem to be the pollution of the osprey - URLs are the place there.

You can do this for example:

 .run(['$rootScope', 'ROUTES', function ($rootScope, ROUTES) { $rootScope.ROUTES = ROUTES; }]) 

I also propose to get a service like this:

 factory('redirectFactory', ['$location', 'ROUTES', function ($location, ROUTES) { return { goDogfoods: function () { $location.path(ROUTES.DOGFOODS); } }; }]) 

The name of the redirectFactory service speaks for itself - make redirects, for example, from a controller, or other services, for example, during authorization, logout, etc.

So, I already see that shit are flying into me. Indeed, how to deal with parameterized urls? Here filters will come to our aid.
Let's say the parameter will be language. For example, I want to get urls like / #! / Eng / dogfoods .
Modify our ROUTES constants:

 .constant('ROUTES', (function () { var langParam = '/:lang'; return { DOGFOODS: langParam + '/dogfoods', ... } })()) 

Create a routeFilter filter:

 .filter('routeFilter', ['$filter', function ($filter) { return function (route) { var langParam = '/:lang'; var langVal = '/*   */'; return route.replace(langParam, langParam.replace(langParam, '/' + langVal)); }; }]) 

Great, now we just do this:

 <a href="/#!{{ROUTES.DOGFOODS | routeFilter}}">Dogfoods list</a> 

True, after that the filter will have to be applied in js.
For example, our redirectFactory service will look like this:

 .factory('redirectFactory', ['$location', 'ROUTES', '$filter', function ($location, ROUTES, $filter) { var 'routeFilter' = $filter('routeFilter'); return { goDogfoods: function () { $location.path(routeFilter(ROUTES.DOGFOODS)); }, ... }]) 

That's probably all.

Conclusion

What Angular JS lacks now is a collection of recipes and best practice. I am sure that everything can be beaten more elegantly, because there is always something to strive for, right? But I just wanted to add one more recipe to the piggy bank. I hope that the description is useful to me.