You are not logged in.

Important Note: This forum is being archived and will be completely locked down on the 7th of February. The new forum can be found at http://laravel.io.

Announcement

    Laravel 4 Advanced Architecture: Book Now On Sale

#1 2012-06-14 23:25:54

bumstyla
Apprentice
From: Amman, Jordan
Registered: 2012-06-14
Posts: 5

AngularJs curly brackets!

Hi 

Im using Laravel for the first time on a new project and loving it so far. Just one thing that im having a problem with is with AngularJS. Its a javascript meta framework, and it uses data binding between models and views.
But the problem is that its using the curly brackets to wrap its variables just as in Blade templating engine.

What would be a good solution? do i change blade or do it change angular smile

Offline

#2 2012-06-14 23:54:57

bumstyla
Apprentice
From: Amman, Jordan
Registered: 2012-06-14
Posts: 5

Re: AngularJs curly brackets!

Ok i added a library that wraps the brackets. Because i cant put curly brackets inside the template but blade can evaluate a class.

class Angular
{
    public static function wrap( $statement ){
        return '{{' . $statement . '}}';
    }
}

Which is an overhead and complicates my templates. Maybe blade needs an escape mechanism for curly brackets.

Last edited by sineld (2012-06-15 07:00:33)

Offline

#3 2012-06-15 00:03:19

Vespakoen
Artisan
Registered: 2012-01-30
Posts: 429

Re: AngularJs curly brackets!

You can add a helper function to your start.php

function aw( $statement )
{
    return  '{{' . $statement . '}}';
}

Turning it into:

{{aw('somefunction()')}}

The other option is as you already said, replace the {{ }} into something else for 1 of the languages...

Offline

#4 2012-06-15 19:31:18

aleksblendwerk
Artisan
Registered: 2012-05-29
Posts: 10

Re: AngularJs curly brackets!

You can also define other template tags for Angular:

http://news.ycombinator.com/item?id=4113421

Last edited by sineld (2012-06-15 20:44:10)

Offline

#5 2012-06-21 15:01:42

bumstyla
Apprentice
From: Amman, Jordan
Registered: 2012-06-14
Posts: 5

Re: AngularJs curly brackets!

thanks aleksblendwerk,

Ill try the other option of changing the tags.

Offline

#6 2012-07-26 19:51:03

eshell
Artisan
Registered: 2012-06-09
Posts: 6

Re: AngularJs curly brackets!

i personally changed blade tags to '{=' and '=}'.

changed line 200 of laravel/blade.php to this:

    protected static function compile_echos($value)
    {
        return preg_replace('/\{\=(.+?)\=\}/', '<?php echo $1; ?>', $value);
    }

Offline

#7 2012-08-08 15:33:28

cubernatic
Artisan
From: Prague, Czech Republic
Registered: 2012-08-08
Posts: 23

Re: AngularJs curly brackets!

