Im trying to use Onsen with AngularJS but when i call the scripts i have error of 404 not found, this are the scripts that arent working
<link rel="stylesheet" href="onsenui.css"/>
<link rel="stylesheet" href="onsen-css-components.css"/>
<script src="angular.min.js"></script>
<script src="onsenui.min.js"></script>
<script src="angular-onsenui.min.js"></script>
i have installed onsen ui with npm, and i do have it in the node modules, and i have called it in the module too
var app = angular.module('app',['ngRoute','app.routes', 'app.core',
'onsen']);
app.controller('AppCtrl',function(){});
any idea what can i do to make it work?
No need to call this via script tag if you already have installed via NPM.
Take advantage of the module distribution, so you can simply call it with requirejs.
But there is literally gazillion projects on the web. For example this boilerplate can help you.
Related
I have started to work on my final project for CS50 by creating a web application. I started making all of the basic layouts to my html/css/javascript files on my local system, and installed flask locally to try it out. Although when I directly open the html files, it is linked up to the css and jaascript files, when I run it in flask, it gives me the error of "404 not found" for all of the css and javascript files I am trying to apply to the html.
Here is the code in my html file:
<link rel="stylesheet" type="text/css" href="../styles/page_layout.css">
<link rel="stylesheet" type="text/css" href="../styles/navbars.css">
<link rel="stylesheet" type="text/css" href="../styles/styles.css">
The html files are in the templates folder, and I have a separate adjacent folder called "styles" for the css files and "javascript" for the js file. I tried every kind of formatting to this and cannot get it to work. Does anyone know why this might be? Thanks.
I have found out the appropriate syntax to get my web application to function as I wanted.
The answer I found here:
CSS Problems with Flask Web App
I used the syntax provided and am not running into any issues anymore.
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
Taking my initial steps towards Angular 2.0.
First thing is to set up the right environment for the development.
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to Angular 2.0</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<h1> Hello Angular 2 </h1>
<my-app> Loading app component....<my-app>
</div>
<!--js-->
<!-- Polyfills for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js#0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.8"></script>
<script src="https://unpkg.com/systemjs#0.19.39/dist/system.src.js"> </script>
<script> window.autoBootstrap = true; </script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app').catch(function (e) { console.log(e); });
</script>
<!--js-->
</body>
</html>
I have copied the content from https://angular.io/docs/ts/latest/guide/setup.html for the following files:-
app.component.ts
app.module.ts
main.ts
NPM is installed & running.
But in order to get the node_modules folders with the required dependencies for the app to run.
What commands do I need to run.
What are the commands that I need to run to set up the Angular 2 environment?
Please note I am new to NPM.
Thanks.
You have angular-cli wich is a good starter point. It will set you everything up according to best practices.
Simple way to set up your first Angular 2 Application.
Download the zip version here.firstAngular2App
Extract it to your destination folder. Assume D:
Open your command prompt(ensure that all required softwares are installed).
Navigate it to the folder. Use the command cd D:\firstAngular2App
Executre npm install
Once it is done use npm start
This way you have your first Angular2 appliction up and running.
npm install in the root project (it will create your node_modules from the dependencies mentioned in package.json file, should have those files as a start)
If you are already using Visual Studio Code as an IDE, you may want to explore how they recommend setting up Angular. I personally found their installation guide painless and feature-rich. I have never walked through an official Angular installation before due to being drenched in jQuery projects. This guide was simple enough to give me a good beginners understanding.
So hey guys, I'm trying run a html file for this angular 2 course I'm taking. After creating the dependancies for the app I downloaded them with npm. Now when I try to run the app, I get this error..
file:///Users/Rocky/Angular2-course/skeleton/node_modules/jquery/dist/jquery.min.js
Failed to load resource: net::ERR_FILE_NOT_FOUND
This is how I wrote the jquery script..
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
If your'e using Angular, you want to try and avoid using jQuery since Angular comes with jqLite.
Try to the version of Bootstrap made for Angular 2.
Check out https://ng-bootstrap.github.io/#/getting-started
Also, ever though of linking them?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
If your files are in "./node_modules/jquery/dist/". Then, the script tag in your pages just looks like this:
<script src="/scripts/jquery.min.js"></script>
If you were using express with nodejs, a static route is as simple as this:
app.use('/scripts', express.static(__dirname + '/node_modules/jquery/dist/'));
Then, any browser requests from /scripts/xxx.js will automatically be fetched from your dist directory.
Note: Newer versions of NPM put more things at the top level, not nested so deep so if you are using a newer version of NPM, then the path names will be different than indicated in the OP's question and in the current answer. But, the concept is still the same. You find out where the files are physically located on your server drive and you make an app.use() with express.static() to make a pseudo-path to those files so you aren't exposing the actual server file system organization to the client.
I have installed both Apache and Meteor behind NginX through reverse-proxy (on an Ubuntu server). Apache is mapped directly as baseURL (www.mydomain.com/) and Meteor is mapped as a subfolder (www.mydomain.com/live/).
The problem I encounter is that my Meteor test (which works as expected at port 3000) stops working behind NginX since every single references (CSS, Javascript, template) are absolute to baseURL.
<html>
<head>
<link rel="stylesheet" href="/live.css?abc">
<script type="text/javascript" src="/packages/underscore/underscore.js?efg"></script>
...
<script type="text/javascript" src="/template.live.js?hij"></script>
<script type="text/javascript" src="/live.js?klm"></script>
</head>
Obviously, since Apache is mapped at baseURL, these files are not found when testing through NginX.
What would be the best way to resolve to problem? System Administration is not my forte, and Meteor is my first incursion at server-side javascript. So I don't even know if this can be fixed, and if so, if it's done through a server configuration, Meteor configuration or programmatically.
EDIT: The new "absolute-url" package in Meteor 0.4.0 fixed the problem!
http://docs.meteor.com/#absoluteurl
The new "absolute-url" package in Meteor 0.4.0 fixed the problem.
http://docs.meteor.com/#absoluteurl
Why are you including scripts and styles in your <head> with Meteor? Anything included within your meteor project directory, be it js, html or css, will get bundled up and served to the client without being included in your HTML with <link> and <script>.
If you must include things in your <head>, why not just use the absolute path including the subfolder?
<html>
<head>
<link rel="stylesheet" href="/live/live.css?abc">
<script type="text/javascript" src="/live/packages/underscore/underscore.js?efg"></script>
...
<script type="text/javascript" src="/live/template.live.js?hij"></script>
<script type="text/javascript" src="/live/live.js?klm"></script>
</head>
Forgive me if I'm misunderstanding the problem.