Angular custom scripts loader - javascript

I have an Angular 7 CLI app which is served by ASP.NET MVC.
In Index.cshtml file I have these lines:
<script type="text/javascript" src="~/app/runtime.js"></script>
<script type="text/javascript" src="~/app/polyfills.js"></script>
<script type="text/javascript" src="~/app/scripts.js"></script>
<script type="text/javascript" src="~/app/vendor.js"></script>
<script type="text/javascript" src="~/app/main.js"></script>
Everything works fine.
However sometimes during development these files are not generated due to compilation errors etc.
I'm wondering is there a way to write a custom manual loader that will try to fetch these files and if any of these are not found will pop up a nice message to the developer.
Basically a really simple pre-loader to the application.
Any input is greatly appreciated.

In my case, what I do when it comes to altering the index.html is having a controller, which I call SpaController with an Index (default) action. Then, I load the index.html file (which is really small) and patch it with all the changes I want to apply. After being patched and downloaded on the browser, the rest of the communication is done through API REST, so it's just a small patch.
In your case, I would use that action of that controller I mentioned above and check if all the tag scripts are included. If not, you have flexibility to alter index.html and do what you want, like showing an error, or even stop the application.

Related

Using ArcGIS locally with Laravel

I am currently working on a project in Laravel for which we need to use ArcGIS. The ArcGIS component works as expected when it is loaded from js.arcgis.com, though it is brutally slow (this is likely because the processes we're trying to run are pretty intensive).
I would like to switch to using a local version of ArcGIS instead of loading from the net, but every attempt to do this fails.
I am using Laravel 5.3 and ArcGIS 3.20.
Code that works:
<script type="text/javascript" src='https://js.arcgis.com/3.20compact/'></script>
Code that doesn't work:
<script type="text/javascript" src="{!! asset('js/arcgis_js_api/library/3.20/3.20compact/') !!}"></script>
The page is a .blade.php file, and I have checked that the asset() section gets the proper (or at least expected) filepath.

Sails.js: load script on a specific view

In Sails.js how can I load a javascript file in a specific view, because I have an script that I want to load only in one view (.ejs).
I see that in layout.ejs all the javascript files are loaded for all views, so the idea is to exclude the javascript file from the layout and load inside the view.
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.js"></script>
<script src="/js/dependencies/angular-ui-router.js"></script>
<script src="/js/dependencies/angular-route.js"></script>
<script src="/js/dependencies/angular-translate.js"></script>
<script src="/js/dependencies/ui-bootstrap.js"></script>
<script src="/js/dependencies/textAngular-rangy.min.js"></script>
<script src="/js/dependencies/textAngular-sanitize.min.js"></script>
<script src="/js/dependencies/textAngular.min.js"></script>
<script src="/js/dependencies/angular-color-picker.js"></script>
<script src="/js/dependencies/angular-click-outside.js"></script>
<script src="/js/dependencies/angular-bootstrap-tpls.min.js"></script>
<script src="/js/dependencies/angular-filemanager.js"></script>
<script src="/js/dependencies/resource.js"></script>
<script src="/js/app.js"></script>
<script src="/js/locales/ca.js"></script>
<script src="/js/locales/en.js"></script>
<script src="/js/locales/es.js"></script>
<script src="/js/controllers/IndexController.js"></script>
<script src="/js/controllers/LoginController.js"></script>
<script src="/js/controllers/LogoutController.js"></script>
<script src="/js/controllers/NewVideoController.js"></script>
<script src="/js/controllers/PreviewController.js"></script>
<script src="/js/controllers/VideoConfigController.js"></script>
<script src="/js/controllers/layoutController.js"></script>
<script src="/js/services/LoginService.js"></script>
<script src="/js/services/VideoConfigService.js"></script>
<script src="/js/services/VideoService.js"></script>
<script src="/js/services/authInterceptor.js"></script>
<script src="/js/services/authToken.js"></script>
<script src="/js/test/controllers/IndexController-spec.js"></script>
<!--SCRIPTS END-->
The code above are the scripts of the layout. I would like to remove the textAngular scripts from the layout and load only in the view that uses textAngular.
Has someone an idea?
If you're loading different scripts on different pages as part of the actual behavior of your application, I'd advise against it. (But it looks like you're using Angular, so that's probably not the case, since you're probably attaching UI controllers to a particular page via ng-controller).
So, on the other hand, assuming you're looking into doing this for performance reasons, then here's what I'd suggest:
First lift with --prod and check to see what each page load feels like. Now that you're using a minified bundle, it should be considerably faster. Pay particular attention to what subsequent page loads feel like, since your browser will have cached everything by then. Because of the way the browser (and HTTP v1) work, in most cases you'll find that using a single bundle in production is actually faster then including only those scripts used on a particular page. (Plus it makes switching to a CDN much easier if that ever comes up).
That said, if you're using tons of JavaScript files (megabytes and megabytes), that might not always be an option. What we usually do at my company in that scenario is what #KevinLe suggested: manually include the really heavy scripts on the page that needs them. (Even then, you can probably still use the linker for everything else-- or vice versa).
Alternatively, you could get fancy with Grunt or Gulp-- just keep in mind that, when you go to production and you consider using a CDN, you'll have to bundle up those scripts for each individual view into separate payloads.
So to recap:
avoid writing front-end code that does stuff immediately when it is loaded without first checking the DOM
for most apps, you should just use a single bundle (performance will be better)
if you need to separate things out, include scripts manually in the views where you need them (note that if you do this and also decide to continue using the linker, then you'll probably want to move the linker tags out of layout.ejs and into each individual view as well-- that keeps your script tags in one place in the code)

MeteorJS: Selectively load javascript of each template

I have notice that meteor is creating and loading every template javascript file. Is it possible to selectively load javascript of each template? Because my app generate template file for each of my user. So if this is the case every user's template javascript is loaded to the page. That would not be ideal.
index.html
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_cart.jade.js?4e6fe10676dcbfd5eec51f802ab604bf7afefdfc"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_footer.jade.js?c904832f29a144cc6a3c53b8fc4159088d427ce9"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_header.jade.js?02a4f5e9a4a697194e32a16bee9209fa9a63422a"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_home.jade.js?91d90f326d7da8db94396648b81f88c739691754"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_product.jade.js?3eed90e15d544fb8e4d5418c641a51ce94c048b2"></script>
<script type="text/javascript" src="/client/views/themes/jnr8tWHJ6JTARPpYa/plate_jnr8tWHJ6JTARPpYa_search.jade.js?08b0b0b4e02599e9ceaac00b94515a1ee7638036"></script>
It's not possible, yet, but is on the roadmap: Incremental loading. According to that card:
Right now, on initial pageload, you download all of the JavaScript, templates, and css in the app.
If you are generating a unique file in your filesystem for every user that uses your app, you might want to reconsider how you are going about structuring your app. Do you really need a new template for every user, or can you get it done with one template and have it update according to which user is currently displayed/logged in?
The short answer is, you shouldn't.
This answer explains an elegant approach of selective loading and also explains why you shouldn't.
Consider the fact that after the initial page load (of maybe 2MB - 5MB for a medium size app) the browser caches everything and all that comes through the wire is pure data.

Google app engine python doesn't read js file

I built a python app on google app engine that pulls pictures from the flickr API and allows users to do cool stuff with the pictures, like drag and drop.
I have three JS files in the body:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/init.js"></script>
My jQuery code is working fine but only when I write it in either of the jQuery documents. If I place the code in the init.js, the code simply doesn't work, which I find rather weird. I put the code in the jquery files because I wrote console logs on the three script files and only the init.js didn't print to the console. I am linking the files correctly and referring to the right folder and right file. The folder JS was also added to the app.yaml:
- url: /js
static_dir: js
I can just leave the code in the jQuery file but this is not what I am supposed to do. I want to fix it.Is there a specific way to use the JS file on google app engine?
Use absolute paths instead of relative when loading your JS files (add the leading slash /):
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/init.js"></script>
I fixed it. The problem was that I named the file init.js. For some reason Firefox doesn't like that name (at least mine didn't) and didn't load the file. Chrome loaded the file without any problems. When I changed the file name to main.js, it started working in Firefix as well. I only tried this when I had exhausted all other possible options though. Such a weird behavior of Firefox.

How to use jQuery with Django?

I am interested in using the jQuery tablesorter but somehow am unable to.
I have followed the instructions and have placed jquery.js and the tablesorter.js in the same folder as my templates (the folder where the html file is). Unfortunately, when trying to access the .js files, it keeps hitting a 404, which I'm assuming means that the files are not on the correct path.
Any ideas for this fix?
Does django have a special place to place these js files? (not in the templates folder?)
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type ="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
The myTable is the same exact table as the one in the examples
Usually jquery, js, css, images and most of other static contents are handled as static files and not as django templates. Read managing static files docs.
For jQuery, you can use Google API :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And for Django, Did you configure a path for your scripts/médias etc... ? (in settings.py maybe ?)
To add to what others have written, if you want to make JQuery available throughout your site/app and you don't like external dependencies such as Google you can do the following:
Download the latest "compressed, production" JQuery at https://jquery.com/download/ - for example, on the command line in your static directory (might be <projectname>/static): wget https://code.jquery.com/jquery-2.1.3.min.js
Add a reference to load JQuery in your site's "base" template file (might be <projectname>/<appname>/templates/base.html) - for example: Add <script src="{% static 'jquery-2.1.3.min.js' %}"></script> in the <head> section
Test the JQuery installation by adding something like the following to one of your templates:
<script type="text/javascript">
$(document).ready(
function(){
$("#jqtest").html("JQuery installed successfully!");
}
);
</script>
<p id="jqtest"></p>
If necessary/usual after making template updates, restart your Django server, then load a page which uses the template with the test code

Categories