I directly copied and pasted the source code, from this webpage, onto my compiler: http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/basic/first-example
I included the following source files within my HTML file :
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script src="http://tombatossals.github.io/angular-leaflet-directive/bower_components/angular/angular.min.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/bower_components/leaflet/dist/leaflet.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="https://angular-ui.github.io/ui-leaflet/bower_components/leaflet/dist/leaflet.css"/>
The map doesn't load, as seen in this image below:
Before using angular-leaflet-directive, you must include some files to your project (.css and .js).
Try to follow those steps :
Related
I am currently taking a React for Beginners course and following along using the course files provided. In the first chapter, they teach us how to create a simple Hello World example and in this example(both in the sample files and in the video) there is an extra closing script tag in the file. Just wondering if this has something to do with React or if the instructor made a mistake:
<!DOCTYPE html>
<html>
<title>Hello World Example</title>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- React -->
<script src="https://unpkg.com/react#0.14.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#0.14.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react#0.13.3/dist/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
</script>
</body>
</script> <!-- Extra closing tag -->
</html>
Here is my current Body tag:
<body ng-app="Mood">
<div id="moodApp" ng-view></div>
<script src="js/angular.js"></script>
<script src="js/angular-route-min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<script src="js/main.js"></script>
And here is the files tree :
Even though I would assume that it would work, i've got 404 errors :
In order to make it work, I have to add the folder name prefix like so :
<script src="mood/js/angular.js"></script>
Which is not what I want because when I'll push my work into the Git repo, other users wont have the "mood" folder.
How should I proceed to make it work without folder name prefix?
Thanks guys.
Use HTML base tag :
<head>
<base href="http://localhost/mood/"> or <base href="/">
</head>
<body ng-app="Mood">
<div id="moodApp" ng-view></div>
<script src="js/angular.js"></script>
<script src="js/angular-route-min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<script src="js/main.js"></script>
The <base> tag specifies the base URL/target for all relative URLs in a document.
Note : If the tag is present, it must have either an href attribute or a target attribute, or both.
Using relative path you can do this
use ../js/(remainnig path according to file in js folder).
I have my application built with ExtJS 4.2.1
My app structure was generated using Sencha Cmd v4.0.1.45.
Im using some custom CSS in my app to give personalized style so my XTemplate items and also Im using AwesomeFont and FamFam Sprites for icons.
This is my resources directory in my app sencha cmd structure:
App.css is a custom CSS
BoxSelect.css is other custom CSS
chooser.css is other custom CSS
famfamfam.css is the CSS that will handle the famfam.png image sprite
font.css is the CSS that comes with AwesomeFont.
The application in development mode (without building) works great, but when I tried to build using Sencha CMD and then try to open the production Index.html I couldn't see any icon neither the styles applied from my custom CSS's files.
So what I ended up was to modify my app Index.html in order to move all my CSS references outside the tag.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Application</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<!-- Ext Scheduler -->
<script src="lib/js/sch-all-debug.js"></script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script src="../Scripts/jquery.vegas.min.js"></script>
<script src="../Scripts/jquery.signalR-2.0.3.min.js"></script>
<!-- Ext Scheduler -->
<link rel="stylesheet" href="resources/css/sch-all-neptune.css">
<link rel="stylesheet" href="../Content/jquery.vegas.min.css">
<script src="app/Constants.js"></script>
<script src="app/Glyphs.js"></script>
<script src="app.js"></script>
<!-- </x-compile> -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/boxselect.css">
<link rel="stylesheet" href="resources/css/fonts.css">
<link rel="stylesheet" href="resources/css/famfamfam.css">
<!-- view icons chooser style -->
<link rel="stylesheet" href="resources/css/chooser.css">
</head>
<body></body>
</html>
Doing this way worked fine but I would like to create a SASS so my custom CSS's files can be minified.
Any clue on what are the steps that I have to follow in order to create my SASS for my custom CSS's so when doing sencha app build production my CSS are minified?
Appreciate any help.
In your application folder, there should be sass folder. Move your CSS stylesheets to sass/etc/ and rename to *.scss, then run sencha app build. This should do the trick.
One caveat: I recall there was a bug in Cmd at some point, it didn't pick up extra SCSS files. If the above solution does not work for you, manually concatenate all CSS files into sass/etc/all.scss and it should work then.
I am trying to work with ExtJS 5. I need to know which all files need to be imported in JSP/HTML page from EXT package.
<link rel="stylesheet" type="text/css"
href="http://yourdomainorlocalhost/ext-5.0.0/build/packages/ext-theme-
crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="http://yourdomainorlocalhost/ext-5.0.0/build/bootstrap.js"></script>
I will provide 2 answers to your question:
If you are using Sencha Cmd and the bootstrapping that it provides to generate your application your index.html could look as simple as the following for the basic application in the Sencha theming guide: (Since all the work is done by the microloader and all the files that you mention in index.html now sit in a file call app.json.)
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ThemeDemoApp</title>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
The second application is a basic Hello World including ExtJS 5 library in your application without the bootstrap:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Ext JS 5</title>
<link rel="stylesheet" type="text/css" href="/ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.0.0/build/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
You just need to add following Files:
-ext-all-debug.js or ext-all.js
-extext-*-all.css
and
-viewport.js [This file contains Ext.application related defination]
I am very new to using sencha. I have simple application and I want to add debug js library to see errors and warning. Problem is when I add this js to my app I see just blank screen and errors in this library. My index.html look like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/options-toolbar.js"></script>
<script src="../../api-debug.js"></script>
<script src="app.js"></script>
<script src="ext-all-debug.js"></script>
</head>
<body></body>
</html>
when I remove ext-all-debug.js everything works.
So what I am doing wrong ?
You have added ExtJs twice. You don't need to add the JS file from their examples. You need to add ext-all-debug.js and the css file. Mine looks something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-debug.css"/>
<script src="ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>
You might also want to have a look at the Sencha CMD that can create the setup for you:
sencha -sdk /path/to/sdk generate app
More info here: http://docs.sencha.com/extjs/4.2.0/#!/guide/command
To use dynamic loading of classes add this to your code:
Ext.Loader.setConfig({
enabled : true,
paths : {
Ext : "ext/src" //path to ext
//add custom/yourown namespaces here and their paths
}
});
And replace ext-all-debug.js with ext.js or ext-dev.js
<script src="../common/js/Ext/ext-dev.js" type="text/javascript"></script>
Use require in your code to let the loader know which classes to use:
Ext.require("Ext.form.Panel);