Changing routes dynamically in angular and appending content

Question

I have setup a special route for angular that is a single route for many static pages, (think privacy policy, client html, that I would like my clients to be able to drop in a folder as a html page and it dynamically load it with routing.

When you type something in the address bar I am telling angular to go look in a directory and find a .html file with the $routeParams.name and load it.

This works great but I am replacing the data onto a blank page. blank.html

App.js

.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);

$routeProvider.when('/test', {
  controller : 'AppRepeatCtrl',
  templateUrl : './templates/test_tpl.html'
}).when('/:name', { 
  controller: 'DynamicRoutes',
  templateUrl: 'partials/blank.html'
}).otherwise({
  redirectTo: '/'
});

})

Controllers.js

function DynamicRoutes ($scope, $http, $location, $route, $routeParams, $compile, appLoading) {
  if ($routeParams.name == '' ) {
     $route.current.templateUrl = 'partials/' + "home.html";
  }  else {
     $route.current.templateUrl = 'partials/' + $routeParams.name + ".html";
  }

  $http.get($route.current.templateUrl).then(function (msg) {
    if (msg.data.contains('html')) {
        $http.get('partials/error.html').then(function (msg) {
            $('#ng-view').html($compile(msg.data)($scope));
        });
    } else {
        appLoading.ready();
        $('#ng-view').html($compile(msg.data)($scope));

    }
});
};

My question is, is there any way to load the page up from the partial without having to load the blank template and then replace the html with the static page. Because I am doing animation, the animations are getting borked because of the replace. I really need to load in a page without having to replace a blank.html template page, or replace the blank.html BEFORE the views start ng-animate

$('#ng-view').html($compile(msg.data)($scope)); is what I think is causing the page to replace html without the ng-animate enter-view finishing up.

because if you change it to $('#ng-view').append($compile(msg.data)($scope));

you can see 2 x and 1 has the animation but as soon as the append happens the animation stops.

bingjie2680 · Accepted Answer · 2013-09-25 20:22:04Z

6

First, don't load the template in a controller, it is not angular way to do it.

You don't need to load the blank.html just because you have to provide a template, the templateUrl can be a function where you can determin which template to load.

$routeProvider.when('/:name', {
    controller : 'DynamicRoutes',
    templateUrl : function (params) {
        console.log(params); // check the console to see what are passed in here

         //return a valid Url to the template, and angular will load it for you
    }
});

answered Sep 25, 2013 at 20:22

bingjie2680

7,7839 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JimmyBoy Over a year ago

I know it is a bit late to comment, but, can you explain when the function is invoked (I am trying to understand when I can pass params to it.)?

Collectives™ on Stack Overflow

Changing routes dynamically in angular and appending content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related