1

I have a simple application that has many different variations of one block.

I want to implement simple routing with Angular.

For example for the URL #/page1 main block of the page should load content from /partials/page1.html

I have a large quantity of pages with unique names. How can I implement such routing?

Note: we can't use Angular app.config to store all the URLs and template names there.

Damon
  • 3,004
  • 7
  • 24
  • 28
Rantiev
  • 2,121
  • 2
  • 32
  • 56
  • ng-include could work. – Davin Tryon Dec 04 '13 at 14:17
  • @Rantiev Split each of the function to it's own `module`. Each module now will have it's own `routes`. This way you end up with chunkable sizes of code and easy to understand app – Deeptechtons Dec 04 '13 at 14:19
  • @Deeptechtons, hi, imagine that you have 1000 pages, and you have to implement routing for them. It's just a chunks of HTML that should be loaded into main page block. You don't have to implement any different functinality. Just simple routing, how whould you do that? Don't using simple listing of all the routes. – Rantiev Dec 17 '13 at 19:13

2 Answers2

4

Option I: with static init of all possible routes

Something like this could work, although this is using app.config but in a programmatic way.

angular.module('yourApp',['ngRoute']).config(function ($routeProvider) {

    // get your pages from somewhere (e.g. via $http)
    var yourBigChunkOfPages = [
        {route: ..., template: ..., ctrl: ...},
        ...
    ];

    angular.forEach(yourBigChunkOfPages, function (page) { 
        $routeProvider.when(page.route, {
            template: page.template,
            controller: page.ctrl
        });
    });
});

Option II: with dynamic routing to single controller

Another, probably more generic, solution could be loading the same controller for all your requests and decide there what to do. E.g.:

angular.module('yourApp',['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when("/page/:pagename", {
        template: 'page.html',
        controller: 'PageCtrl'
    });
})
.controller('PageCtrl', function ($scope, $routeParams) {

    // do something with $routeParams.pagename which holds
    // the reference to the requested pagename

});

There is an explainaition of how to work with the injected params.

Community
  • 1
  • 1
fdomig
  • 4,417
  • 3
  • 26
  • 39
  • Try using a json file to store the names, then load via $hhtp.get and put the foreach in the promise. – Nathaniel Johnson Dec 04 '13 at 14:29
  • That is what i want to avoid, actually. I want to avoid storing all the filenames. And templates. That's the cause i ask! – Rantiev Dec 05 '13 at 18:56
  • @Rantiev, so how should angular _know_ where to route your requests? – fdomig Dec 05 '13 at 21:56
  • something like that /:pagename -> http://website.com/index.html#/pagename.html I'm sure it isn't hard. Just to load pagetemplate that name was passed to url as /:pagename parameter. – Rantiev Dec 06 '13 at 10:31
  • We have $httpRequest varaible somewhere, and we can take that parameter and make so controller will load template that has the same name. Is that a problem? I don't think so. It's better then listing of 1000 pages and changing that links and templates mapping every time you want to change page URL. – Rantiev Dec 06 '13 at 10:43
0

I have got it.

var module = angular.module('appName', ['ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'partials/index.html'}).
            when('/:page', {templateUrl: function(routeArgs){
                var path = 'partials';
                path += '/' + routeArgs['page'] + '.html';
                return path;
            }}).
            otherwise({redirectTo: '/'});
    }]);
Rantiev
  • 2,121
  • 2
  • 32
  • 56