CODEWITHSUNDEEP
angularjsroutesangular-routing
Zuriel
Zuriel

Reputation: 1848

Changing routes dynamically in angular and appending content

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.

Upvotes: 1

Views: 3186

Answers (1)

bingjie2680
bingjie2680

Reputation: 7773

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
    }
});

Upvotes: 6

Related Questions