Basic Install of Angular2 - javascript

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

Related

how to make cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js into local?

i'm having problem with displaying bootstrap navbar/anything that need JS in my vue 2project, im currently using CDN on this project
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
perhaps there is another way to install and import this into local?
<script src="bootstrap.bundle.min.js"></script>
i solve this problem by adding this thing into my index.html + downloaded file

openlayers and nodejs jquery not working offline

I have an openlayers with online jquery working, but sometimes I won't have internet access and I'd like to use it offline. I've downloaded the lib but it's not working, I'm sure that it's in the "js" folder, please help me
I'm using nodejs and openlayers
//working
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//not working
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//browser error
Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:6:36
ReferenceError: $ is not defined
​it's giving me this error, but with online jquery it's OK
First of all you should install jQuery. Run command below in your project folder to install jQuery:
npm install jquery
You should import it in index.js file:
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
Based on this post.
Or you should import it to your html:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
If you find the right answer please close the question on other communities(r.g. gis.stackexchange.com) and refer to the answer.
Thanks!
Hope it helps.
I just solved using a local server, don't ask me why it works this way and junt pointing the file path didn't work
first, open a terminal and go to the jquery.min.js folder, then start a simple server (ex: python3 -m http.server 8080)
after, go to the index. html file and add the source
<script src="http://localhost:8080/jquery-3.4.1.min.js"></script>
and now it works offline

How can I integrate chess.js and chessboard.js?

I am trying to integrate Chess.js and Chessboard.js but I am having some problems along the process. I have downloaded successfully Chessboard.js, unzipped the folder and within it I created a file called index.html that looks like the following:
<html>
<head>
<title>Chess Match</title>
<link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board" style="width: 400px"></div>
<script type="text/javascript">
var board = ChessBoard('board');
</script>
</body>
</html>
This proves that the library is working properly. Now I would like to integrate the Chess.js library in order to play a random match as described in this integration page.
How can I do that?
First I need to install Chess.js so I download the repo and I put the chess.js and chess.min.js files inside the js folder, but I am not sure of how should I proceed from here. Do you have any idea?
Add
<script src="js/chess.js"></script> into your file.

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>

Most elegant way of including AngularJS

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.

Categories

Resources