Angular: Add class after page load

Question

I have a fairly simple Angular routing scheme with two routes:

aoo.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/frame', {
            controller: 'FrameCtrl',
      templateUrl: 'ngPartials/frame.html'
        }).
    when('/bar', {
      controller: 'BarCtrl',
      templateUrl: 'ngPartials/bar.html'
    }).
        otherwise({
      controller: 'BarCtrl'
        });
}]);

I have a simple CSS transition:

.fade { transition: all 0.15s ease-out } 

I apply another class that triggers this transition. I want to add this class on page load and remove it when the route changes. The ng-animate directive seems a tad overkill. Is there a simple clean way to accomplish what I'm trying to do?

Answer 1

You can use ui-router. It is more powerful angular routing library which allows you to nest ng-views or have multiple ng-views on one page easly.

https://github.com/angular-ui/ui-router

Also it helps in animating view, when your view (state) changes. To do that you will need to use ng-enter, ng-leave directives which are responsible for animating view/sub-view when it is loading or unloading.

There you have some nice tutorials connected with ui-router:

Animating views

https://scotch.io/tutorials/3-simple-tips-for-using-ui-router

Answer 2

I'm not sure if I fully understand what you are wanting to do, but I would look into the $routeChangeSuccess event that is emitted when a route changes. You could set up a listener for this event in your app config, and apply some logic on each change.