eshell's suggestion to change blade tags is the best.
Lot of JS template systems like handlebar use {{ tags. But I change the tags to '<%' and '%>' like RAILS.
Laravel is near rails habitus. And RAILS tags aren't  used by any JS template systems.
This should be also changed in next version (4).

Last edited by cubernatic (2012-08-08 15:44:00)

Offline

#8 2012-08-08 15:35:40

ShawnMcCool
Quality Team
From: Utrecht, Netherlands
Registered: 2011-10-05
Posts: 535
Website

Re: AngularJs curly brackets!

I just stopped using blade in my angular partials. I ended up using little to no server-side data injection by the time i was feature complete.


Note: I tend to speak in hyperbole.

About Shawn McCool | About Big Name | BigTo.Do - FreshBooks time tracking for to-dos | Laravel IO - The Official Laravel Community Portal

Offline

#9 2012-08-23 15:45:35

RichLove
Artisan
From: Milton Keynes, UK
Registered: 2012-08-14
Posts: 117

Re: AngularJs curly brackets!

Aha, just come across this also, as now decided on Laravel as server framework and looking at JS MVVMs and had the curly bracket issue.

Slightly OT but anybody have recommendations between:

- angular
- ember
- knockout
- batman?

Only played with knockout so far and looks good but giving angular a whirl now


Rich

Offline

#10 2012-08-28 08:07:37

jonagoldman
Artisan
Registered: 2012-06-28
Posts: 37

Re: AngularJs curly brackets!

@RichLove:
I have played with Knockout and Ember.
I really like Ember but can't say the same about Knockout.

I think Ember is the best choice here but I didn't tried Angular or Batman yet.

Here a nice post about that:
The Top 10 Javascript MVC Frameworks Reviewed

Offline

#11 2012-11-26 18:15:48

RichLove
Artisan
From: Milton Keynes, UK
Registered: 2012-08-14
Posts: 117

Re: AngularJs curly brackets!

ShawnMcCool wrote:

I just stopped using blade in my angular partials. I ended up using little to no server-side data injection by the time i was feature complete.

Shawn, notice you use Angular here, I'm just starting out with Laravel and Angular.

Would you mind giving a quick overview of how you structure your directories / files? (e.g. your js files, partials etc)


Rich

Offline

#12 2012-12-19 21:42:44

AustinW
Artisan
Registered: 2012-10-31
Posts: 7

Re: AngularJs curly brackets!

RichLove wrote:
ShawnMcCool wrote:

I just stopped using blade in my angular partials. I ended up using little to no server-side data injection by the time i was feature complete.

Shawn, notice you use Angular here, I'm just starting out with Laravel and Angular.

Would you mind giving a quick overview of how you structure your directories / files? (e.g. your js files, partials etc)

I, too, would love some additional information about the overall structure of a Laravel + AngularJS project. I actually arrived here looking for such info haha.

Offline

#13 2013-05-11 12:25:52

imran2013
Apprentice
Registered: 2013-05-10
Posts: 3

Re: AngularJs curly brackets!

I'm using Angular and Blade together (perhaps not the greatest of combinations) and also trying out development is Sublime Text 2. Seems there is an issue with syntax highlighting because they are sharing the opening and closing tags. I like the suggestion of using <% %> for blade so I'my trying that out. Of course that then ruins the syntax highlighting. I tried editing the the file for the syntax  highlighting but no dice. Anyone have any experience with Sublime text 2 or can point me in the right direction? Thanks!

Offline

#14 2013-06-11 00:42:48

hakaze
Apprentice
Registered: 2013-06-11
Posts: 3

Re: AngularJs curly brackets!

I've been writing two different apps using Laravel 4 as a restful api/backend and Angular as the front end. Is there a reason why you need to use laravel views over XHR? Performance and best practice wise, I'd say there is a much better solution and that is to use AngularJS for what it's made for, dynamic html binding. Your application will work much better and be much more logical if you use laravel as just a restful api. I even have session and authentication working perfectly with Confide and default Auth. Even in the short term you can develop your application much faster without the views, as many node.js developers tend to do this since those applications are based on HTTP status codes and response/requests. After converting my application from a traditional mvc on Laravel to an Angular/Laravel restful combination, the overall performance of my application has jumped over 50%. I wrote an emulator for casperjs to be executed through laravel upon requests to the backend over xhr, that queue jobs using the queue system and receive instant pub/sub notifications to the app via redis. Nothing against blade or laravel's templating, as it is great and my choice for non SPA, but I can't help but think the entire purpose has been defeated here and you might as well just start using jQuery's ajax calls.

Offline

#15 2013-06-12 22:24:27

DriesMarien
Artisan
From: Dessel - Belgium
Registered: 2013-03-20
Posts: 32

Re: AngularJs curly brackets!

Hi Hakaze,
I completely follow your line of thinking, but as I am quite new to AngularJS, could you give some more information on what your project structure looks like?
I think blade is still quite good for internationalization, or are you not using any.php files anymore? Are you completely doing the front-end in html?


Dries Marien - Freelance web developer
Get to know some things about me..

Offline

#16 2013-06-13 00:19:23

mossface
Artisan
Registered: 2013-04-01
Posts: 23

Re: AngularJs curly brackets!

For what it's worth, I've found changing Blade's tags is better than changing Angular's. In implementing things like Angular UI and Angular UI Bootstrap, using the default brackets for Angular is vastly easier than trying to get every additional component to work well with my alternate brackets. I doubt too many here would find themselves extending Blade with third-party libraries (especially if you're using Angular), but extending Angular is quite common.

Offline

#17 2013-06-13 07:39:49

DriesMarien
Artisan
From: Dessel - Belgium
Registered: 2013-03-20
Posts: 32

Re: AngularJs curly brackets!

I have also changed my {{ }} brackets by {= =} and the {{{ }}} by {={ }=}..
This seems to be working just fine, and I also think this is a much better solution than changing AngularJS..


Dries Marien - Freelance web developer
Get to know some things about me..

Offline

#18 2013-06-14 06:06:09

hakaze
Apprentice
Registered: 2013-06-11
Posts: 3

Re: AngularJs curly brackets!

Dries, I sent you an email with the link to David Mosher's video on laracasts.
I am doing all of my templates as html files using angular's templating. Laravel just sends JSON as a response and accepts JSON as a request. You can do all of your data intensive operations in laravel.
As far as my project structure:
app/.... laravel stuff
bootstrap/
vendor/
public/
..css/
../img
../templates angular html templates here
..js/
....app/ controllers.js,directives.js, etc...
....lib/ 3rd party jQuery, Bootstrap etc...

As far as where you put your templates, it doesn't matter as long as it's in public directory. You can organize them by templates/users/index.html etc if you want.

Last edited by hakaze (2013-06-14 06:10:47)

Offline

#19 2013-06-14 06:47:50

DriesMarien
Artisan
From: Dessel - Belgium
Registered: 2013-03-20
Posts: 32

Re: AngularJs curly brackets!

Hi Hakaze
Thank you very much for your information!
Will certainly watch that video, as for the structure I was working the same way you are.
Thanks again!


Dries Marien - Freelance web developer
Get to know some things about me..

Offline

#20 2013-06-18 13:50:16

hakaze
Apprentice
Registered: 2013-06-11
Posts: 3

Re: AngularJs curly brackets!

No problem.

Building "ng-artisan" boilerplate for AngularJS and Laravel because they're both awesome. Here are features I'm working on:

#Bower and Grunt integration for client side, with Live Reload and all those goodies.
#Package by Feature structure - so basic structure will be like this:
-server/(app,public,bootstrap)
-client/
---app/
------auth/
------tags/
------posts/
#Each feature will hold its own providers, services, directives, templates, etc. as individual modules.
#Yeoman generator to scaffold your laravel and angular MVC structure with one command for quick starts.

So hopefully once this is done it will be a great first stop for anyone wanting to combine these two great frameworks.

Offline

#21 2013-06-24 18:34:17

hefestos44
Apprentice
Registered: 2013-06-09
Posts: 3

Re: AngularJs curly brackets!

or you can simply modify angular template tags.
docs.angularjs.org/api/ng.$interpolateProvider

Offline

Board footer

Powered by FluxBB

');