All geek questions in one place

Do not load js file for specific path

I have a mean-stack site.

Usually all my external links are listed in index.html

I understand that one external JS library (e.g. https://cdnjs.cloudflare.com/troublelibrary.js ) I have some conflict with part of my website. So the workaround I'm looking for is NOT to download it for a specific path https://www.myexample.com/specific .

Does anyone know how to achieve this in routing?

Edit 1: (see full question here )

In fact, a library that has conflit has a value of history.js . My original code, which loads it all the time, is as follows. As a result, https://localhost:3000/home in the browser is always https://localhost:3000/home (i.e. it won’t 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 says:

 <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 understand that the first time you download https://localhost:3000/home will not change. But, if I update the browser, it may change to https://localhost:3000/#/home .

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

+5
source share
3 answers

I see your problem in a different perspective. You mentioned that you use history.js to avoid # in the URL. But you do not need history.js for this. I think you misunderstood your problem. There is a built-in Angular function to get rid of # paths. Because # used to track the relative path of any route. If we want, we can override this functionality by default.

But if you use this approach, the server should be responsible for redirecting the user to the index or home page in any route application, since Angular handles all the routing in the application.

You must add first

 <base href="/" />

in your HTML file.

Then you should enable HTML5 Mode inside your Angular app as follows.

 $locationProvider.html5Mode(true);

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

The 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 in the above example, when you click on the about link, the server responds not found to /about . This means that # is deleted.

+3
source

This is one way to do this:

 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> document. It will not load the script problem on the page specified in the if . Be sure not to load the script problem elsewhere on the page.

+2
source

you can do lazy loading script in angular

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

and somewhere in your code (based on any logic)

  $rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);
+1
source

Source: https://habr.com/ru/post/1271861/

More articles:


All Articles