I am building a webapp using Maven, Spring 4, Angularjs and Thymeleaf. I create some Thymeleaf template ( in directoty templates/fragments ). I have attached a screenshot of my eclipse web project.
The problem i am facing is about referencing libraries and css file, i am getting 404 not found on firebug.
HTML (index.html)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" href="/js/lib/angular.js" th:src="#{/js/lib/angular.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/ui-bootstrap-tpls-0.11.0.js}"></script>
<title>Jobly - login page</title>
</head>
<body>
<div th:include="templates/fragments/header::header"></div>
<h1>Hello on a second page!</h1>
<p>Click <a th:href="#{/hello}">here</a> to go back.</p>
<div th:include="templates/fragments/footer::footer"></div>
</body>
</html>
Here is the snippet code of header template :
<link th:href="#{/css/bootstrap.min.css}" rel="stylesheet" media="screen"/>
<script type="text/javascript" th:src="#{/js/lib/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/bootstrap.min.js}"></script>
Below the screenshot of 404 error
I've resolved my problem. It was a problem of specifing resources location and mapping in Spring configuration file. I add in app-servlet.xml
<mvc:resources mapping="/**" location="/"/>
Related
I'm following along with an AngularJS class, specifically the AngularJS Fundamentals class, on PluralSight and am creating a demo app using AngularJS. I've followed along perfectly and believe that I've done everything right, but for some reason, my variable isn't being printed to the screen using my controller. I'm getting an error in my console that says "failed to load resource EventController.js 404." How do I fix this?
Here's my EventDetails.html:
<!doctype html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.date}}
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/underscore-1.4.4.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/EventController.js"></script>
</body>
</html>
and then here's my EventController.js:
eventsApp.controller('EventController',
function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
date: '5/17/2018',
time: '11:02 am'
}
}
);
There are the only two things that we've created so far and I'm really confused as to where I messed up. Thanks!
EDIT: Here's my file structure:
I've figured out that removing the '/' at the beginning of all of my script source files allows them to load correctly
I am new to Vue.js and I am simply trying to load script tags to the page, like jQuery for example. I tried adding the scripts to the end of the body in the index.html file, but they come back as 404s.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>
<!-- JQUERY -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/tipr.min.js"></script>
</body>
</html>
Try moving them to the /static/ folder &/or prefixing the paths with ./ or /
So I was trying to simplify my header and somehow now my local jquery file doesn't load anymore. Other js files load fine but not jquery (i checked with Chrome's DevTools source section).
So I made a test file with a header stripped of most useless things to show you :
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Non-Conformité</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script type="text/javascript" scr="../bower_components/modernizr/modernizr.js"></script>
<script type="text/javascript" scr="http://{InternalCompanyServer}/nonConforme/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" scr="bower_components/jquery/dist/jquery.js"></script>
<script scr="js/jquery.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation.js"></script>
</head>
<body>
<div class="row topMargin" header>
<img class='small-3 columns logo hide-on-print' src="img/logo-fr.png"/>
<h2 class='small-9 columns' >Formulaire Non-Conformité</h2>
</div>
<div class="row"></div>
</body>
As you can see I tried multiple ways to write the link : Absolute then Relative, I even copied the jquery file to the js folder and tried to link it but no luck.
The foundation.js file just after it loads fine but it gives the : "foundation.js:703 Uncaught ReferenceError: jQuery is not defined(…)" Error. Comment if you need more info I didn't think of putting here.
you put scr forjQuery url instead of src ;)
Edit> just a reflex : https://validator.w3.org/check
Go to direct input, paste you html... and let' go : Line 7, Column 40: there is no attribute "SCR"
So heres my simple angular app. When I run the html file on its own via the browser, the variable name is displayed saying "nothing". However when I integrate it into django by making a dummy view that just calls a template (see views below), no variable name is shown. The only differece is when using django I load the JS files via {% static %} . The html output is the exact same for both except the django version doesn't output the variable name. I have broken the problem down to its simplest form and can't seem to understand what's happening here.
JS files are 100% loaded in django version. Chrome console shows no errors. I originally developed a simple app in angular to integrate with my django app but I can't do anything if this simple issue stands in my way.
views.py
def home_tester(request):
return render(request, 'angular/base.html')
HTML
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
</body>
</html>
app.js
var app = angular.module('ZeTasty',[]);
gridfilter.js
app.controller("GridFilter", function($scope){
$scope.name = 'nothing';
});
you need to add {%verbatim%} and {%endverbatim%} tag
django and angular use the same {{ and }} markers.
by hinting django with {%verbatim%}, he will ignore the {{ and }}. this will allow you to combine angular with django templates
example:
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<!-- 'verbatim' is required in order to disable Django's template engine
so we could use Angular's syntax -->
{%verbatim%}
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
{%endverbatim%}
</body>
</html>
For my Chrome Extension's options page, I'd like to use Angular.js (just for the options page, not for the extension's background JS or content scripts), but including it in my page and doing something like:
<!doctype html>
<html ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>
...throws this error in the dev tools console and nothing runs:
Error: Code generation from strings disallowed for this context
I assume it's because Angular is trying to write tags to the page or assign inline event handlers or something that runs inline JS, which is not allowed in Chrome extensions, so is there any way around this? Can I tell Angular to avoid using inline JS somehow, for example?
You can use manifest_version: 2 by specifying that angular run in CSP-compliant mode. Just add the ng-csp attribute to the <html> in your panel page.
So your HTML would be like this:
<!doctype html>
<html ng-csp ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>