Rendering 'raw' HTML for AngularJS with Web2py

2,665 views
Skip to first unread message

Dirk Krause

unread,
Jan 29, 2013, 11:12:30 AM1/29/13
to web...@googlegroups.com
Hi,

I am trying to use web2py to manage a database and display the resulting JSON in AngularJS.  To render an angular compatible view I need to pass raw html in a view (for example the html needs to start with '<html ng-app>' and so forth). Of course I could place the files in the static folder, but then I can't protect the files via @auth.requires_login() etc.

What would be the best way to achieve that?

Thank you,
  Dirk

Dirk Krause

unread,
Jan 29, 2013, 3:10:04 PM1/29/13
to web...@googlegroups.com
I have to apologize for my stupid question.

Of course web2py *does* deliver raw html. But AngularJS uses the same brackets convention as web2py - that's what caused the conflict (I should write a book: 'The Art of Reading Error Messages' ... *facepalm*)

There seems to be a workaround, since you can change the markup in angular according to this:

I'll try this next.

Massimo Di Pierro

unread,
Jan 29, 2013, 4:19:27 PM1/29/13
to web...@googlegroups.com
You can also change the delimiters in web2py with:

response.delimiters = ('<?','?>')

Dirk Krause

unread,
Jan 29, 2013, 4:19:34 PM1/29/13
to web...@googlegroups.com
and it works.

links that helped:


This would be your view
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Angular demo</title>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js'></script>
<script type='text/javascript'>//<![CDATA[ 

var myApp = angular.module('myApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}
//]]>  
</script>

</head>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    Hello, [[name]]
</div>
</body></html>

Ramos

unread,
Dec 22, 2013, 2:18:59 PM12/22/13
to web...@googlegroups.com
Changing delimiters in angular, keeping web2py Style

From a book i read

Delimiters {{ ... }}
When you serve your Angular application from a framework like Symfony, the double curly braces {{ }} will conflict with the Twig templating engine, because it also uses the same characters as delimiters. To stay compatible with any plugins that rely on these delimiters on the server side, you should not change them. Angular offers a way to change the delimiters into something else:
var myAppModule = angular.module('myApp',[],


function ($interpolateProvider) {
$interpolateProvider.startSymbol('<[');
$interpolateProvider.endSymbol(']>');
});

This will change the stock {{ }} to <[ ]> for the current Angular app.

rppowell

unread,
Dec 23, 2013, 1:33:11 PM12/23/13
to web...@googlegroups.com
There are several ways to overcome the syntax collision with handlebars:
1. Change web2py's delimiter syntax to something other than double-curly-braces.
2. Have custom web2py html-helpers
3. Change handlebars's delimiter syntax.
4a. Have separate files for the handlebars templates - ng-include.
4b. Have separate files for the handlebars templates - templateURL.
5. Avoid using expressions

António Ramos

unread,
Dec 23, 2013, 6:17:16 PM12/23/13
to web...@googlegroups.com
Nice examples posted.
I just changed my view like the following 

{{response.files.append(URL('static','angular-1.2.2/angular.js'))}}
{{response.files.append(URL('static','controllers.js'))}}
{{extend 'layout.html'}}

<div ng-app="myApp">
  <div ng-controller='HelloController'>
      <input ng-model="search"/>
      <div ng-repeat="x in greeting|filter:search">
          <li class="label label-success">[[x]]</li>
      </div>
    
  </div>
</div>

This way i have both at the same time, web2py goodies and angular goodies.

Regards
António


2013/12/23 rppowell <rppo...@hotmail.com>
--
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages