0

Here is the basic setup of my app: I have a main application (myApp) and two modules underneath (view1, view2).

Here is myApp:

angular.module('myApp', [
  'ngRoute',
  'ui.router',
  'oc.lazyLoad',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
])

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise(function ($injector, $location) {
    var $state = $injector.get("$state");
    $state.go('view1'); 
  });

}])

.config(['$ocLazyLoadProvider',
  function ($ocLazyLoadProvider) {
    $ocLazyLoadProvider.config({
      loadedModules: ['myApp', 'myApp.view1', 'myApp.view2'],
      cssFilesInsertBefore: 'ng_load_plugins_before' // load the css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
    });
  }]);

And here is view1 (view2 is exactly the same except for changing the 1s for 2s):

'use strict';

angular.module('myApp.view1', ['ngRoute', 'ui.router', 'oc.lazyLoad'])

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
  var view1State = {
    name: 'view1',
    url: '/view1',
    templateUrl: 'view1/view1.html',
    resolve: ['$ocLazyLoad', function ($ocLazyLoad) {
      return $ocLazyLoad.load({
        insertBefore: '#ng_load_plugins_before',
        files: [
          'view1/view1.css'
        ]
      });
    }],
  }

  $stateProvider.state(view1State);
}])

.controller('View1Ctrl', [function() {

}]);

view1.css changes all text to blue and view2.css changes all text to red.

Here is how it is currently working: I start on view1 and all the text is blue. I go to view2, it adds view2.css to the head element, but when I go back to view1, it doesn't unload view2.css so the text remains red forever.

Here is how I would like it to work: I start on view1 and all the text is blue. I then go to view2, it removes view1.css from the head element and adds view2.css, changing all the text to red. When I go back to view1, it removes view2.css from the head element and the text is blue once again.

How do I accomplish this?

ClaytonAlanKinder
  • 313
  • 1
  • 3
  • 15

1 Answers1

2

From the Documentation for ocLazyLoad

https://oclazyload.readme.io/docs/faq

There is no way to unload javascript, but you can remove css by deleting the link tag of your resource with something like that:

$('link[href="/url/to/your/file.css"]').remove();

So, just run that for the view2 when loading view1 and vice versa for view1 when loading view2.

Community
  • 1
  • 1
Judd Franklin
  • 570
  • 2
  • 5
  • 16
  • Thanks for the response. I ended up going with this plugin: https://github.com/manuelmazzuola/angular-ui-router-styles I kept $ocLazyLoad for Javascript files and have used angular-ui-router-styles for CSS. It does the trick perfectly! – ClaytonAlanKinder Mar 09 '17 at 20:13