Web2py + AngularJS: routes

[Najtsirk]

Hello,

i have problem with Web2py and AngularJS regarding routes. Where should be partial .html files of specific routes stored? In static folder? 

Best,

Kristjan

[dlypka]

in the Views folders as usual.

But then I also had to make controller functions for each .html. For example:

def jqplot():

    # This method is necessary to allow views/home/jqplot.html to be rendered    

    response.delimiters = ('{[',']}')

    return dict()

[Najtsirk]

OK, but how do I configure AngularJS routes?

For example:

App.config(['$routeProvider',

    function ($routeProvider) {

        $routeProvider.

            when('/', {

                templateUrl: 'index.html',

                controller: 'IndexCtrl'

            }).

            when('/projects', {

                templateUrl: 'projects/index.html',

                controller: 'ProjektiCtrl'

            })

    }]);

How can I get routes to the partiapl templates right? Let's say that partial template for '/projects' is in views/projects/index.html directory. What is the right 'templateUrl' for this template?

Best,

Kristjan

[dlypka]

I did not put a folder name such as your projects/.

I kept the html paths flat.

I converted the Angular Store sample to web2py + Angular:

This worked for me:

var storeApp = angular.module('AngularStore', ['ngRoute', 'angularTreeview']).

  config(['$routeProvider', function($routeProvider) {

  $routeProvider.

      when('/store', {

        templateUrl: 'store.htm',

        controller: storeController 

      }).

      when('/products/:productSku', {

        templateUrl: 'product.htm',

        controller: storeController

      }).

      when('/cart', {

        templateUrl: 'shoppingCart.htm',

        controller: storeController

      }).

      otherwise({

        redirectTo: '/store'

      });

}]);

No need to specify index.html anywhere in the routing.

I had a controller angularStore.py and so all the htmls (including index.html) are in folder:

views/angularStore

[Najtsirk]

Cool. How did you manage to get authentication working?

Did you do it on a separate, "non Angular url", like 'default/user'? Did you manage to get it with Angular?

Best,

Kristjan

[dlypka]

I based my webapp on the web2py welcome app sample and I just use its login functionality.

To get that to work with Angular, I copied layout.html to layout_angular.html and in layout_angular.html I changed all {{ }} to {[   ]}

and I put that call "response.delimiters = ('{[',']}')" I showed you in the controller to change the web2py template delimiter to {[ ]}.

In my opinion it is best to change the web2py delimiter, and leave angular as {{ }} because so many angular code snippets are being used and very little new web2py templates are needed in the angular version of web2py.

I copied web2py_ajax.html to web2py_ajax_angular.html.

I changed web2py_ajax_angular.html and index.html for all {{ }} to {[ ]}

In layout_angular.html I made it use bootstrap 3.

In index.html I changed it to use layout_angular.html and web2py_ajax_angular.html.

After doing all that, then the regular web2py menu strip with the login drop down works.

but =MENU messes up so remove the =MENU call from laytout_angular.html

Instead, just below where =MENU was, put a standard Bootstrap 3 menu html fragment based on <ul class="nav navbar-nav"> such as:

<ul class="nav navbar-nav">

<li>

<a href="/init/default/index">Home</a>

</li>

<li >

<a href="/init/about/about_us">About US</a>

</li>

<li>

<a href="/init/about/help">Help</a>

</li>

</ul> 

In your style.css you can modify menu bar item colors by adding these css snippets;

.navbar .nav > li > a {

  background-color: black;

  color:greenyellow;

}

/* set hover and focus */

.navbar .nav > li > a:focus,

.navbar .nav > li > a:hover {

  background-color: gray;

  color: white;

}

/* set active item to darkgreen */

.navbar .nav > .active > a,

.navbar .nav > .active > a:hover,

.navbar .nav > .active > a:focus {

  background-color: lightgreen;

  color: black;

}

/* set font color and background of the project name (brand) */

.navbar .brand 

{

background-color: orange;

color: navy;

}

Good luck.

[keiser1080]

@dlypka could you post somewhere your angularjs version of web2py store.

I am also working on angularjs 

frontend: web2py view containing angularjs partial + autobahn.js

backend : web2py rest for db data + autobhan.py  + web2py authentification for the view using cas

need also to find a solution for a token authentification for the rest if it's to difficult with web2py a will use this http://blog.miguelgrinberg.com/post/restful-authentication-with-flask se also http://blog.miguelgrinberg.com/category/REST

[David Lypka]

Hi:

I believe I have posted details before - have you looked at all of my previous posts?

Some of the posts deal with login.

However I will see what I can do about posting web2py angular store code.

Cheers!

-Dave Lypka.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/VX3NQpj8RtY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[keiser1080]

@dlypka

i will search your post talking about authentication. 

I think i have read a post where your explain how to do by changing web2py,

i do not want to change the code of web2py because in case of upgrade some functionality can be broken, i will read again.

To post the application i think it's easy you can package the application using the web2py admin.

But don't forget to remove your password login ect... It's better to first clone the application then remove sensible data then package.

thanks for your reply.