AngularJS Partial HTML not able to use jquery lib (Which is loaded in index.html)

Question

I am using a web templates which is use jquery image gallery or other etc. I want to convert this template to angularjs structure. I make some partial html pages like slider.html or contact.html and its controller. when i call partial html to index ,slider can not able to use jquery libraries which ı loaded them in index. İf i refresh the page when partial is open it works again. I read some article about directives or other etc. but ı am not writing any script they are just loaded in index and html uses them so i do not need any directive to work a script i just need use all library file in partial html.

is there any way ?

i try to load all libraries which partial will use but in this way all libraries loaded each call and it works but it is not a good way

Answer 1

I have some tips: First of all, your libraries should not be included in the view. You should include the library just in one point of your application. Could be asynchronous (via JavaScript), or by adding the script tag for the library in your index file.

If you decide add the library via JavaScript, take into account to do a check to prevent multiples includes, e.g.,

if (!window.jQuery) {
    //include jQuery library
}

Also you can add the script tag in your index/main html file and if you want to load it asynchronously, you can add the attributes async or defer.
-- Take a look at HTML 5 <script> Tag.

Now, related to AngularJS, when you load a partial view, is raised the event $includeContentLoaded which is emitted every time the ngInclude content is reloaded.

If you have two or more partial views included, you should ask for the specific view where you want to load a library/plugin or make some DOM manipulation, e.g.,

controller.js

angular
.module('myApp')
.controller('HomeCtrl', [
  '$scope', '$window',
  function ($scope, $window) {
    'use strict';

    var homeCtrl = this,
      $ = jQuery; //safe alias


    //Emitted every time the ngInclude content is reloaded.
    $scope.$on('$includeContentLoaded', function (event, source) {

      if ('src/pages/home/zipcodeForm/view.html' === source) {
        //initialize your jQuery plugins, or manipulate the DOM for this view
      } 
      else if('src/pages/home/section1/view.html' === source){
        //initialize your jQuery plugins, or manipulate the DOM for this view
      }
    });


    //Can be used to clean up DOM bindings before an element is removed
    //from the DOM, in order to prevent memory leaks
    $scope.$on('$destroy', function onDestroy() {
      //destroy event handlers
    });

  }
]);

The code that matters here is the event $includeContentLoaded. Visit the site for more information: https://docs.angularjs.org/api/ng/directive/ngInclude

If you are using ng-view you should have no problems, just register the view in the router (there are a lot of ways to achieve the same)

module.js

angular
.module('myApp', ['ngRoute' /*, other dependecies*/]);

router.js

angular
.module('myApp')
.config(['$routeProvider', '$locationProvider',
  function ($routeProvider, $locationProvider) {
    'use strict';

    $routeProvider

    .when('/', {
      templateUrl: 'src/pages/home/view.html',
      controller: 'HomeCtrl',
      controllerAs: 'homeCtrl',
      reloadOnSearch: false
    })

    .when('/index.html', {
      redirectTo: '/'
    })

    .when('/home', {
      redirectTo: '/'
    })

    .when('/404', {
      templateUrl: 'src/pages/error404/view.html',
      controller: 'Error404Ctrl',
      controllerAs: 'error404Ctrl'
    })

    .otherwise({
      redirectTo: '/404'
    });

    /*
      Set up the location to use regular paths instead of hashbangs,
      to take advantage of the history API
      $locationProvider.html5Mode(true);
    */

  }
]);

When the view is loaded, it emits the event: $viewContentLoaded meaning the DOM is loaded, then you can initialize jQuery plugins safely.

controller.js

angular
.module('myApp')
.controller('HomeCtrl', [
  '$scope', '$window',
  function HomeCtrl ($scope, $window) {
      'use strict';

      var homeCtrl = this, //the controller
          $ = jQuery; //safe alias to jQuery

      //Emitted every time the ngView content is reloaded.
      $scope.$on('$viewContentLoaded', function() {
          $('.slickSlider').slick({
              slidesToShow: 4,
              arrows: true,
              slidesToScroll: 1
          });
      });
  }
]);

---

Important: In the previous code, the order where scripts are included does matter.

1. module.js
2. router.js
3. controller.js

I highly recommend using automation tools such as gulp