Most elegant way of including AngularJS - javascript

At the moment, I'm including all of my JavaScript files in the <head> part of my html.
<!DOCTYPE html>
<html data-ng-csp>
<head>
<!-- ... -->
<script src="js/lib/wiki2html.min.js"></script>
<script src="js/lib/es6-promise.min.js"></script>
<script src="js/lib/l10n.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-sanitize.min.js"></script>
<script src="js/lib/angular-touch.min.js"></script>
<script src="js/wrapper-indexeddb.js"></script>
<script src="js/wrapper-devicestorage.js"></script>
<script src="js/util.js"></script>
<script src="js/app.js"></script>
<script src="js/app-services.js"></script>
<script src="js/app-directives.js"></script>
<script src="js/app-controllers.js"></script>
</head>
<body data-ng-app="FireDict">
<!-- ... -->
</body>
</html>
I thought about using build and packaging tools together with tools like require.js or browserify, but most of my dependencies don't come as npm modules or as requirejs definitions. I have never used any js build tools before, but it seems to be a lot of work if not all of your dependencies come in the right modularized/packaged format.
What is the most elegant way to include AngularJS and the other scripts I'm using?
Some background: I'm authoring a webapp for Firefox OS based on AngularJS. (The problems about ngCsp that I previously described here were due to my ignorance of angular-csp.css. I simply forgot to include it.)

I would take a second look at RequireJS. With RequireJS not all of your packages need to be formatted as AMD modules. In the case where a dependency is not in the RequireJS (AMD) format you would instead use the shim configuration for those dependencies in your RequireJS configuration.

Related

AngularJS where to put all script tags location

I'm new to AngularJS.
Where do I place all .js files like module,routes and controllers?
I found examples but they put all of it inside of tags.
like I currently code like this:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</html>
Is this normal? Or is there a proper way to include the files?
I have heard of RequireJS. But there a way without using it?
Thank you very much.
Regards,
Yuri
There is no right answer.
There are multiple ways. One of them being using <script> tags as your code does.
Other options are:
Gulp
Gulp + Bower
Webpack
RequireJS
SystemJS
You can also use Yeoman to scaffold your project with build pipeline in place.
You can include files normally before end body tag </body> - it's ok.
But more efficient way is pack your files into one or few groups (Libraries, Core, Modules) and minify. It is better to have fewer HTTP requests, so you should reduce amount of files.
To bundle your files and minify you can use gulp or webpack:
See example with gulp:
https://github.com/jhades/angularjs-gulp-example
See example with webpack:
https://github.com/zombiQWERTY/angular-webpack-starter
Few tips, you should pick and choose which ones are applicable to your app.
After all your application markup, load your scripts.
You may use a bundler, here is a starter project I created some time ago gulp-browserify-starter. #1 still applies.
Go through a bit more pain and use webpack to bundle your vendor and app code as distinct bundles.
Good luck
You need to put all your javascript just before body close tag instead of head
<html>
<head></head>
<body>
.......
.......
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</body>
</html>

Meteor React External JS Files

I have an HTML template which is bought from Themeforest, index.html of this template has js files included in the following order:
<!-- Scripts -->
<script src="js/vendor/jquery-2.1.0.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/vendor/HeadsUp.js"></script>
<script src="js/vendor/chart.min.js"></script>
<script src="js/vendor/jquery.mixitup.min.js"></script>
<script src="js/vendor/jquery.swipebox.min.js"></script>
<script src="js/vendor/masonry.min.js"></script>
<script src="js/vendor/swiper.min.js"></script>
<script src="js/vendor/materialize.min.js"></script>
<script src="js/main.js"></script>
</body>
How and where should I include these external js files in my Meteor React application?
As mentioned in this meteor documentation, you can create a compatibility folder from on client.
This folder is for compatibility with JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.
It is recommended to use npm for 3rd party JavaScript libraries and use import to control when files are loaded.

Basic Install of Angular2

Simple question - how do I installed Angular2 in a single HTML file - not using Bower, not using NPM, and not using NuGet, simple script files etc only?
EDIT:
From Dieuhd's answer I was able to get Angular 2.0 working using the below scripts -
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/rxjs#5.0.0-beta.6/bundles/Rx.umd.js"></script>
<script src="https://npmcdn.com/#angular/core/bundles/core.umd.js"></script>
<script src="https://npmcdn.com/#angular/common/bundles/common.umd.js"></script>
<script src="https://npmcdn.com/#angular/compiler/bundles/compiler.umd.js"></script>
<script src="https://npmcdn.com/#angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="https://npmcdn.com/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
You can reference sample on angular.io
https://angular.io/resources/live-examples/quickstart/js/plnkr.html

How to run ScalaJs tests in real browser?

Is it possible to run generated js test code in browser?
ScalaJS seems to generate following js files under target directory
(project-name)-test-fastopt.js
(project-name)-test-jsdeps.js
before running tests.
Is it possible to run these tests in browser e.g. using this type of html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Scala.js Experimental</title>
</head>
<body>
<!-- Include JavaScript dependencies -->
<script type="text/javascript" src="./sjsexp2/js/target/scala-2.11/sjsexp2js-test-jsdeps.js"></script>
<!-- Include Scala.js compiled code -->
<script type="text/javascript" src="./sjsexp2/js/target/scala-2.11/sjsexp2js-test-fastopt.js"></script>
<script type="text/javascript">
$(function(){
package.ClassName().mainFunction();
})
</script>
</body>
</html>
If yes then what should be in place of "package.ClassName().mainFunction();"?
I'm using uTest framework for testing.
There is a sbt plugin which provides a real browser environment for your tests using Selenium: https://github.com/scala-js/scala-js-env-selenium

How do I test jQuery code with MochaJS?

I think, mocha does not recognise jQuery in the scope of my tests, because it tests plain JavaScript without a problem. I tried to require jQuery's full code in the beginning of the .js file with my tests, tried to manually define $ with
before(function() {/* some code */}), but I always get this ReferenceError: $ is not defined when I try to run my tests and there is jQuery code tested with some of them.
Any ideas of how do I fix this?
In docs:
Mocha runs in the browser. Every release of Mocha will have new builds
of ./mocha.js and ./mocha.css for use in the browser. To setup Mocha
for browser use all you have to do is include the script, stylesheet,
tell Mocha which interface you wish to use, and then run the tests. A
typical setup might look something like the following, where we call
mocha.setup('bdd') to use the BDD interface before loading the test
scripts, running them onload with mocha.run().
So you can include any scripts, but the first you include libs, like jQuery, then tests
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="test.array.js"></script>
<script src="test.object.js"></script>
<script src="test.xhr.js"></script>
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>

Categories

Resources