Angular.js and Yii2

Yii 2.0 General Discussions
1

I am wondering… seeing that you put in Angularjs specific functionality for html tag…

The only example for using Angular.js with Yii is based on a pure ang frontend and a rest backend. I don’t think that is putting Yii2 to good use, so I’d be very interested in hearing how you are using Angular.js with Yii2.

Ideally, I would want my Yii2 application to function without js, but since it is so easy to use Angular.js for parts of the page, and since you have included specific support for just that, I’d probably go for that instead of jQuery/Knockout/whatever.

2

I guess I am looking for arguments for using Angular.js with not a REST backend. That addition to Yii2 suggests that there are folks using both Yii2 and Angular.js for the front. :)

Maybe in combination with REST calls?

3

Angular.js breaks html standart

4

Thank you for your Earth-shatteringly helpful comment ;)

5

I’ve been studying this over the weekend and here is my conclusion.

Angular requires a REST backend for obtaining data. I don’t think any scheme you derive will avoid that. What that means is that all of Yii’s front-end niceties are essentially not available. Form handling, validation, routing is all up to you.

Now…

You probably don’t want publicly accessible, crawlable pages as part of your angular app due to SEO concerns with frontend routing. Thats a simplification, there are ways to make this work I guess (googled it, didn’t really understand it yet)… but I think this is where you would let Yii manage those pages in the traditional manner. For the internal application that is the single page app you could integrate angular in your asset bundle and do it the angular way. Or break that out into a separate subdomain.

It does seem that the predominant way to do it is to use angular as a standalone, REST-fed application though.

I hope others comment on this. Yii provides a lot of nice ‘stuff’ and my current understanding is that you are unable to reuse hardly any of it when developing a single page app.

6

From the Angular.js home page:

That sounds perfect for me!

Use as little or as much as I like. I do enjoy that. :)

I plan to use Yii2 for the main bulk of the application, but I will use Angular for small things like commenting, lookup, configuration editors, etc. Nothing that would change the current route, but would make the application feel more responsive.

I’ve been googling a bit to see how people are using Angular.js with Symfony2 / CakePHP, and it looks like some people are using it together rather than using separated front and back ends.

I could later create a stand alone Angular.js project and hook it up with a Yii2 REST backend, but I don’t want to do that, because then I need to handle routing, validation, everything in Angular.js as well…

Links:

http://louisracicot…s-and-symfony2/

https://speakerdeck…js-and-symfony2

http://harmssite.com…ar-and-symfony/

https://github.com/w...gularjs-cakephp

And, remember that I wrote this post because of the latest Angular.js specific additions to the Yii2 HTML helper :)

7

@jacmoe did you fid solution to this?

8

Not yet! :)

Too many things to do, and too little time.

9

do you have an idea of the project structure if i go with Yii2 as backend and Angularjs as front end?

10

If you are planning on separate apps, then perhaps this? -> https://github.com/githubjeka/angular-yii2

11

That will do serve me as great example. Thanks a lot!

12

Thanks

13

angularjs extension




<?php

use dee\angular\Angular;


/* @var $this yii\web\View */

?>


<?= Angular::widget([

    'name' => 'myapp', // default dApp

    'routes'=>[

        '/'=>[

            'view'=>'index',

            'controller'=>'IndexCtrl', // optional

        ],

        '/view/:id'=>[

            'view'=>'view', // if controller empty, controller will be as ViewCtrl

            'di'=>['$location', '$routeParams'], // $scope and $injector are always be added              

        ],

        '/edit/:id'=>[

            'view'=>'edit',

        ],

        '/create'=>[

            'view'=>'create',

        ],

    ]

])?>