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>
Related
I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>
So I'm learning angular and I have a very basic html with a js script and I keep getting 'angular is undefined' on line 1 of App.js. I have all of the angular scripts and my script in a Scripts folder. What am I missing?
index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="Scripts/angular-min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/App.js"></script>
</body>
</html>
App.js
var appMainModule = angular.module('appMain', []);
appMainModule.controller("homePageViewModel", function($scope, $http, $location){
$scope.Heading = "This is the heading";
$scope.SayHello = function () {
alert('Hello');
}
});
Folder structure in VS:
your script is wrongly named it should be this
<script src="Scripts/angular.min.js"></script>
instead of this:
<script src="Scripts/angular-min.js"></script>
Look at your file name and look at your script name.
Given that I've copied your code into a codepen; and the only changes I've made are to reference the CDNJS versions of Angular and Angular Route; and I'm not seeing an issue.
Your issue lies elsewhere.
Specifically, if you're building this project, your output folders need the same relative path to Scripts. In other words, your directory structure expects the following to be true:
- index.html
|
- Scripts
|
- app.js
- angular-min.js
- angular-route.js
Another issue could be that you don't have Copy to output Directory=true or don't have the angular-min.js set as Content (something to be copied to the output folder).
Here's the codepen changes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
</body>
</html>
you need to set type="text/javascript" in your angular script definitions.
try
<script type="text/javascript" src="Scripts/angular-min.js"></script>
<script type="text/javascript" src="Scripts/angular-route.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
I faced the same issue about angular being undefined. In my code type="text/javascript" attribute was missing. After I added this attribute, it worked fine. Try this also if the solutions above do not work.
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="/"/>
I have a simple GSP View which contains a reference to 2 bundles being managed by the Grails Resources plugin.
the reference to the core angularjs libraries are in my layout.
A basic representation of the view is like so:
<html ng-application="myapp">
<head>
<meta name="layout" content="main"/>
<title>a title</title>
<r:require modules="index, widgeta"/>
</head>
<body ng-controller="index">
<div>
<widgeta/>
</div>
</body>
</html>
Grails seems to pull everything in just fine, i can even see the myapp.controller('index', function(){}); line get executed.
However; my controller function itself never gets executed. Why not!?
Silly grails... I took a closer look at what was coming back with the HTML and grails was stripping off the controller and app reference.
Moving both to the first 'div' tag in the body seem to do the trick:
<html>
<head>
<meta name="layout" content="main"/>
<title>a title</title>
<r:require modules="index, widgeta"/>
</head>
<body>
<div ng-application="myapp" ng-controller="index">
<widgeta/>
</div>
</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>