Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Not load a JS file for a specific path

I have a website by mean-stack.

Normally, all my external references are listed in index.html

I realize that one external JS library (e.g., https://cdnjs.cloudflare.com/troublelibrary.js) I am using has some conflit with a part of my website. So a workaround I am looking for is to NOT load it for a specific path https://www.myexample.com/specific.

Does anyone know how to achieve this in the routing?

Edit 1: (see the full question here)

Actually, the library that has conflit is history.js. My initial code which loads it all the time is as follows. As a result https://localhost:3000/home in a browser is always https://localhost:3000/home (i.e., will not add # because of history.js)

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>

Then, if I try the following code, as Ben suggests:

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
    var newScript = document.createElement('script');
    newScript.src = 'https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js';
    document.head.appendChild(newScript);
    console.log(window.location.href)
</script>

I realize that for the first time of loading https://localhost:3000/home will not change. But, if I refresh the browser, it can change to https://localhost:3000/#/home.

So appending the script is not exactly the same as a direct reference, does anyone know why?

like image 585
SoftTimur Avatar asked Sep 16 '17 02:09

SoftTimur


3 Answers

I see your problem in a different perspective. You mentioned that you use the history.js to avoid # on the URL. But you do not need history.js to do that. I think you understood your problem in the wrong way. There is an inbuilt Angular functionality to get rid off # paths. Because # is used to keep track of the relative path on any route. If we want we can override that default functionality.

But if you use this approach the server should responsible to redirect the user to index or home page on any application route since Angular handle all the routing in the application.

First you should add

<base href="/" /> 

in your HTML file.

Then you should enable HTML5 Mode inside Angular application as follows.

$locationProvider.html5Mode(true);

By adding these two attributes you can get rid off the # path and this is the recommended way.

Following is a complete example.

var app = angular.module("app", ["ngRoute"]);


app.controller("MainController", function($scope){
});


//Add route handler
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    
    $routeProvider
        .when('/', {
            template: '<h1>Home</h1>',
            reloadOnSearch: true
        })
        .when('/about', {
            template: '<h1>About</h1>',
            reloadOnSearch: true           
        }).otherwise({
        redirectTo: '/'
    });

    // This will remove hash bang from the routes   
    $locationProvider.html5Mode(true);
    
}]);
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.js"></script>
  
  <base href="/" />
  
</head>

<body>

  <div>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
  
  <div ng-app="app" ng-controller="MainController">
     <ng-view></ng-view>
  </div>
  
</body>

</html>

As you can see on the above example when you click on the about link the server responds with not found on /about. This means the # bang is removed.

like image 81
Thusitha Avatar answered Oct 03 '22 06:10

Thusitha


This is one way to do it:

if(window.location.href !== 'https://url.com/path/to/trouble/page'){
    var newScript = document.createElement('script');
    newScript.src = 'https://url.com/path/to/script';
    document.head.appendChild(newScript);
}

Add this to the <head> of the document. It will not load the trouble script on the page you specify in the if statement. Make sure not to load the trouble script anywhere else on the page as well.

like image 33
Ben Rondeau Avatar answered Oct 03 '22 06:10

Ben Rondeau


you can do lazy loading of script in angular

 <script type="text/javascript" ng-src="{{exUrl1}}"></script>

and somewhere in your code (based on whatever logic you want)

 $rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);
like image 25
harishr Avatar answered Oct 03 '22 06:10

harishr