Pretty new to Jekyll (for github), I'm looking if there is a way to force raw in YAML header.
I'm using this HTML layout (called snippets)
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
...
</head>
{{content}}
</html>
I have a few HTML content which uses it this way:
---
layout: snippets
---
{% raw %}
<body>
....
</body>
{% endraw %}
Because they provide AngularJS code, I have to enclosed it in raw/endraw block.
Is there a way to set the file content as raw directly in the header, kinda:
---
layout: snippets
raw: true
---
<body>
....
</body>
Related
Using React, Node, and Express, with a single Nunjucks page for a template, I'm trying to pass a jwt-csrf token from my express server to the Nunjucks page as a javascript variable to be used in the React front-end (which will create post requests with the token).
This is the code in the njk template:
<html lang="en">
<head>
{% include "partials/head.njk" %}
<title>{{appname}}</title>
</head>
<body>
<div id="app"/>
<script src="/bundle.js" type="text/javascript"></script>
</body>
</html>
I had the idea of adding an additional script tag with a global variable, something like like:
<script>window.token = {{token}}</script>
but the {{ and }} get interpreted as javascript rather than as a nunjucks variable. How do I use nunjucks inside of Javscript?
Also, please let me know if what I'm doing is super not-secure, heh.
I want to learn AngularJS to use in JSF pages. This is purely learning purpose.
I tried simply add AngularJS code inside the jsf. But seems it doesn't identify the AngularJS code. it simply out put the same My first expression: {{ 5 + 5 }} in the browser.
my jsf page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="hi" >
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Can anyone help me how to get the output of the AngularJS expression within the jsf page? or show me some direction
UPDATE
My Actual intention is to get some json from Managebean or from another jsf page and populate here. but for that as testing I tried to create a dummy json structure. but still jsf doesn't identify AngularJS component. It's simply print
My first expression: {{ 5 + 5 }}
Browser console prints MyFirstAng.xhtml:24 Uncaught TypeError: app.conntroller is not a function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myAPP" ng-controller="customerctrl">
<p>My first expression: {{ 5 + 5 }}</p>
<!-- <ul>
<li ng-repeat="x in myData">
{{x.Name + ', ' + x.Age}}
</li>
</ul>
-->
</div>
</body>
<SCRIPT type="text/javascript">
var app = angular.module('myAPP',[]);
app.conntroller('customerctrl', function($scope){
// $scope.myData=[{Name:'jani',Age:'32'}];
});
</SCRIPT>
</html>
Ok, I found the issue. It was a typo in the app.controller. I had type additional "n". it worked. Thanks for all so far guiding me to spot the issue. I thought I am missing to include some AngularJS library or something.
In order for angular to initialize ng-app="hi" there needs to exist a module with that name. Otherwise you should be seeing an exception thrown in browser dev tools console. Please note console errors when developing javascript apps
Either include a module with that name or remove the name from the attribute and just use ng-app
Either paste this
var app = angular.module('hi',[]);
in your script or make the ng-app="" ... Your choice.
If you specify anything in the ng-app then you have to make a module as given above by me. Otherwise just dont specify anything in the ng-app i.e. ng-app="".
At a later stage when you want to make a controller then you can make a module.. For now its best left empty.
How to use Html template instead of Jade in Angular Application.
layout.html:
<body>
{% block content %}{% endblock %}
<h1>Hello!! whats up from layout</h1>
</body>
index.html:
{% extends 'includes/layout.html' %}
{% block content %}
<section> <h1>hello</h1></section>
{% endblock %}
Server.js
app.set('views',__dirname + '/server/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine','html');
app.get('*',function(req,res){
res.render('index');
});
But i am not getting output as expected, below is the snap of what i am getting in the browser.
{% extends 'includes/layout.html' %} {% block content %}
hello
{% endblock %}
I don't understand what i am missing.
Looks like you're not utilizing the proper view engine. See this article by Rod Dodson. The crucial line is:
app.set('view engine', 'ejs');
You have:
app.set('view engine','html');
This means express is simply rendering your EJS templates as raw HTML. Make sure Express understands which view engine you want to use, and you should be set.
I have a nice little working MEAN stack application, and i believe it can be a good base for you to set up express/node app with AngularJS HTML templates.
Even if your configured view engine in app.js(server.js or whatever name you call it) might be jade or EJS, Expressjs is quite flexible,you can still serve the HTML partials using AngualrJS routes.
So my base index.html looks something like this:
NOTE: there are ways to efficiently load JS files, but since it's a small To-Do App. so i am not going for it.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MEAN To Do Application </title>
<link href="vendor/flat-ui/css/vendor/bootstrap.min.css" rel="stylesheet">
<link href="vendor/flat-ui/css/flat-ui.css" rel="stylesheet">
</head>
<body ng-controller="AppCtrl">
<div ng-include="'app/header.tpl.html'"></div>
<div ng-view class="container-fluid"></div>
<script src="vendor/flat-ui/js/vendor/jquery.min.js"></script>
<script src="vendor/flat-ui/js/vendor/html5shiv.js"></script>
<script src="vendor/flat-ui/js/vendor/respond.min.js"></script>
<script src="vendor/flat-ui/js/vendor/video.js"></script>
<script src="vendor/flat-ui/js/flat-ui.min.js"></script>
<script type="text/javascript" src="vendor/angular-full/angular.min.js"></script>
<script src="vendor/angular-full/angular-resource.min.js"></script>
<script src="vendor/angular-full/angular-route.min.js"></script>
<script src="/socket.io/socket.io.js"> </script>
<script src="common/socketservice.js"></script>
<script src="app/app.js"></script>
<script src="app/meetups/meetups.js"></script>
</body>
</html>
Then here comes by Angular routes config(refer):
angular.module('meetups',['ngResource'],['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'app/meetups/list.tpl.html',
controller: 'MeetupsController'
})
.when('/create',{
templateUrl : 'app/meetups/create.tpl.html',
controller: 'MeetupsController'
})
.when('/:id',{
templateUrl: 'app/meetups/details.tpl.html',
controller: 'MeetupsController'
})
.when('/:id/edit',{
templateUrl: 'app/meetups/edit.tpl.html',
controller: 'MeetupsController'
})
.otherwise({redirectTo: '/'})
;
}]);
I hope i answered your question.
This is a clientside solution. Just FYI.
You may set any other character for angular's interpolate symbol:
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
(but it's may hurt - ide with angular support didn't recognize your symbol)
The best practice of binding - is use ngBind whenever it's possible (instead of {{ }} expresions):
<span ng-bind="myVal"></span>
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.
(from docs)
instead of
<span>{{myVal}}</span>
I'm a newbie with AngularJS. I used it yesterday for the first time (loving it!), so I apology if this is a dumb question.
I'm looping through a set of data called "leagues" mapping my HTML template with no issues. The data for the 3 leagues, including the logo appears correctly, however, the browser console keeps telling me the 3 logos doesn't exist (like the mapping hasn't taken place yet...)
Any ideas why is this happening? Thanks in advance!
Error:
HTML:
<!doctype html>
<html ng-app id="ng-app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="choose-league" class="section row">
<div ng-repeat="league in leagues">
<div class="col-md-4 league" ng-click="getTeams(league.abbr)">
<img id="{{league.id}}" src="{{league.logo}}" alt="{{league.id}}">
</div>
</div>
</div>
</body>
</html>
JavaScript (AngularJS):
function dataController ($scope) {
// Set of leagues we want data from
$scope.leagues = [
{id: 'champions', abbr: 'uefa.champions', logo: '/img/champions-logo.png'},
{id: 'liga', abbr: 'esp.1', logo: '/img/liga-logo.png'},
{id: 'premier', abbr: 'eng.1', logo: '/img/premier-logo.png'}
];
}
You should use the ng-src directive instead of the src attribute on your images. The purpose of this directive is addressing precisely the issue you're experiencing.
[EDIT]
As per the question WHY this is happening, the HTML is parsed verbatim (with the curly brackets) before angular.js kicks in and does its magic, making the browser complain about an invalid image url under the src attribute.
I am using AppEngine with the webapp framework (python). In my script I am generating javascript code dynamically with Django, for example:
python controller file
template_values = {
'page': '1',
}
path = os.path.join(os.path.dirname(__file__), "../views/index.html")
self.response.out.write(template.render(path, template_values))
index.html file
<html>
<head>
...
<script>
{% if page %}
alert("test");
{% endif %}
</script>
</head>
<body>
...
</body>
</html>
Now, instead of using inline <script> tags I would like to use the <link> tags with a reference to a JS file containing the script. However, I can't quite understand I can do that using the templates engine. If I include a JS file (dynamically) it would somehow have to know the value of "page", but "page" is known in the scope of index.html only.
Any ideas?
Thanks,
Joel
If you want dynamically generate your javascript code in your html,
you can write the code inside python code
page = 0
template_values = {
'js_code': 'alert("test:'+str(page)+'")',
}
path = os.path.join(os.path.dirname(__file__), "../views/index.html")
self.response.out.write(template.render(path, template_values))
in index.html
<script>
{{js_code}}
</script>
If you want to generate a js file dynamically, you can try to pretend there is a js file,
and generate its content.
class JSHandler(BaseHandler):
def get(self):
page= str(self.request.get("page"))
js_code ='alert("page:'+page+'");'
self.response.out.write(js_code)
def main():
application = webapp.WSGIApplication([
('/code.js', JSHandler),
], debug=True)
wsgiref.handlers.CGIHandler().run(application)
Then you can write this code in your html
<script type="text/javascript" src="/code.js?page={{page}}">></script>
You are either over-complicating a simple situation, or you haven't explained your problem clearly.
If you want to include an externally-located JavaScript file, you would use a <script> tag, not <link>.
If you have template code like this:
<html>
<head>
{% if page %}
<script type="text/javascript" src="/js/foo.js"></script>
{% endif %}
</head>
...
</html>
and page is not None, the template will render the following HTML to the browser:
<html>
<head>
<script type="text/javascript" src="/js/foo.js"></script>
</head>
...
</html>
and the browser will try to load the resource pointed to by the <script> tag. The browser has no knowledge of how that tag got into the HTML that it loaded.