I am starting my adventure with Angular2 and I've read lots of tutorials, but there is one thing I am concern about. Lets say we have two views - one with report and one with upload image.
First view will be handled by - let's say 'ReportComponent' and on html template it will use 'Chart.js' library
Second view will be handled by 'UploadMediaComponent' and on html template it will use 'Dropzone.js'
How to include this javascript libraries on html? In most tutorials I've read the only way to resolve it is to include both libraries in the index.html page (which is consistent with single page application pattern). But in the other hand - do we really need load hundreds of external libraries at once and beggining of loading the app even if we need to use it only in one view (one component)? Let's say I just need to use 'Dropzone.js' on only one view, do I need to load it on every html view on client side?
You could add file in your angular-cli.json configuration file.
Example :
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/highcharts/highcharts.js",
"../node_modules/chart.js/dist/Chart.js",
"../node_modules/chart.js/dist/Chart.min.js"
]
directly add all JS build will generate script bundled version , Not needed any imports
You could add file in your angular-cli.json configuration file.
Example :
"assets": [
"path/Dropzone.js" ,
"path/Chart.js"
],
Then directly include file to ReportComponent
<script src="/Chart.js"></script>
and UploadMediaComponent
<script src="/Dropzone.js"></script>
Have you tried to use bower or npm ? after you set it and install the libraries you need with bower install package it adds them to your html the libraries automatically.
Related
I have a project consisting of a TypeScript file and an HTML page. Currently, I am loading several libraries that the TypeScript file requires in the HTML Page by including them in tags, i.e. <script src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>.
Since I would like to use the TypeScript code in other web pages without having to copy a bunch of script tags, is there a way I could load the libraries in the TypeScript file instead of in the HTML file? I tried searching it up and saw some options (for example, import and export) but just using import {Tabulator} from 'tabulator-tables'; obviously didn't work, and I'm somewhat lost.
Because you stated that you're not using any bundler, and that you don't want to use a UMD module in a <script> element, you'll need a version of tabulator-tables that is in the ES module format. It looks like the package provides one at https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.es2015.min.js. You can download that file locally to your project and import from it in your script like this:
import Tabulator from './relative/path/to/where/you/saved/tabulator.es2015.min.js';
You'll need to publish that downloaded module alongside your HTML file, JS file, etc. wherever you're serving the web page, and make sure that you set your own script's type attribute to module in the HTML.
When using Angular the output creates files in folders such as "dist", "src", etc.
Is there a way in Apex 4.1 to tell the system to look for and use files within sub-directories [inside the images folder?]?
Reason being, I want to create a Dashboard App in Apex 4.1 that integrates an Angular App built using node.
So build the App using Node.js and Angular, then output to Production.
Then take those output files (HTML, CSS, JS) and incorporate them into an Apex 4.1 Theme that uses Oracle database to populate widgets in the dashboard.
This has been easy when using jQuery mobile, but getting Angular to work has been an issue so far due to the directory structure of the output files.
I have been able to get the <body ng-app="app"> code into the <body> tag, just haven't figured out how to tell Apex to use a new folder path in the theme editor.
So far all I can do is use #WORKSPACE_IMAGES# and call files within the images folder:
<script src="#WORKSPACE_IMAGES#jquery.mobile-1.3.0-beta.1.js"></script>
I need to be able to call files like this:
<script src="#WORKSPACE_IMAGES#/dist/index.html"></script>
<script src="#WORKSPACE_IMAGES#/src/index.html"></script>
etc. etc., which doesn't work.
Older versions of Angular seem to create only one output folder: src; and inside that folder is only one .html file, one .css file and one .js file.
Newer angular versions don't seem to support one folder with all the files in it?
I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.
I am creating single page app using Ember.js with multiple javascript files, which are combined and minified using bundle feature in VS2012.
If I turn on minification (BundleTable.EnableOptimizations = true;), ember.js library (ember-1.0.0-rc.3.js) is not included into ember bundle. For clarification filename does NOT end with ".min.js" nor ".debug.js". My bundle definition looks like:
bundles.Add(new ScriptBundle("~/bundles/ember").Include(
"~/Scripts/handlebars-1.0.rc.3.js",
"~/Scripts/ember-1.0.0-rc.3.js",
"~/Scripts/ember-i18n.js",
"~/Scripts/localize/loc-slovak.js"));
and it is used on page using:
#Scripts.Render("~/bundles/ember")
I have suspicion for too large file (more than 28000 lines, 774 kiB). I tried to update nuget package Microsoft.AspNet.Web.Optimization to latest version, but id did not solve my problem.
.NET's Bundler breaks Ember RC3 if you minify it. It's also breaking Ember-Data. We had to include all Ember related scripts without bundling directly in the _Layout.cshtml for now while we work on a different solution (we'll likely include a different transform just for Ember):
<script type="text/javascript"
src="#Url.Content("~/scripts/ember-1.0.0-rc.3.min.js")"></script>
<script type="text/javascript"
src="#Url.Content("~/scripts/ember-data.min.js")"></script>
If you're using the SPA template(download | source), you should be fine as it's still using RC2; but if you update to RC3, then you'll have to modify the bundle config and the layout file according to this sample.
I didn't have time to send the PR to the SPA template yet, but I have updates for this issue (will do it tonight fo sho)
Another thing if you're using the SPA template: It comes with a HTML helper #Html.RenderEmber() to render the templates in the View file in debug mode. This method does not render the template names according to Ember conventions, so I've added another method for now (#Html.RenderEmberTemplates()). They should be in sync after the PR/merge.
The sample added in Myslik's repo is probably the most up to date at this point and I suggest that you take a look for reference.
I have a simple Dojo application, that does only one require call, loading all the dependencies. The trouble is, while it is extremely simple, it still ends up loading ~100 files from server. I tried to solve that problem using Dojo build system, but seems I don't have a deep enough understanding.
So my question is - given a list of dependencies, like the following:
["dojo/parser",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/dom-class",
"dojo/request",
"dijit/form/ValidationTextBox",
"dijit/form/Select",
"dijit/form/NumberSpinner",
"dijit/form/CheckBox",
"dijit/layout/ContentPane",
"dijit/Dialog",
"dojo/NodeList-traverse",
"dojo/domReady"]
how do I set up the build to create a single-file (or several-file, just not 100-file) dojo file?
If you're using Dojo's require() loader, there are build tools that you can use to combine files and minify. According to the site, the build tools aren't included in an official release, so you'll have to get them from the development version (specifically, look in the buildscripts directory).
The Dojo documentation contains some info on its build system that you may also find useful.
As a proof of concept, here are the steps I took:
Go to the download page, and download the Source Dojo Toolkit SDK (it's the only one that contains the util scripts needed for a build).
Extract to a location (for the sake of this post, let's say it's /opt/dojo-toolkit).
From the Dojo toolkit directory (i.e. /opt/dojo-toolkit), run the build util: ./util/buildscripts/build.sh action=release htmlFiles=/path/to/my/index.html (careful, this slowed my 5-year-old dual-core to a crawl)
Example of index.html (this one is exactly inside the dojo-toolkit directory):
...
<head>
<script src="dojo/dojo.js"></script>
<script>
dojo.require("my.test");
</script>
</head>
...
The require() call looks for nested modules (I couldn't get it to work with a top-level module), so in this case, I've got a my directory inside of dojo-toolkit which contains a test.js file. That file is the main "bootstrap" file which loads in all of the dependencies. I just put random require() calls in mine:
dojo.require('dijit.ProgressBar');
dojo.require('dijit.Tree');
And that should do it. Basically, running the build utility against your HTML file (the one that contains the reference to dojo.js) makes sure that all of the dependencies are found, starting from the top.
Note: the build system create a release directory with the built output, but it looks a little misleading at first - it appears to have minified each individual file, but if you look at your actual bootstrap file (my/test.js, in this case), it will be a combined, minified file with (I presume) everything you need to run your app.
Otherwise, if you're using AMD style require()'s (as in require.js), you can use its optimization tool. According to the site, it will:
Combine all dependent files (including require.js itself) into a single file. It analyzes the require() call to figure out which files it needs to combine.
Minify your JavaScript using either UglifyJS (default) or Closure Compiler.
I needed to do the same thing and this is how I solved it.
If you read the documentation about how to create custom builds (http://dojotoolkit.org/documentation/tutorials/1.8/build/), in the Layers section they talk about creating custom layers. You can add all the modules you need there. Here is an example of my custom layer file:
layers : {
"dojo/dojo" : {
include : [
"dojo/dojo",
"dojo/_base/window",//
"dojo/dom",//
"dojo/dom-class",//
"dojo/ready",//
"dojo/store/Memory"
],
customBase : true,
boot : true
}
}
What this will do is build only those modules into dojo.js, along with the bootstrap loader so that you can load other modules on the fly.