How to apply jquery after AngularJS partial template is loaded

Question

I have a simple website that implements jQuery in order to create a Slider with some images in the Index.html top banner.

Now, I want to use AngularJS

Answer 1

When you specify your routes, you can also specify a controller, so your routes would look like this:

var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
        when('/about',{templateUrl:'app/partials/about.html', controller: 'aboutCtrl'}).
        when('/contact',{templateUrl:'app/partials/contact.html', controller: 'contactCtrl'}).
        otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html', controller: 'homeCtrl'})
    });

Now, you can define inside each controller what you want to do, jquery-wise, as part of a function, like this:

angular.module('website').controller('aboutCtrl', ['$scope', function ($scope) {

   $scope.load = function() {
       // do your $() stuff here
   };

   //don't forget to call the load function
   $scope.load();
}]);

Make sense?