AngularJS Problem

[firey]

Hello, I've got a website that I initially wrote with PHP and jQuery (with jQuery UI, Bootstrap, TouchPunch, etc).  I found I was doing a lot of jQuery related work, coupled with some php for initial loads.  It became that I was more or less doing double the code (one for php to do the logic at render time, then jQuery adding the same logic for dynamic Ajax related functionality).

I was looking into Angular, and I think that it will allow me to reduce the jQuery code, and remove much of the PHP loading and really keep the PHP on the backend as opposed to front-end.  However, I am running into some difficulties (which as I have found out isn't that surprising).

I am starting with my options page as it has multiple pages and the next step with it was to really make it more dynamic/jQuery oriented (perfect spot for angular controllers).  However I have a problem and I am not sure how to handle it.

Basically I have a main file called app.js which creates my base application:

var app = angular.module('davesapp',[]);

This is what is set in the html tag (ng-app="davesapp").   Then I have a second file called: options.js.  It defines a second app/module:

var app = angular.module('davesapp-settings',[]);

This file is included in the options.php page in the content section (so it is loaded only on the options page).  This file has all my objects/functions related to the options page.  Including loading settings via ajax, ($http.get) and saving settings ($http.post) as well as a function for controlling which options setting to show.  

This files controllers only work if I include it in the app.js file. Like so:
 

var app = angular.module('davesapp',['davesapp-settings']);

Now, this works fine on the options.php page however it causes issues with other pages as I don't include the options.js file on other pages (not needed).  Is there some way for me to create an array of some sort that based on the page I can tell it what to include/not include?  Like for example on the options page have it look the same as above, but on say the archive page have it be:
 

var app = angular.module('davesapp',['davesapp-archive']);

Also, I am really liking the Angular idea primarily for things like the ng-repeat and the ng-show/hide that I can put right in the raw html (similar to the way the PHP is done) vs doing foreaches / $('div').show()/hide() of jQuery separately.   However I kind of feel like maybe adding in Angular might be over complicating things... but with the level of dynamic stuff that this site will have.. I think it will be much cleaner than trying to do it with both PHP and jQuery alone.

Also, not sure if it will make any difference, but I use the Slim Framework with the site so it handles all the routing/templating.  The Angular is purely to make sections of the code much cleaner and allow for more dynamic sections without a bunch of jQuery.

[firey]

No one eh?  Alright.. well another option I was thinking...

Was that I could change the logic so in PHP I use a different ng-app based on the page I load.  Since I use a header.php file that includes all the css files, js files, sets up my structure, etc.  Thoughts?

[spacer]

Have you tried using a AMD library to manage your dependencies? For example, requirejs. I remember Require.js being a pain in the ass to set up with Angular, but it might solve your problem.

 

You could look at other stand-alone frameworks for view manipulation, like KnockoutJS. I use knockout on a daily basis at work, and it's a nice framework. It has it's quirks, but I like it.

 

Personally, I stopped all Angular development and POC work when the Angular team announced that 2.0 was going to be a complete rewrite of the library, with little-to-no backwards compatibility. I really like Angular, but I'm waiting to see what happens with 2.0. (Yes I know the 1.x branch will continue to live on, but I'd rather wait for now. I'm not a huge fan of the 1.x API)

[firey]

Have you tried using a AMD library to manage your dependencies? For example, requirejs. I remember Require.js being a pain in the ass to set up with Angular, but it would solve your problem.

 

You could look at other stand-alone frameworks for view manipulation, like KnockoutJS. I use knockout on a daily basis at work, and it's a nice framework. It has it's quirks, but I like it.

 

Personally, I stopped all Angular development and POC work when the Angular team announced that 2.0 was going to be a complete rewrite of the library, with little-to-no backwards compatibility. I really like Angular, but I'm waiting to see what happens with 2.0. (Yes I know the 1.x branch will continue to live on, but I'd rather wait for now. I'm not a huge fan of the 1.x API)

Hmm, I may have to look into that.   I found a way to sort of solve my issue.  I found a thing called ng-module.  Which instead of binding an ng-app in say the html, you can wrap your content in a div, then do like

<div ng-module="davesapp-settings">

  or if you want multiple you could either associate them in the .js file or do 

<div ng-modules="davesapp","davesapp-settings">

See, for the basic site flow I rely on Slim to do the routing.  Then php for building the basic pages using the slim template then includes on the pages.  

require('header.php');

I'm really using angular to clean up my code and make things cleaner moving forward.  Like instead of trying to do a foreach loop with jQuery I can do an ("ng-repeat=blah) and as soon as the object bound in the repeat is populated (http.get) it just does it.  

So I am probably not using Angular to it's full power or capabilities, but it definitely makes the code easier to follow.